Besuchen Sie mich auf
meiner anderen Webseite

Die Adresse für Ihre Webpräsenz

Einfach, Individuell & Schnell - Die Adresse für Ihre Webpräsenz

zur meiner Webseite
Sitemap

Eine MouseHover Rollover Grafik im Header

Der Mauszeiger wird über einen Link geführt und ein Bildwechsel entsteht (Mouseover-Buttons).

Mit nur wenigen Zeilen JavaScript kann man, wenn der Mauszeiger über einen Link geführt wird, für den jeweiligen Link ein Bild anzeigen. Der Container für die Bilder kann auf der Webseite beliebig positioniert werden. Mit dem Skript können auch Bilder vergrößert werden, in dem man statt eines Text links ein Bild verlinkt und dann das Bild in der gewünschten Größe anzeigt. Den JavaScript vor der Stelle einbinden, an der die Image Datei angezeigt wird.


header


Der JavaScript:

<script language="JavaScript" type="text/javascript"> /*<![CDATA[*/< var bild1 = new Image(); // noch vor der HTML Anweisung var bild2 = new Image(); var bild3 = new Image(); var bild4 = new Image(); /* pfad und Bekanntmachung der Bilder */ bild1.src = "images/_MG_6830.jpg; bild2.src = "images/image066.jpg; bild3.src = "images/_MG_1915.jpg; /* in diesem Fall das Anfangsbild */ bild4.src = "images/logo.jpg; function Bildwechsel(HeaderGrafik)> { /* Das Bild was als erstes geladen wird */ eval("document['logo'].src = " + HeaderGrafik + ".src");  } /*]]>*/ </script>

Die Html Anweisung:

<div> <ul> <li><a href ="#nogo" onmouseover="Bildwechsel('bild1')" onmouseout="Bildwechsel('bild4')">Landschaft</a></li> <li><a href ="#nogo" onmouseover="Bildwechsel('bild2')" onmouseout="Bildwechsel('bild4')">Architektur</a></li> <li><a href ="#nogo" onmouseover="Bildwechsel('bild3')" onmouseout="Bildwechsel('bild4')">Motive</a></li> </ul>  </div> <div> <!--- Position der Bilder --> <img style="position: absolute; top: 0em; left:0em; margin: 0;" name="logo" src="images/logo.jpg" width="166" height="166" alt="header"/> </div>



Fragen beantwortet & Tipps zum Webdesign


Wichtig !!

Die Serversoftware Mowes Portable von der Firma CH Software hat die Geschäftstätigkeit zum 7. November 2012 eingestellt.
Ein gleichwertiges Programm ist: EasyPhp