Gehe mit der Maus über den Ordner:

 
   

Das Script für die Bildaktionen steht in "HEAD" des HTML-Dokuments:

<HTML>

<HEAD>

<TITLE>JavaScript: Beispiel 2</TITLE>

<SCRIPT LANGUAGE="JavaScript">

var bildOn = new Image();// Erzeugung eines Bild-Objekts

bildOn.src = "bildOn.gif";// Angabe der Bilddatei

 

var bildOff = new Image();

bildOff.src = "bildOff.gif";

 

function img_act(imgName) {

var imgOn = eval(imgName + "On.src");

document[imgName].src = imgOn;

}

function img_inact(imgName) {

var imgOff = eval(imgName + "Off.src");

document[imgName].src= imgOff;

}

</SCRIPT>

</HEAD>

<BODY>

<A HREF="#" onmouseover="img_act('bild')" onmouseout="img_inact('bild')">
<IMG SRC="bildOff.gif" WIDTH=32 HEIGHT=32 BORDER=0 name="bild">
</A>

</BODY>

</HTML>

Das Bild "bildOn.gif"

ändert sich zu "bildOff.gif"

wenn sich der Mauszeiger darüber befindet.

Der Event-Handler onmouseover im Anchor-Tag <A> ruft die Funktion img_act('bild') auf und der Handler onmouseout die Funktion img_inact('bild')

 

Gehe mit der Maus über den Ordner und beachte die Statuszeile:

 

<A HREF="#"

onmouseover="window.status='dieser Text erscheint'" onmouseout="window.status=''">

<IMG SRC="bildOff.gif" WIDTH=32 HEIGHT=32 BORDER=0 ALIGN=bottom>

</A>

 

 

Das Script dieses Formulars setzt den String s mit dem Namen (navigator.appName) und der Version (navigator.appVersion) des Browsers in das Textfeld ein und erzeugt ein Dialogfenster (alert(s)) mit diesem Text:

<FORM name="meinFormular">

<INPUT TYPE="text" NAME="meinFeld" VALUE="Ein Textfeld" SIZE=60>

<P><<INPUT TYPE="button" NAME="Knopf" VALUE="Click me !"

onClick='var s="Sie benutzen den Browser: " + navigator.appName + " " + navigator.appVersion;meinFormular.meinFeld.value=s; alert(s)'>

</FORM>

Kurze Scripts (z.B. für die beiden Knöpfe) können direkt in deren Event-Handlern untergebracht werden (siehe Beispiel 1).

Ein längeres Script (für die Laufschrift und die Bild-Aktionen) könnte im "HEAD" des HTML-Dokuments stehen:

<SCRIPT LANGUAGE="JavaScript" >hier steht das Script</SCRIPT>

oder es wird aus einem separaten Textfile mit der Endung ".js" aufgerufen:

<SCRIPT LANGUAGE="JavaScript" SRC="meinScript.js"></SCRIPT>

Script zeigen

Gehe mit der Maus über das Bild und beachte die Statuszeile:

Das Bild (SRC="../HTML/JavaTeamSmall.gif") kann mit unsichtbaren Kreisen oder Rechtecken belegt werden, die zu einem lokalen oder externen Link führen, zu denen bei Mausklick gesprungen wird. Zusätzlich wird mit den Event-Handlern (" onmouseover", " onmouseout") der Text der Statuszeile gesteuert. ("interaktive Client-Graphik").

<MAP NAME=map1>

<AREA SHAPE=rect COORDS="217,68,256,150" NOHREF onmouseover="window.status='Kim Polese'" onmouseout="window.status=''">

<AREA SHAPE=rect COORDS="260,70,297,154" NOHREF onmouseover='window.status="Kathy Walrath"' onmouseout="window.status=''">

<AREA SHAPE=rect COORDS="170,71,209,142" NOHREF onmouseover='window.status="James Gosling"' onmouseout="window.status=''">

<AREA SHAPE=rect COORDS="127,75,166,144" NOHREF onmouseover='window.status="Bob Weisblat"' onmouseout="window.status=''">

<AREA SHAPE=rect COORDS="59,81,107,150" NOHREF onmouseover='window.status="Sami Shaio"' onmouseout="window.status=''">

><AREA SHAPE=rect COORDS="10,83,54,149" NOHREF onmouseover='window.status="Lisa Friendly"' onmouseout="window.status=''">

<AREA SHAPE=rect COORDS="0,0,296,156" NOHREF onmouseover="window.status='Das Java Team'" onmouseout="window.status=''">

</MAP><IMG USEMAP="#map1" SRC="JavaTeamSmall.gif" WIDTH=298 HEIGHT=159 ALIGN=bottom>

 

Letzte Änderung: