Hallo!
Vor einiger Zeit brauchte ich auch mal sowas für meine grafischen Links. Ich hab jedoch das Beispiel aus SelfHTML etwas abgespeckt. :-D
Bei den Tests hat es auf allen Browsern funktioniert (Opera, Netscape, IE und FireFox)
Der Link im HTML:
<a href="index.php" onmouseover="changePicture('Button1', 'graphics/pcsButtonStart2.jpg')"
onmouseout="changePicture('Button1', 'graphics/pcsButtonStart1.jpg')"
onmousedown="changePicture('Button1', 'graphics/pcsButtonStart3.jpg')"
onmouseup="changePicture('Button1', 'graphics/pcsButtonStart1.jpg')"><img class="menue1" src="graphics/pcsButtonStart1.jpg" name="Button1"></a>
Hier die JavaScript-Funktion:
function changePicture(bildName, grafik)
{
window.document.images[document.images[bildName].name].src=grafik;
}
Zur Erklärung.
Der Link ruft die index.php auf. Hier ist keine verzweigte Pfadangabe getätigt wurden, weil die Datei mit dem Link sich im gleichen Verzeichnis befindet wie die index. Also keine unnötigen Punkte und Schrägstriche in der Pfadangabe...
Wenn nun z.B. "onmouseover" aktiviert wird, weil ich mit der Maus über den Link fahre, dann wird an die Funktion "changePicture" der Bildname und der Grafiklink übergeben.
Der Bildname ist im <img> Tag unter name="Button1" festgelegt wurden. Das ist insofern gut weil die Bildnamen eindeutig vergeben werden. Somit funktioniert der Aufruf für dieses Bild immer, egal ob Du noch weitere Bilder hinzufügst oder nicht.
window.docment.images ruft nun das Bild explizit nach dem Namen auf und lädt das neue genau an die Stelle, wo zuvor das alte mit dem Bildnamen "Button1" war.
Versuch es mal damit.
Gruß, SPX_25.