|
Map-Tag + Rollover
|
| Jeff |
Geschrieben am 10. Februar 2010 14:40:37
|
Anfänger
Posts: 48
Registriert seit: 03.04.09
LehrlingNächstes Level: 48/50
Scores: gesperrt
Verwarnstatus: 
|
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 |
 |
|
|
|
|
| emblinux |
Geschrieben am 10. Februar 2010 14:50:07
|
Posts: 3662
Registriert seit: 04.10.08
MeisterNächstes Level: 3684/5000
Scores: gesperrt
|
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 !
 |
| |
|
|
|
|
| Jeff |
Geschrieben am 10. Februar 2010 15:36:41
|
Anfänger
Posts: 48
Registriert seit: 03.04.09
LehrlingNächstes Level: 48/50
Scores: gesperrt
Verwarnstatus:
|
Okay kann mir villeicht jemand ein beispiel geben ? Und wie man das unter php fusion einbaut ? |
| |
|
|
|
|
| emblinux |
Geschrieben am 10. Februar 2010 16:32:38
|
Posts: 3662
Registriert seit: 04.10.08
MeisterNächstes Level: 3684/5000
Scores: gesperrt
|
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 !
|
| |
|
|
|
|
| Jeff |
Geschrieben am 11. Februar 2010 14:49:45
|
Anfänger
Posts: 48
Registriert seit: 03.04.09
LehrlingNächstes Level: 48/50
Scores: gesperrt
Verwarnstatus:
|
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 ?
Editiert von Jeff am 11. Februar 2010 14:51:21 |
| |
|
|
|
|
| emblinux |
Geschrieben am 11. Februar 2010 15:43:32
|
Posts: 3662
Registriert seit: 04.10.08
MeisterNächstes Level: 3684/5000
Scores: gesperrt
|
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' 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 !
|
| |
|
|
|
|
| Jeff |
Geschrieben am 11. Februar 2010 15:48:15
|
Anfänger
Posts: 48
Registriert seit: 03.04.09
LehrlingNächstes Level: 48/50
Scores: gesperrt
Verwarnstatus:
|
Also es geht nicht, wenn ich ein ein Großes bild habe darunter 2 und darunter wieder nur ein großes ? |
| |
|
|
|
|
| emblinux |
Geschrieben am 11. Februar 2010 15:55:00
|
Posts: 3662
Registriert seit: 04.10.08
MeisterNächstes Level: 3684/5000
Scores: gesperrt
|
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 !
|
| |
|
|
|
|
| Jeff |
Geschrieben am 11. Februar 2010 16:05:47
|
Anfänger
Posts: 48
Registriert seit: 03.04.09
LehrlingNächstes Level: 48/50
Scores: gesperrt
Verwarnstatus:
|
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 ?
Editiert von Jeff am 11. Februar 2010 16:09:47 |
| |
|
|
|
|
| emblinux |
Geschrieben am 11. Februar 2010 16:14:54
|
Posts: 3662
Registriert seit: 04.10.08
MeisterNächstes Level: 3684/5000
Scores: gesperrt
|
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 !
|
| |
|
|
|
|
| Jeff |
Geschrieben am 11. Februar 2010 16:22:11
|
Anfänger
Posts: 48
Registriert seit: 03.04.09
LehrlingNächstes Level: 48/50
Scores: gesperrt
Verwarnstatus:
|
Es hat sich erledigt.
Ich habe ein <tr td> dazwischen kleben.. nun passt alles
Ich danke für deine Hilfe. Hast mir sehr geholfen
Editiert von Jeff am 11. Februar 2010 16:24:30 |
| |
|
|
|
|
| emblinux |
Geschrieben am 11. Februar 2010 16:27:16
|
Posts: 3662
Registriert seit: 04.10.08
MeisterNächstes Level: 3684/5000
Scores: gesperrt
|
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 !
|
| |
|
|
|
|
| Jeff |
Geschrieben am 11. Februar 2010 16:35:38
|
Anfänger
Posts: 48
Registriert seit: 03.04.09
LehrlingNächstes Level: 48/50
Scores: gesperrt
Verwarnstatus:
|
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.
Danke nochmal |
| |
|
|
|
|
| emblinux |
Geschrieben am 11. Februar 2010 16:45:41
|
Posts: 3662
Registriert seit: 04.10.08
MeisterNächstes Level: 3684/5000
Scores: gesperrt
|
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 !
|
| |
|
|
|
|
| Jeff |
Geschrieben am 11. Februar 2010 17:33:12
|
Anfänger
Posts: 48
Registriert seit: 03.04.09
LehrlingNächstes Level: 48/50
Scores: gesperrt
Verwarnstatus:
|
Ja ist richtig, aber ich hab auch grad alles geändert |
| |
|
|
|
|
| Jeff |
Geschrieben am 16. Februar 2010 20:01:53
|
Anfänger
Posts: 48
Registriert seit: 03.04.09
LehrlingNächstes Level: 48/50
Scores: gesperrt
Verwarnstatus:
|
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 |
Geschrieben am 17. Februar 2010 22:55:16
|
Anfänger
Posts: 48
Registriert seit: 03.04.09
LehrlingNächstes Level: 48/50
Scores: gesperrt
Verwarnstatus:
|
Kann mir jemand helfen bei meiner Frage ? |
| |
|
|
|
|
| Jeff |
Geschrieben am 22. Februar 2010 19:07:40
|
Anfänger
Posts: 48
Registriert seit: 03.04.09
LehrlingNächstes Level: 48/50
Scores: gesperrt
Verwarnstatus:
|
Wenn keiner mehr eine Antwort hat dann kann dies geschlossen werden...
Danke für alle Antworten. |
| |
|
|
|
|
| emblinux |
Geschrieben am 22. Februar 2010 19:39:30
|
Posts: 3662
Registriert seit: 04.10.08
MeisterNächstes Level: 3684/5000
Scores: gesperrt
|
schau dir doch einfach mal folgendes DropDown-Menü an, eventuell hilft dir das etwas weiter.
http://www.phpfus...amp;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 !
|
| |
|
|
|
|
| Jeff |
Geschrieben am 23. Februar 2010 12:15:09
|
Anfänger
Posts: 48
Registriert seit: 03.04.09
LehrlingNächstes Level: 48/50
Scores: gesperrt
Verwarnstatus:
|
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
Editiert von Jeff am 23. Februar 2010 12:42:43 |
| |
|
