Mouse Events zur Gestaltung von Links
Teil Eins: wechselnde Grafik und Sound
Teil Zwei: Linkziel verstecken
Teil Eins: wechselnde Grafik und Sound
Klicken sie auf den folgenden Link und dort nochmals auf die Grafik. Dann können sie sehen, was gemeint ist.
http://limonero.milten.lima-city.de/Progs-Tuts/Tutorials/Mouse-Events/test.htm
Im Listing sehen sie, wie das gemacht ist.
<html>
<head>
<script>
function doit(){
document.embedplayer2.play();
// do more here
}
function m_in(){
document.B1.src='star_y.gif';
document.embedplayer.play();
}
function m_out(){
document.B1.src='star_g.gif';
}
</script>
</head>
<body>
<img
src = "star_g.gif"
onMouseOver="m_in();"
onMouseOut="m_out();"
name = "B1"
onClick="doit();"
/>
<br />
<embed type="audio/wav"
autostart="false"
src="DING.WAV"
width="0"
height="0"
name="embedplayer" />
<embed type="audio/wav"
autostart="false"
src="CHORD.WAV"
width="0"
height="0"
name="embedplayer2" />
</body>
</html>
Erklärungen
Veränderung der Grafik:
Die Grafik wird ausgetauscht, in dem der src Eigenschaft des img Objektes ein neuer Wert, mit einer neuen Grafikadresse zugewiesen wird.
Abspielen der Sounds:
Auf die Multimedia Objekte wird jeweils die play() Methode angewandt.
Auslösen:
Die Mouse Events rufen die entsprechenden Event Handler auf
Lassen sie ihrer Fantasie freien Lauf, aber denken sie daran, das manche Spielerei viel Ressourcen der Besucher einer Website verbrauchen kann. Unter Umständen kann das auch Besucher vertreiben.
Teil Zwei: Linkziel verstecken
Klicken Sie hier, um zu sehen was gemeint ist:
http://limonero.milten.lima-city.de/Progs-Tuts/Tutorials/Mouse-Events/Statustest.htm
So wirds gemacht:
<a href="http://www.lima-city.de/"
onMouseOver="window.status='Irgend wo hin'; return true;"
onMouseOut="window.status='';"
onclick="return true;"
>
Irgend wo hin
</a>
Erklärung:
Der formatierte Code ist selbst erklärend bis auf
return true; . Das bewirkt, dass der Standard Event Handler nicht anschliessend aufgerufen wird und doch noch das Linkziel zeigt.
Viel Spass,
limonero
-------------------------------
http://www.jbergsmann.at/