HTML, CSS, PHP, MySQL

html-php.de

HTML & CSS Stylesheets Referenz JavaScript PHP MySQL Sonstiges Gästebuch Inhalt Impressum

[ OnMouseOver mit Text ] [ OnMouseOver mit Grafik ]

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.

  <html>
  <head>
   <title>Test</title>
   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  </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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
   <title>Test</title>
   <script type="text/javascript">
    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(0, bild3b)"
    onmouseout="Tauschen(0, bild3a)">
    <img src="button3a.gif" alt="Java-Script">
   </a><br>
  </body>
  </html>
Das ganze sieht so aus

Sechs Buttons
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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
   <title>Test</title>
   <meta http-equiv="Content-Script-Type" content="text/javascript">
   <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.

back top next