OnMouseOver und Text
Mit OnMouseOver können Sie die Anzeige von Elementen austauschen. Dabei wird mit OnMouseOver die Anzeige definiert,
wenn die Maus über den Anzeigebereich des Elementes ist, und mit OnMouseOut wird die Anzeige definiert, wenn die Maus
den Anzeigebereich wieder verlässt.
<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Test</title>
<meta charset="utf-8">
</head>
<body>
<h1 id="Test"
onmouseover="this.innerHTML = 'Prima, das Sie hierher gefunden haben'"
onmouseout="this.innerHTML='Der Mausezeiger ist nicht hier'">
Der Mausezeiger ist nicht hier
</h1>
</body>
</html>
Das ganze sieht so aus
In diesem Beispiel habe ich eine Überschrift mit den Text Der Mauszeiger ist nicht hier definiert.
Fährt man nun mit der Maus über diese Überschrift, wird diese ausgetauscht in den Text Prima, das Sie hierher gefunden haben.
Verlässt man mit der Maus wieder diese diesen Bereich, wird wieder der Ursprüngliche Text hergestellt. Mit
this.innerHTML nehmen Sie Bezug auf das aktuelle Element, und können so den Text austauschen.
OnMouseOver und Bilder
Nicht nur mit Text ist ein Austausch der Anzeige möglich, sondern auch mit Bildern. Dazu muss man zwei Grafiken
anlegen. Die erste Grafik zeigt das Bild, wenn die Mause nicht über ein Element ist, und die zweite Grafik wird
angezeigt, wenn die Maus über den definierten Element fährt.
<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Test</title>
<meta charset="utf-8">
<script>
bild1a = new Image();
bild1a.src = "button1a.gif" ;
bild1b = new Image();
bild1b.src = "button1b.gif" ;
bild2a = new Image();
bild2a.src = "button2a.gif" ;
bild2b = new Image();
bild2b.src = "button2b.gif" ;
bild3a = new Image();
bild3a.src = "button3a.gif" ;
bild3b = new Image();
bild3b.src = "button3b.gif" ;
function Tauschen (Nummer, Objekt) {
window.document.images[Nummer].src = Objekt.src;
}
</script>
<style type="text/css">
body { background-color:navy }
a { color:#FFFFFF; font-family:Arial,sans-serif; }
img { border:none }
</style>
</head>
<body>
<a href="../index.htm"
onmouseover="Tauschen(0, bild1b)"
onmouseout="Tauschen(0, bild1a)">
<img src="button1a.gif" alt="Startseite">
</a><br>
<a href="../kurs10.htm"
onmouseover="Tauschen(1, bild2b)"
onmouseout="Tauschen(1, bild2a)">
<img src="button2a.gif" alt="CSS-Stylesheets">
</a><br>
<a href="../jkurs00.htm"
onmouseover="Tauschen(2, bild3b)"
onmouseout="Tauschen(2, bild3a)">
<img src="button3a.gif" alt="Java-Script">
</a><br>
</body>
</html>
Das ganze sieht so aus
Im oberen Beispiel wurden sechs Grafiken angelegt. Zunächst werden diese Grafiken im Head-Bereich mit
XXX = new Image(); xxx.scr = "bild.gif" ; einer Objektinstanz zugewiesen. Mit der Funktion
function Tauschen, die durch onmouseover und onmouseout aufgerufen wird,
wird die Grafik dann getauscht. Den gleichen Effekt erreichen Sie aber auch einfacher, mit den unteren Besispiel,
den ich unten aufgeführt habe.
<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Test</title>
<meta charset="utf-8">
<style type="text/css">
body { background-color:navy }
img { border:none }
</style>
</head>
<body>
<a href="../index.htm" onMouseOver="image1.src='button1b.gif';"
onMouseOut="image1.src='button1a.gif';" >
<img name="image1" src="button1a.gif" alt="HTML-Kurs">
</a><br>
<a href="../kurs11.htm" onMouseOver="image2.src='button2b.gif';"
onMouseOut="image2.src='button2a.gif';" >
<img name="image2" src="button2a.gif" alt="CSS-Stylesheets">
</a><br>
<a href="../jkurs00.htm" onMouseOver="image3.src='button3b.gif';"
onMouseOut="image3.src='button3a.gif';" >
<img name="image3" src="button3a.gif" alt="Java-script">
</a><br>
</body>
</html>
Das ganze sieht so aus
Zur Erklärung:
"datei.htm": Die Seite oder der Link, der bei Betätigung gestartet werden soll.
"./ordner/bild2.gif": Die Bild-Datei, die angezeigt wird, wenn die Maus über dem Bild ist.
"./ordner/bild1.gif": Die Bild-Datei, die angezeigt wird, wenn die Maus nicht über dem Bild ist.
"image1": Sollen mehrere Verweise dieser Art auf einer Seite sein, so hat der 2. Button image2,
der 3. Button müsste image3 heißen usw.
