Thread Author: Jeff
Thread ID: 2401
Thread Info
Es gibt 20 Beiträge zu diesem Thema, und es wurde 1963 mal angesehen.
Wer ist hier? 1 Gäste
 Thema drucken
Map-Tag + Rollover
Jeff
Hallo, ich beschäftige mich grad mit map-Tags.

Ich habe es geschaft ein bild so zu machen das man auf einzelne bereiche klicken kann. Nun habe ich per Photoshop ein bild erstellt für ein Rollover (Mouseover) effekt. Nun wollte ich fragen ob man diese 2 sachen kombinieren kann.

Also das ich wenn ich auf dem Bild mit mehreren Map-Tags auf ein feld klicke sich dieses ändert wenn ich mit der maus drüber fahre.


Mit freundlichen Gruß

reyman
 
SC-Ad-Bot
 
emblinux
jas das geht. Da kommt dann noch etwas Javascript mit ins Spiel.
Das Lernen ist wie ein Meer ohne Ufer. Konfuzius

Alles wird Gut!

KEIN Support per Mail, ICQ oder PN !
www.heiseclan.de/fusion/sig.gif

www.heiseclan.de/geosig.gif
 
Jeff
Okay kann mir villeicht jemand ein beispiel geben ? Und wie man das unter php fusion einbaut ?
 
emblinux
Ich glaube ich habe dich doch etwas missverstanden. Ich dachte du möchtest per Mouseover (Rollover) auf einem Bereich des Image-Maps einen anderen Bereich ändern. Den Bereich, wo die Mousedrüber fährt kann man so nicht ändern. Dazu müsstest du anders verfahren.

Zerlege das Bild in rechteckige Teile, so wie du es benötigst und speichere die Bilder für dich eindeutig. Das machst du mit dem Bild, welches als Rollover-Bild dienen soll auch, wenn notwendig. (Also wenn es nicht sowieso schon ein Teilbild ist)
Dann baust du dir eine Tabelle und fügst dort entsprechend die Bilder ein. Dort kannst du dann per Mouseover (oder auch per OnClick) bei jedem einzelnen Bild dieses auch ändern.

Hier mal ein Beilspiel zum Verständnis.

Code 

<table>
 <tr>
  <td><img src='bild1.jpg' onclick="this.src='bild1b.jpg'" /></td>
  <td><img src='bild2.jpg' onclick="this.src='bild2b.jpg'" /></td>
 </tr>
 <tr>
  <td><img src='bild3.jpg' onclick="this.src='bild3b.jpg'" /></td>
  <td><img src='bild4.jpg' onclick="this.src='bild4b.jpg'" /></td>
 </tr>
</table>



So in der Art müsste es dann funktionieren.
Das Lernen ist wie ein Meer ohne Ufer. Konfuzius

Alles wird Gut!

KEIN Support per Mail, ICQ oder PN !
www.heiseclan.de/fusion/sig.gif

www.heiseclan.de/geosig.gif
 
Jeff
Ich danke ersteinmal für die Hilfe.

Da gibt es 2 kleine Probleme. Bei dem Skript muss man auf das Bild klicken damit es sich verändert und wenn ich das ganze in der Tabelle macht bleiben lücken zwischen den Bildern.

Code 


<script>
button1_a= new Image();
button1_a.src = "../../images/NPC/UnsereGilde.jpg"
button1_b= new Image();
button1_b.src = "../../images/NPC/UnsereGilde11.jpg"
button2_a= new Image();
button2_a.src = "../../images/NPC/Gaestebuch0.jpg"
button2_b= new Image();
button2_b.src = "../../images/NPC/Gaestebuch01.jpg"
button3_a= new Image();
button3_a.src = "../../images/NPC/Forum.jpg"
button3_b= new Image();
button3_b.src = "../../images/NPC/Forum1.jpg"
</script>

<center>
<a href="http://diemächtigen.de/teamlist.php"
onmouseover="austausch1.src='../../images/NPC/UnsereGilde11.jpg';"
onmouseout="austausch1.src='../../images/NPC/UnsereGilde.jpg'">
<img src="../../images/NPC/UnsereGilde.jpg"
border="0"name="austausch1"></a>
<br>
<a href="http://diemächtigen.de/infusions/guest_book/guest_book.php"
onmouseover="austausch2.src='../../images/NPC/Gaestebuch01.jpg';"
onmouseout="austausch2.src='../../images/NPC/Gaestebuch0.jpg'">
<img src="../../images/NPC/Gaestebuch0.jpg"
border="0"name="austausch2"></a>
<a href="http://diemächtigen.de/infusions/guest_book/guest_book.php"
onmouseover="austausch3.src='../../images/NPC/Forum1.jpg';"
onmouseout="austausch3.src='../../images/NPC/Forum.jpg'">
<img src="../../images/NPC/Forum.jpg"
border="0"name="austausch3"></a>
</center>


Das ist jetzt zum Beispiel so wie ich das gemacht hatte. Habe die Bilder auseinandergeschnitten und so entstand auch keine lücke. Nur wenn ich jetzt 2 Bilder nebeneinander habe ist dazwischen eine Minimale lücke. ( das ist bei dem 2. & 3. Bild das in der Mitte eine kleinelücke ist)

Kann man das korrigieren ?
Bearbeitet von Jeff am 11.02.2010 um 14:51
 
emblinux
Man kann das ganze ruhig in eine tabelle machen. Natürlich muss man da einiges beachten, z.B. alle Teilbilder müssen gleich groß sein, zumindest pro Spalte und Zeile. Der tabelle sagen, das der Abstand zw. den Zellen 0 ist. ( cellpadding='0' cellspacing='0'Wink In den tabellenfeldern darf man natürlich auch kein Leerzeichen irgendwo haben. Wenn du dich daran hälst, dann geht das auch in einer Tabelle.
Das Lernen ist wie ein Meer ohne Ufer. Konfuzius

Alles wird Gut!

KEIN Support per Mail, ICQ oder PN !
www.heiseclan.de/fusion/sig.gif

www.heiseclan.de/geosig.gif
 
Jeff
Also es geht nicht, wenn ich ein ein Großes bild habe darunter 2 und darunter wieder nur ein großes ?
 
emblinux
Doch, aber auch da muss man folgendes beachten. Die 2 Bilder müssen zusammen genauso groß sein, wie das eine große Bild. Und die beiden großen Bilder solten dann die gleiche größe haben.

Das sieht dann z.B. so aus:

Code 

<table cellspacing='0' cellpadding='0'>
 <tr>
  <td collspan='2'><img src='bild1.jpg' onclick="this.src='bild1b.jpg'" /></td>
 </tr>
 <tr>
  <td><img src='bild2.jpg' onclick="this.src='bild2b.jpg'" /></td>
  <td><img src='bild3.jpg' onclick="this.src='bild3b.jpg'" /></td>
 </tr>
 <tr>
  <td colspan='2'><img src='bild4.jpg' onclick="this.src='bild4b.jpg'" /></td>
 </tr>
</table>


Das Lernen ist wie ein Meer ohne Ufer. Konfuzius

Alles wird Gut!

KEIN Support per Mail, ICQ oder PN !
www.heiseclan.de/fusion/sig.gif

www.heiseclan.de/geosig.gif
 
Jeff
Also ich habe es jetzt so gemacht

Code 


<center>
<table border="0" cellpadding='0' cellspacing='0'>
<tr>
  <td><a href="http://diemächtigen.de/teamlist.php"
onmouseover="austausch1.src='../../images/NPC/UnsereGilde11.jpg';"
onmouseout="austausch1.src='../../images/NPC/UnsereGilde.jpg'">
<img src="../../images/NPC/UnsereGilde.jpg"
border="0"name="austausch1"></a></td>
<tr>
  <td><a href="http://diemächtigen.de/infusions/guest_book/guest_book.php"
onmouseover="austausch2.src='../../images/NPC/Gaestebuch01.jpg';"
onmouseout="austausch2.src='../../images/NPC/Gaestebuch0.jpg'">
<img src="../../images/NPC/Gaestebuch0.jpg"
border="0"name="austausch2"></a>
<a href="http://diemächtigen.de/infusions/guest_book/guest_book.php"
onmouseover="austausch3.src='../../images/NPC/Forum1.jpg';"
onmouseout="austausch3.src='../../images/NPC/Forum.jpg'">
<img src="../../images/NPC/Forum.jpg"
border="0"name="austausch3"></a></td>
 </tr>
</table>
</center>



Aber die lücke zwischen 2. & 3. Bild bleibt. Und beide bilde sind genauso groß wie das 1. Bild.

Wie würde das denn eig. aussehen wenn ich bei deinem Code mit Mousover arbeiten würdeund nicht onclick ?
Bearbeitet von Jeff am 11.02.2010 um 16:09
 
emblinux
packe mal bitte alles (Bilder und html datei) in ein Archiv (zip oder rar, ist egal) und hänge es mal hier an, dann schaue ich mal drüber.
Das Lernen ist wie ein Meer ohne Ufer. Konfuzius

Alles wird Gut!

KEIN Support per Mail, ICQ oder PN !
www.heiseclan.de/fusion/sig.gif

www.heiseclan.de/geosig.gif
 
Jeff
Es hat sich erledigt.

Ich habe ein <tr td> dazwischen kleben.. nun passt alles

Ich danke für deine Hilfe. Hast mir sehr geholfen Wink
Bearbeitet von Jeff am 11.02.2010 um 16:24
 
emblinux
Alles klar, wobei du deine Tags alle nochmal überprüfen solltest, in dem Codeschnipsel von dir fehelen einige End-Tags und wenn du XHTML konform sein möchtest, dann muss beim IMG-Tag am Ende auch ein / vor dem >

Schau dir einfach meine Beispiel an.
Das Lernen ist wie ein Meer ohne Ufer. Konfuzius

Alles wird Gut!

KEIN Support per Mail, ICQ oder PN !
www.heiseclan.de/fusion/sig.gif

www.heiseclan.de/geosig.gif
 
Jeff
Ja das sehe ich auch immer wieder bei anderen, aber ich hab immer wieder gesehen das es bei mir auch so ohne das klappt, aber ich versuche mich mal daran zu halten. Wink

Danke nochmal
 
emblinux
Tja manchmal sind die Browser intelligent und korrigieren einige Fehler, aber nicht immer.

Nur sollte man, wenn man schon programmiert, sich auch an diverse Standards halten, sonst kann man es auch bleiben lassen. Denn irgendwann kann es passieren, das man mit unsauberen Quell-Code auf die Nase fällt.

Dabei gibt es doch im Netzt soviele Seiten, die einem das so gut erklären.
Das Lernen ist wie ein Meer ohne Ufer. Konfuzius

Alles wird Gut!

KEIN Support per Mail, ICQ oder PN !
www.heiseclan.de/fusion/sig.gif

www.heiseclan.de/geosig.gif
 
Jeff
Ja ist richtig, aber ich hab auch grad alles geändert Wink
 
Jeff
So sorry das ich das thema nocheinmal aufwühle. ^^

Ich habe das ganze jetzt nebeneinander unter meinem Banner gemacht (www.DieMächtigen.de) mit folgendem Code:

Code 


<center>
<a href='http://DieMächtigen.de'><img src='http://img64.imageshack.us/img64/2015/bannervs.jpg' border='0'/></a>
<script>
button1_a= new Image();
button1_a.src = "../../images/NPC/UnsereGilde.JPG"
button1_b= new Image();
button1_b.src = "../../images/NPC/UnsereGilde1.JPG"
button2_a= new Image();
button2_a.src = "../../images/NPC/Gaestebuch.JPG"
button2_b= new Image();
button2_b.src = "../../images/NPC/Gaestebuch1.JPG"
button3_a= new Image();
button3_a.src = "../../images/NPC/Forum.JPG"
button3_b= new Image();
button3_b.src = "../../images/NPC/Forum1.JPG"
button4_a= new Image();
button4_a.src = "../../images/NPC/Fotogallerie.JPG"
button4_b= new Image();
button4_b.src = "../../images/NPC/Fotogallerie1.JPG"
button5_a= new Image();
button5_a.src = "../../images/NPC/Nuetzliches.JPG"
button5_b= new Image();
button5_b.src = "../../images/NPC/Nuetzliches1.JPG"
button6_a= new Image();
button6_a.src = "../../images/NPC/Partner.JPG"
button6_b= new Image();
button6_b.src = "../../images/NPC/Partner1.JPG"
</script>
<a href="http://diemächtigen.de/teamlist.php"
onmouseover="austausch1.src='../../images/NPC/UnsereGilde1.JPG';"
onmouseout="austausch1.src='../../images/NPC/UnsereGilde.JPG'"/>
<img src="../../images/NPC/UnsereGilde.JPG"
border="0"name="austausch1"/></a>

<a href="http://diemächtigen.de/infusions/guest_book/guest_book.php"
onmouseover="austausch2.src='../../images/NPC/Gaestebuch1.JPG';"
onmouseout="austausch2.src='../../images/NPC/Gaestebuch.JPG'"/>
<img src="../../images/NPC/Gaestebuch.JPG"
border="0"name="austausch2"/></a>

<a href="http://diemächtigen.de/forum/index.php"
onmouseover="austausch3.src='../../images/NPC/Forum1.JPG';"
onmouseout="austausch3.src='../../images/NPC/Forum.JPG'"/>
<img src="../../images/NPC/Forum.JPG"
border="0"name="austausch3"/></a>

<a href="http://diemächtigen.de/photogallery.php"
onmouseover="austausch4.src='../../images/NPC/Fotogallerie1.JPG';"
onmouseout="austausch4.src='../../images/NPC/Fotogallerie.JPG'"/>
<img src="../../images/NPC/Fotogallerie.JPG"
border="0"name="austausch4"/></a>

<a href="http://diemächtigen.de/viewpage.php?page_id=3"
onmouseover="austausch5.src='../../images/NPC/Nuetzliches1.JPG';"
onmouseout="austausch5.src='../../images/NPC/Nuetzliches.JPG'"/>
<img src="../../images/NPC/Nuetzliches.JPG"
border="0"name="austausch5"/></a>

<a href="http://diemächtigen.de/partner.php"
onmouseover="austausch6.src='../../images/NPC/Partner1.JPG';"
onmouseout="austausch6.src='../../images/NPC/Partner.JPG'"/>
<img src="../../images/NPC/Partner.JPG"
border="0"name="austausch6"/></a>
</center>



So nun habe ich bei google alles mögliche gesucht um ein Drop-Down_menü zu erzeugen. Jedoch ist das alles ohne Bilder. Sondern nur einfache codes.
Ich wollte das zum Beispiel: Wenn ich auf Fotogallerie gehe ein Punkt darunter auftaucht zum -> Foto einsenden. In dem selben Schema wie ich die Navigation gemacht habe mit dem Mouseover.

Ich hoffe ich habe mich verständlich ausgedrückt. Wenn nicht. Entschuldigung.
 
Jeff
Kann mir jemand helfen bei meiner Frage ?
 
Jeff
Wenn keiner mehr eine Antwort hat dann kann dies geschlossen werden...

Danke für alle Antworten.
 
emblinux
schau dir doch einfach mal folgendes DropDown-Menü an, eventuell hilft dir das etwas weiter.

http://www.phpfusion-mods.net/infusions/downloadsv7/dldb.php?op=view&id=669 (Registrierung zum Download erforderlich)
Das Lernen ist wie ein Meer ohne Ufer. Konfuzius

Alles wird Gut!

KEIN Support per Mail, ICQ oder PN !
www.heiseclan.de/fusion/sig.gif

www.heiseclan.de/geosig.gif
 
Jeff
Danke ersteinmal für die Antwort. Es ist schon das was ich suche, nun hab ich etwas nachgetüftelt. Aber icvh weiß noch nicht wie ich das machen soll das von meinen Bildern aus ein down menü auf geht.

Aber ich kenne mich damit überhaupt nicht aus und denke das ich mich mit dem zufrieden geben muss.

Danke nochmal an alle
Bearbeitet von Jeff am 23.02.2010 um 12:42
 
Springe ins Forum:
Gr@n@dE