Beispiele:
Überfahren Sie die drei Begriffe mit der Maus.
Beschreibung:
Beim Überfahren der drei Begriffe (Gif-Bilder) wird die Farbe der Schrift gewechselt.
Technisch gesehen handelt es sich um einen Bildwechsel. Voraussetzung sind zwei Bilder mit möglichst gleichen Abmessungen. Fährt man mit der Maus über ein Bild, wird das vorher schon geladene Bild an Stelle des ersten Bilds gezeigt. Dadurch kommt der Farbwechel in der Schrift zu Stande.
Bilder im Voraus laden:
(zwischen <head>...</head> platzieren)
<script language="JavaScript"><!--
if (document.images)
{
var Copyright_aktiv=new Image(); Copyright_aktiv.src="Copyright_akt.gif";
var Copyright=new Image(); Copyright.src="Copyright.gif";
var Buchtipp_aktiv=new Image(); Buchtipp_aktiv.src="Buchtipp_akt.gif";
var Buchtipp=new Image(); Buchtipp.src="Buchtipp.gif";
var Impressum_aktiv=new Image(); Impressum_aktiv.src="Impressum_akt.gif";
var Impressum=new Image(); Impressum.src="Impressum.gif";
}
// -->
</script> |
Bildwechsel:Bild Buchtipp:
<a href="http://www.webconsultant.de/Buchtipp01.html" onmouseover="javascript:document.Buch.src =Buchtipp_aktiv.src" onmouseout="javascript:document.Buch.src =Buchtipp.src" target="_blank"><img src="BUCHTIPP.gif" width="58" height="11" border="0" name="Buch" alt="Buchtipp"></a>
Bild Copyright:
<a href="http://www.webconsultant.de/Copyright.html" onmouseover="javascript:document.Copy.src =Copyright_aktiv.src" onmouseout="javascript:document.Copy.src =Copyright.src" target="_blank"><img src="COPYRIGHT.gif" width="67" height="8" border="0" name="Copy" alt="Copyright"></a>
Bild Impressum:
<a href="http://www.webconsultant.de/Impressum.html" onmouseover="javascript:document.Impress.src =Impressum_aktiv.src" onmouseout="javascript:document.Impress.src =Impressum.src" target="_blank"><img src="IMPRESSUM.gif" width="70" height="11" border="0" name="Impress" alt="Impressum"></a>
Hinweise:
name="Impress" - Bildnamen und Variablennamen des Vorab-Bilddownloads var Impressum=new Image(); düfen nicht identisch sein!
Bilder im Voraus laden:
var Copyright_aktiv=new Image();
Copyright_aktiv.src="Copyright_akt.gif";
var Copyright=new Image();
Copyright.src="Copyright.gif";
Copyright_aktiv enthält im Beispiel das Bild mit der hellen Schrift
Copyright enthält im Beispiel das Bild mit der dunklen Schrift
|