Jan K.: zwei überlappende links, a:hover

SELF-Forum

zwei überlappende links, a:hover

Jan K.
+1 Informationen zu den Bewertungsregeln

Hallo zusammen,

ich möchte mir gerne zwei links bauen, die folgendermaßen verschachtelt angeordnet sind:

Wenn mit der maus über den orangen bereich

gefahren wird, soll dieses bild angezeigt werden.

Wenn mit der maus über den blauen bereich

gefahren wird, soll dieses bild angezeigt werden.

..
..
<style>
body {margin:0em}
div#orange          { position:absolute;background-image:url(images/link1.gif);height:90px;width:182px;}
div#orange a:hover   { position:absolute;background-image:url(images/link1hover.gif);height:90px;width:182px;}
div#blau          { position:absolute;background-image:url(images/link2.gif);height:112px;width:182px;}
div#blau a:hover   { position:absolute;background-image:url(images/link2hover.gif);height:112px;width:182px;}
</style>
..
..
<div id='orange'style='z-index:1;'><a href='seitex.html'><img src='images/transpa.gif'border='0'></a></div>
<div id='blau'style='z-index:0;'><a href='seitey.html'><br><br><br><br><img src='images/transpa.gif'border='0'></a></div>
..
..

Die eigentlichen Links werden durch Transparente gifs, für orange im oberen bereich und für blau durch <br> nach unten verschoben, eingefügt.

Soweit sogut. Der Firefox macht was ich von ihm will. Der Internetexplorer stürzt sofort ab und bittet mich zu Debuggen.

Gibt es dafür eine elegantere/bessere Lösung? (Konkretes beispiel wär nett). Oder kann ich irgendwie den Iexplorer vor dem Absturz retten und meine Lösung weiterbenutzen?

Gruß,

Jan

Beitrag melden
+1
Informationen zu den Bewertungsregeln

  1. zwei überlappende links, a:hover

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hello out there!

    ich möchte mir gerne zwei links bauen, die folgendermaßen verschachtelt angeordnet sind:

    Dazu brauchst du eine <http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm@title=verweis-sensitive Grafik (Image Map)>.

    Wenn mit der maus über den orangen bereich […]
    gefahren wird, soll dieses bild angezeigt werden.

    Die onmouseover- und onmouseout-Eventhandler lassen sich auch auf area-Elemente anwenden.

    Mit :hover dürfte es AFAIK nicht gehen. Ich sehe hier aber kein Problem im Einsatz von JavaScript; es ist ja nur ein Gimmick, die Seite ist auch ohne den Hover-Effekt benutzbar.

    See ya up the road,
    Gunnar

    --
    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln