JavaScript-Beispiele zum Thema Bilder

Mit JavaScript lassen sich Bilder auf die verschiedensten Arten behandeln. Ob als Hover-Effekt (Bildertausch) oder Diashow - nichts ist unmöglich.

Bildertausch (Hover-Effekt)

Oft gesehen und gern verwendet wird der Bildertausch. Das Prinzip ist folgendes: Be-wegt der User seinen Mauscursor über ein Bild, erscheint ein anderes - klickt er darauf erscheint ein drittes. Der Effekt wird häufig als Simulation eines Buttons verwendet. Dazu nötig sind 2 bzw. 3 unterschiedliche Grafiken pro Bildertausch, wie z.B. diese:

Darstellung: Orginalbild

Darstellung: Bild, das beim Überfahren mit der Maus angezeigt wird

Darstellung: Bild, das beim Klicken angezeigt wird

Für einen einfachen Bildertausch werden nur die ersten beiden benötigt. Setzen wir voraus, die Bilder tragen den Namen bild_a.jpg und bild_b.jpg, so könnte ein einfacher Bildertausch wie folgt realisiert werden:

Die Funktion doHover erwartet zwei Parameter: Den Bildnamen und das Ende des Dateinamens. Vorausgesetzt die Bilder heißen also bild_a.jpg und bild_b.jpg, dann wird bei onmouseover (Überfahren mit der Maus) das ursprüngliche Bild durch das mit dem Ende b.jpg ersetzt. Andersherum wird bei onmouseout (Cursor verläßt das Bild) wieder das Orginalbild mit a.jpg am Ende angezeigt.
Bitte beachten Sie:

Die Ereignisse onmouseover und onmouseout funktionieren bei Netscapes 4er und älteren Browsern nur bei Links, nicht bei Bildern.
Enthält eine Seite mehrere Bilder, die einen Hover-Effekt erhalten sollen, muss je-des Bild einen anderen Namen tragen (name-Attribut). Passen Sie dann die Parame-ter der doHover-Funktion an und übergeben Sie den geänderten Bildnamen.

Soll sich das Bild auch ändern, wenn auf den Button geklickt wird, braucht das Beispiel lediglich etwas erweitert werden:

Bei onmouseout und onmouseup (Loslassen der Maustaste) wird das Orginalbild (a) wieder hergestellt. Bei onmousedown (Drücken einer Maustaste) wird ein gedrückter (c) Button angezeigt. Bei mehreren Bilder könnte das entsprechend so aussehen:

<a href="#" onmouseover="doHover('bild1','b')"
            onmouseout="doHover('bild1','a')"
            onmousedown="doHover('bild1','c')"
            onmouseup="doHover('bild1','a')">
  <img border="0" name="bild1" src="bild1_a.jpg">
</a>
<a href="#" onmouseover="doHover('bild2','b')"
            onmouseout="doHover('bild2','a')"
            onmousedown="doHover('bild2','c')"
            onmouseup="doHover('bild2','a')">
  <img border="0" name="bild2" src="bild2_a.jpg">
</a>
<a href="#" onmouseover="doHover('bild3','b')"
            onmouseout="doHover('bild3','a')"
            onmousedown="doHover('bild3','c')"
            onmouseup="doHover('bild3','a')">
  <img border="0" name="bild3" src="bild3_a.jpg">
</a>
...

Grafiken vorladen

Besonders wichtig z.B. bei JavaScript -Spielen oder größeren Präsentationen ist, dass bestimmte Grafiken schon vorgeladen werden, damit sie gleich griffbereit sind wenn sie gebraucht werden. Mit einigen Kniffen kann JavaScript diese Aufgabe für Sie übernehmen. Das folgende Skript definiert ein Objekt Preloader mit den Methoden AddImage und LoadImages und den Ereignissen onImagesLoaded und onPercents:

/*Image Preloader*/
var Preloader = new CreatePreloader();

function CreatePreloader()
{
//Frequenz der Bildpruefung
this.Frequenz = 100;

this.onImagesLoaded = OnImagesLoaded_Dummy;
this.onPercents = OnPercents_Dummy;

this.pics = new Array(); this.imgs = new Array();
this.imgs.length = this.pics.length;
for(i=0;i<this.imgs.length;i++){this.imgs[i] = new Image();}
this.checkState = false;

this.AddImage = Preloader_AddImage;
this.LoadImage = Preloader_LoadImage;
this.LoadImages = Preloader_LoadImages;
this.GetPercents = Preloader_GetPercents;
this.CheckIMGStates = Preloader_CheckIMGStates;
}

function Preloader_AddImage(s)
{ this.pics[this.pics.length] = s; return(this.pics.length-1); }

function Preloader_LoadImages()
{ for(i=0;i<this.pics.length;i++){ this.LoadImage(i); } }

function Preloader_LoadImage(i)
{
img = new Image(); this.imgs[i] = img; img.src = this.pics[i];
if(this.checkState == false)
{
window.setTimeout('Preloader.CheckIMGStates()',this.Frequenz);
this.checkState = true;
}
return(img);
}

function Preloader_GetPercents()
{
var percents,res = 0;
for(i=0;i<this.imgs.length;i++)
{ if(this.imgs[i].complete == true){ res++; } }
percents = Math.round((res/this.imgs.length)*100);
return(percents)
}

function Preloader_CheckIMGStates()
{
var res = true;
for(i=0;i<this.imgs.length;i++)
{ if(this.imgs[i].complete == false){ res = false; } }
if(typeof(this.onPercents) == 'function')
{this.onPercents(this.GetPercents())}
if(res == true && typeof(this.onImagesLoaded) == 'function')
{ this.onImagesLoaded(); }
else
{window.setTimeout('Preloader.CheckIMGStates()',this.Frequenz)}
}

