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.

Landschaft
Architektur
Motive

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>

Eine MouseHover Rollover Grafik im Header

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

Fragen beantwortet & Tipps zum Webdesign