Bilder mit Hover wechseln --> KNIFFLIG!

**ubbi** · 22.05.2011, 19:51

Hallo zusammen,

ich bin gerade dabei, eine Seite für eine (mir) bekannte Band zu erstellen.

Hier der Link: http://p4310.r2h-config.de/test/test.html

Wie ihr sehr, funktioniert der Effekt mit dem Mouse-Hover wunderbar.

Das Problem ist der "Riss", wenn der Mauszeiger sich über keinem der beiden Bilder befindet. Da es (wegen des "Riss") keine geraden, "senkrechten" Ränder gibt, werden Teile des Bildes falsch angezeigt.

Ich stoße hier leider absolut an meine Grenzen und weiß nicht, wie ich das Problem lösen soll.

Ich würde mich daher über Hilfe sehr freuen!

Mit freundlichem Gruß,

ubbi

**kalweit** · 22.05.2011, 20:30

Mach mal einen Screenshot und klingel die Stelle ein. Solltest du den Hovereffekt direkt am Riss wollen, müsstest du das Bild genau an diesem trennen, die jeweils nicht benötigten Hälften durch einen transparenten Bildteil ersetzen und diese Bilder dann auf der Seite überlappend anordnen. Um auch die Maus perfekt reagieren zu lassen, könnte man das Ganze per <area shape="poly"> realisieren.

**ubbi** · 22.05.2011, 22:44

Hallo,

danke für die schnelle Antwort. Das mit dem transparenten Bildteil klappt gut. Problem ist nur, dass der IE diese doch meines Wissens nach "grau" anzeigt statt transparent oder wurde das gefixt? --> habe keinen IE!

Neue Seite:
http://p4310.r2h-config.de/test/test2.html

Bzgl. der Kante und dem Link, komme ich auch noch einmal auf dich/euch zu. Bin nur gerade noch dabei, das Bild vertikal zu zentrieren. Danke aber schon einmal für den Tipp!

Gruß,
ubbi

**ubbi** · 22.05.2011, 23:52

So, ich habe nun auch schon einmal die Koordinaten für die Poly-Map eingegeben.

Code:

<map name="Map" id="Map">
  <area shape="poly" coords="11,84,33,168,28,217,28,261,16,287,32,349,84,348,106,362,162,497,550,497,533,432,629,368,596,335,607,301,574,281,627,186,604,151,620,117,605,93,586,32,559,29,536,39,530,60,544,96,575,126,567,135,559,118,504,95,472,100,439,109,433,96,437,66,426,37,412,27,390,25,372,37,365,52,367,73,388,120,397,128,370,142,353,192,324,171,320,162,334,135,346,96,338,69,318,55,296,52,268,61,257,85,251,113,251,130,260,136,262,146,253,156,220,159,240,122,242,108,230,97,216,97,138,190,159,136,161,113,180,63,181,41,168,32,157,32,131,72,121,111,99,168,103,117,96,83,100,44,106,21,94,11,78,12,67,47,60,85,60,120,65,151,61,159,46,107,35,56,24,45" href="http://listn.to/CforCaroline" target="_parent" alt="link_facebook" />
  <area shape="poly" coords="132,71" href="" />

Fragen:
1) Aber wo genau im Code füge ich diese jetzt ein und wie verknüpfe ich die Koordinaten mit dem Hover-Effekt?
2) Wenn ich das Bild vertikal zentriere, wird es ja je nach Auflösung immer an einer anderen Stelle des Bildschirms sein. "Wandern" die Koordinaten dann automatisch mit oder ist das ein Problem?

Sorry für den Doppelpost, aber ich konnte leider nicht mehr editieren.

Gruß,
ubbi

**kalweit** · 23.05.2011, 09:24

Zitat von ubbi

Das mit dem transparenten Bildteil klappt gut. Problem ist nur, dass der IE diese doch meines Wissens nach "grau" anzeigt statt transparent oder wurde das gefixt?

Das Problem gibt es bei .png bis IE6. Dafür gäbe es Würgarounds, die man in die eigene Seite einbinden kann und die den alten IEs die Transparenz beibringen -> z.B. http://www.twinhelix.com/css/iepngfix/ - alternativ könnte man auf's .gif-Format ausweichen.

**ubbi** · 23.05.2011, 09:34

Danke für den Tipp, ich glaube, ich weiche dann einfach auf GIF aus.

Ich habe im Inet etwas von Poly-Maps gelesen und das auch gleich mal ausprobiert. Leider habe ich nichit sonderlich viel Ahnung davon, weshalb das nicht so ganz klappt.

Ich würde mich freuen, wenn sich jemand den Code mal anguckt:
http://p4310.r2h-config.de/test/test2.html

Fragen:
1) Wo genau im Code füge ich die Koordinaten jetzt ein? Die Links funktionieren nicht richtig.
2) Das Bild ist vertikal zentriert. Nun wird das Bild ja je nach Auflösung immer an einer anderen Stelle des Bildschirms sein. "Wandern" die Koordinaten dann automatisch mit oder ist das ein Problem?
3) Ist es auch möglich, die Koordinaten mit dem Hover-Effekt zu verknüpfen, sodass dieser direkt am "Riss" wechselt? Momentan funktioniert das durch die überlappenden Bilder nicht so ganz.

Gruß,
ubbi