 06 - Grafiktausch mit JavaScript
Ein dezenter Grafiktausch (bildwechsel) beim Überfahren des Textlinks mit dem Mauszeiger. Hier werden zwei Mini-Grafiken verwendet, die in der Farbgebung entweder dem Seitenlayout oder der Textlinkfarbe angepasst sein sollen.
Mouseover-Image vor dem Textlink wird duch ein Script getauscht
|
|
|
Dieses Beispiel zeigt eine dezente, wenig aufdringliche Weise dem Besucher bei MouseOver die aktuelle Position anzuzeigen.
Vor dem Textlink wird ein kleines Image angezeigt. Bei MouseOver wird das Image durch JavaScript gegen ein anderes ausgetauscht.
Benötigt werden mindestens 2 Images gleicher Größe:  
Natürlich können Sie auch ein drittes oder mehr Images einbinden um auf Besonderheiten aufmerksam zu machen (z.B. externer Link, Anzeige im PopUp usw.)
|
4 weitere Varianten zur Veranschaulichung können sie im Window ansehen
 Beispiel 01 
Beispiel 02
Beispiel 03
Beispiel 04
Die Funktion des Scripts - was geschieht hier?
1) Images (die beiden Punkte) vorladen / bekannt machen
<script language="JavaScript">
<!--
bild1=new Image // Image das nach MouseOut angezeigt wird
bild1.src="punkt-gn.gif"
bild2=new Image // Image das bei MouseOver angezeigt wird
bild2.src="punkt-rt.gif"
//-->
</script>
2) Jedes Image vor dem Textlink bekommt einen Namen:
<img name="Grafik01" src="punkt-gn.gif"> <a href="datei01.htm" ...
<img name="Grafik02" src="punkt-gn.gif"> <a href="datei02.htm" ...
<img name="Grafik03" src="punkt-gn.gif"> <a href="datei03.htm" ...
Für jedes Image, das vor einem Link steht, wird ein neuer Name vergeben!
Dieser Name kommt im Menü dann jeweils 3 mal vor:
Einmal im Image-Tag, zweimal im Link-Tag.
3) Im Link steht die JavaScript-Anweisung zum Tauschen der Grafiken bei MouseOver / MouseOut.
<a href="datei01.htm"
onMouseOver="document.Grafik01.src=bild2.src"
onMouseOut="document.Grafik01.src=bild1.src">
Verweistext
</a>
<a href="datei02.htm"
onMouseOver="document.Grafik02.src=bild2.src"
onMouseOut="document.Grafik02.src=bild1.src">
Verweistext
</a>
<a href="datei03.htm"
onMouseOver="document.Grafik03.src=bild2.src"
onMouseOut="document.Grafik03.src=bild1.src">
Verweistext
</a>
...
Grafiken:
Zur Anpassung an Ihre Seite stelle ich folgende Images zur Verfügung. Dei erste Serie der Images sind nach Namen gruppiert und einheitlich 10 x 10 Pixel groß.
 (weißes Image)
   
           (weißes Image)
 
 
Außerdem biete ich ihnen noch die 'Glaspunkte' aus eigener Werkstatt:
12 x 12 Pixel teranparent (rechtsklicken zum Download):
8 x 8 Pixel transparent (rechtsklicken zum Download):
|
WWW.WEB-TOOLBOX.NET
ZURÜCK