Rautenförmiges Rollover-Bild

[Sariel]

Hallo,

in einem kleinen projekt möchte ich mehrere rautenförmige rollover-bilder nebeneinander platzieren. mein problem ist, die "aktive fläche" (keine ahnung wie das offiziell heist) auf die man klickt ist nicht wie der sichtbare teil des bildes rautenförmig, sondern rechteckig. damit überlappt sie allerdings die "aktive fläche" des nächsten rollovers, da die rollovers in übereinanderliegenden divs exakt bündig nabeneinander gestapelt sind.
weis jemand, wie ich das problem lösen kann?
danke!

sariel

 

[Space Vampire]

Mit Image-Maps. Oder auch verweis-sensitive Grafiken.
http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm
Ist manuell nicht unbedingt ganz einfach, auf Anhieb.
Es gibt aber einige Tools dafür, wie dieses (ungetestet): http://www.image-maps.com/

 

[djheke]

Es könnte auch mit csse3 transform gehen.http://www.gipspferd.de/forumhilfe/raute-hover/

 

[Sariel]

@djheke danke, das kannte ich schon... zerrupft mir aber immer meine bilder.

@Space Vampire du bist der mann des tages. wenn du mir jetzt noch verrätst warum bei diesem code der onmouseover nicht funktioniert, bist du der mann des monats: ;)

<map name="headbtn" id="headbtn">
<area shape="poly" coords="0,135,87,135,182,0,94,0" href="#" onMouseOver="src='account_glow.png'" alt="" />
</map>

<img src="account_normal.png" width="182" height="135" border="0" alt="" title="" usemap="#headbtn" />

 

[Tronjer]

Wenn das Area-Tag sich stylen ließe, wäre das auch mit einem CSS Hover möglich.

Entweder wechselst du beim MouseOver die gesamte Image Map, oder erzeugst dymamisch einen Container, der sich vor den gewünschten Bildbereich legt und bei MouseLeave wieder gelöscht wird.

 

[Sariel]

Wenn das Area-Tag sich stylen ließe, wäre das auch mit einem CSS Hover möglich.

Entweder wechselst du beim MouseOver die gesamte Image Map, oder erzeugst dymamisch einen Container, der sich vor den gewünschten Bildbereich legt und bei MouseLeave wieder gelöscht wird.

was müsste ich tun um die map zu wechseln? bin ziemlich neu auf dem gebiet...

 

[djheke]

@djheke danke, das kannte ich schon... zerrupft mir aber immer meine bilder.

Und warum? Zeig doch mal deine Seite.

 

[Sempervivum]

warum bei diesem code der onmouseover nicht funktioniert

Weil das Bild in einem anderen Element liegt. So funktioniert es:

<map name="headbtn" id="headbtn">
<area shape="poly" coords="0,135,87,135,182,0,94,0" href="#" onMouseOver="document.getElementById('im').src='account_glow.png'" alt="" />
</map>

<img id="im" src="account_normal.png" width="182" height="135" border="0" alt="" title="" usemap="#headbtn" />

 

[djheke]

Naja, du musst entscheiden ob map oder li. Ich habes auch extra so erstellt.Sollen es Links werden oder nur Bilderspielereien.

 

[Sariel]

Weil das Bild in einem anderen Element liegt. So funktioniert es:

<map name="headbtn" id="headbtn">
<area shape="poly" coords="0,135,87,135,182,0,94,0" href="#" onMouseOver="document.getElementById('im').src='account_glow.png'" alt="" />
</map>

<img id="im" src="account_normal.png" width="182" height="135" border="0" alt="" title="" usemap="#headbtn" />

nur kennt er das gegenteil nich ... ich habs mit copy+paste und onmouseout probiert. muss wohl anders heißen oder?

 

[Sempervivum]

Doch, onmouseout ist richtig. So müsste es funktionieren:

onmouseout="document.getElementById('im').src='account_normal.png'"

Stimmt alles mit den Quotes? Poste doch mal deinen Code.

 

[Sariel]

Doch, onmouseout ist richtig. So müsste es funktionieren:

onmouseout="document.getElementById('im').src='account_normal.png'"

Stimmt alles mit den Quotes? Poste doch mal deinen Code.

gaaaaaaaaaaaaaaaaaaaaaaarrgh steinigt die kleinen miesen ' mit ihren bösen weltherrschafts absichten :)
danke!

 

[djheke]

Na, dann kann ich nur hoffen, dass es keine Navigation ist.
Hier nochmal eine zweite Variante als Anregung.
http://www.gipspferd.de/forumhilfe/raute-hover/

 

[Sariel]

kann mir jemand sagen, warum das eine image mit map das benachbarte image mit anderem onmouseover, aber selben mapkoordinaten in so fern beeinflusst, dass es beide maps zur seite versetzt werden und sich in ihren maßen verändern? die bilder befinden sich in ineinander geschachtelten divs mit unterschiedlicher z koordinate und haben die selben maße (daher auch die selben mapkoordinaten)

 

[Sempervivum]

Lade doch deine Seite mal hoch und poste die Adresse, damit man es sich ansehen kann.