function OnImagesLoaded_Dummy(){ alert('Alle Bilder geladen!'); }
function OnPercents_Dummy(i){ alert(i+'% der Bilder geladen'); }

Erklärung: Das obige Skript definiert, wie beschrieben ein Objekt Preloader. Mit der Methode AddImage, der Sie die URL des zu ladenden Bildes übergeben, wird ein Bild in die Ladeliste hinzugefügt. Als erstes sollten also alle Bilder hinzugefügt werden. Als nächstes sollten zwei Event-Handler geschaffen werden, die die Ereignisse behandeln. OnImagesLoaded tritt ein, wenn alle Bilder der Liste komplett geladen wurden. onPercents wird automatisch innerhalb eines bestimmten, mit Frequenz definierten, Intervalls aufgerufen. Das Ereignis übergibt eine Zahl an den Event-Handler, der angibt, wieviel Prozent der Bilder geladen sind. Als letztes sollte die Methode LoadImages aufgerufen werden. Sie startet das Vorladen der Bilder. Im folgenden Beispiel sehen Sie, wie das Skript eingebunden werden kann. Wie es hier der Fall ist, sollten auch Sie das komplette Skript in einer externen Datei unter bringen (hier preloader.js):

<html><head><title>Preloader</title>
<script language="JavaScript" src="preloader.js"></script>
<script language="JavaScript">

</script>
</head><body > ... </body></html>

Hier wird das Skript in Verbindung mit dem zuvor beschriebenen Beispiel der Hover-Effekte verwendet. Das Skript lädt alle Bilder vor, die für den Hover-Effekt nötig sind, sodass sie gleich zur Verfügung stehen.

Bannerwechsel und Diashow

Wenn Sie auf Ihrer Seite Werbebanner einblenden, dann sollen diese zumeist möglichst in einer bestimmten Abfolge angezeigt werden. Außerdem gehört jeder Banner zu einer anderen Seite, sodass beim Klick auf einen Banner auch die entsprechende Seite angezeigt werden sollte. Eine Diashow funktioniert nach dem gleichen Prinzip: Nach einer bestimmten Zeit wird ein neues Bild angezeigt. Das folgende Skript löst beide Probleme: Es definiert ein Objekt Banner mit den Methoden Add und Start und den Eigenschaften img und Frequenz welches einen Bannerwechsel bzw. eine Diashow ermöglicht:

Banner = new CreateBanner()

function CreateBanner()
{
this.Frequenz = 5000;

this.img = ''; this.i = 0;
this.Imgs = new Array(); this.Links = new Array();

this.Add = Banner_Add;
this.Next = Banner_Next;
this.Start = Banner_Start;
this.onclick = Banner_onclick;
this.initi = Banner_initi;
}

function Banner_Add(s,l)
{ this.Imgs[this.Imgs.length] = s;
this.Links[this.Links.length] = l; }

function Banner_Next()
{
this.i++; if(this.i >= this.Imgs.length){this.i = 0}
document[this.img].src = this.Imgs[this.i];
window.setTimeout('Banner.Next()',this.Frequenz);
}

function Banner_Start(){ this.initi(); this.Next(); }
function Banner_initi()
{ document[this.img].onclick = Banner.onclick; }
function Banner_onclick()
{ window.open(Banner.Links[Banner.i],''); }

Erklärung: Das Skript erstellt, wie bereits gesagt, ein Objekt Banner, welches den Austausch der Grafiken und Links für uns erledigen soll. Das Objekt steht sofort bereit, sobald das Skript in die Seite eingebunden wurde. Der Methode Add übergeben wir die URL der Grafik, die angezeigt werden soll, sowie einen Link. Klickt der Besucher auf den Banner, wird der Link angezeigt, der zu dem entsprechenden Bild gehört. Außerdem muss die Eigenschaft img definiert werden. Sie beinhaltet den Namen des Bildes, auf dem die Grafiken angezeigt werden sollen. Das Bild muss dazu im HTML-Code vorliegen. Optional kann über die Frequenz-Eigenschaft eingestellt werden, nach wie vielen Millisekunden der Bilderwechsel erfolgen soll - Standard ist 5000. Das Skript könnte extern z.B. so verwendet werden:

<html><head><title>Bannertausch</title>
<script language="JavaScript" src="banner.js"></script>
<script language="JavaScript">

</script></head>
<body onload="Banner.Start()">
<a href="#" ><img src="" name="BannerBild" border="0"></a>
</body></html>

Der Bildname (Bannerbild) wird hier der Eigenschaft img zugewiesen - so wie es gedacht ist. Ist das Dokument geladen (onload), wird der Bannertausch gestartet. Der hier eingefügte Link um den Banner herum, dient lediglich optischen Zwecken, damit der Besucher sofort sieht, dass er auf den Banner klicken kann.

Folge dem Mauszeiger

Soll ein Bild dem Mauszeiger folgen, handelt es sich um DHTML. Wie allgemein bekannt, wird dazu ein Layer benötigt in dem das Bild steckt. Sobald sich die Maus bewegt, muss sich der Layer auf die Position der Maus einrichten. Dazu haben wir die Funktionen setzeX und setzeY erstellt. Nun braucht nur noch die Position der Maus ausgefragt werden und fertig ist der Spaß:

<html><head><title>Folge der Maus</title>
<script type="text/javascript" >

</script></head>
<body>
<div id="FolgeDerMaus"
      style="position:absolute; left:0px; top:0px;">
   <img src="js_0501a.jpg">
</div>
</body></html>

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Fenster und Frames

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project