zwei überlappende links, a:hover

[Jan K.]

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