:content
18.10.2003
Auf vielen Websites werden Bilder, wenn man den Cursor darüberbewegt, durch andere Bilder
ersetzt. Dieser Effekt wird vor allem bei Navigationsmenüs benutzt. Folgendes JavaScript
wird dazu im <HEAD>-Teil des Dokuments untergebracht. Im Beispiel wird davon ausgegangen,
dass das ursprüngliche Bild "menu_item.gif" benannt ist (abgelegt im Verzeichnis "images"), und das Bild,
das beim Überstreichen mit dem Cursor angezeigt werden soll, "menu_item_hover.gif" benannt ist.
Das erste Bild ("menu_item.gif") erhält den JavaScript-internen Objektnamen "a1", das Attribut "NAME" des
IMG-tags lautet "b1", das zweite Bild (das "Hover"-Bild "menu_item_hover.gif") erhält den Objektnamen "a2".
<script language="Javascript" type="text/javascript">
<!--
a1=new Image(180,18);
a1.src="./images/menu_item.gif";
a2=new Image(180,18);
a2.src="./images/menu_item_hover.gif";
function switch_image(imagename,objectsrc) {
if (document.images) document.images[imagename].src=eval(objectsrc+".src");
}
// -->
</script>
Im <BODY>-Teil des Dokuments muss sich folgender HTML-Teil befinden:
<A HREF="./unterseite.html" OnMouseOver="switch_image('b1','a2')"
OnMouseOut="switch_image('b1','a1')"><IMG SRC="./images/menu_item.gif"
NAME="b1" BORDER="0" WIDTH="180" HEIGHT="18">
Bei der Nutzung der Funktion müssen natürlich Angaben, wie Bildbezeichnungen, Bildeigenschaften, etc., angepasst werden.
Bitte beachten Sie: die JavaScript-Ereignisse (Events) "OnMouseOver" und "OnMouseOut" sind Events für den HTML-tag "A", nicht für den
HTML-tag "IMG". Dieser Effekt kann also nicht auf Bilder angewendet werden, wenn sie nicht mit einem Hyperlink unterlegt sind.
Wünsche, Anregungen und Beschwerden bitte im Gästebuch deponieren.
|
