✔ Grafiklinks bei Mouseover andere Grafik laden und dennoch einen hyperlink?

[chris2oo6]

Hi! Ich sehe öfters auf Homepages Links, die beim Mouseover ein
anderes Bild anzeigen und wenn man draufklickt kommt man dann
auf den entsprechenden Hyperlink.

soweit so gut, das bekomm ich alles hin,
nur den Hyperlink kann ich dann nicht mehr setzen,
da ich den Mouseover Effekt in der Hyperlink Adresse stehen habe!


Arbeite mit Frontpage (und die Navi erstelle ich mit photoshop)



Beispiel: http://www.sebastian-lapke.de (die kleine navi unten)

mit welchem Code kann ich das machen?
bsp: ich habe die grafik "bar.jpg" , beim mouseover soll es durch die grafik
"bar2.jpg" ausgetauscht werden und ich möchte dann halt den hyperlink
zu "bla.html" reinsetzen
reinsetzen

 

[Maik]

Ich verstehe jetzt nicht, wo hier das Problem mit dem Setzen eines Hyperlinks auf ein Dokument (bla.html) ist, denn im href-Attribut verweist Du doch auf das entsprechende Dokument:

<a href="files/ref_sl_print.pdf" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Hohe Qualität','','refmenu/rm2_02.gif',1)"><img src="refmenu/rm1_02.gif" name="Hohe Qualität" width="71" height="46" border="0"></a>

Aber anstelle eine Grafik in dem Link einzubetten und diese dann mit Javascript zu tauschen, könntest Du die einzelnen Grafiken auch als Hintergrundbild für die jeweiligen Links einsetzen und mittels der :hover-Pseudoklasse tauschen.

Das Grundprinzip sieht folgendermaßen aus:

a#navbutton_1:link, a#navbutton_1:visited {
display: block;
width: 71px; /* entspricht der Grafikbreite */
height: 46px; /* entspricht der Grafikhöhe */
background: url(bgImage_1.png);
}

a#navbutton_1:hover {
background: url(bgImage_2.png);
}

a span {
display: none;
}

<a href="bla.html" id="navbutton_1"><span>bla</span></a>