Experiment: Kohlkopf
+Übersicht
 +Tools & Links
 +HTML-Allgemein
 +Tabellen & Layer
 -JavaScript/DOM
 Browser-Unterschiede
 Variablenübergabe
 Weiterleitungen
 PopUp-Fenster
 Dateien auslesen
 <select>-Wert ermitteln
 Zugriff auf Fenster
 2 Aktionen im Formular
 <textarea>-Zeichenlimit
 statisch positionieren
 Bilderwechsel
 Image-Preload
 Zufallszahlen
 +CSS
 +Frames
 +Diverses


 
Valid CSS!
Valid HTML 4.01!
  
 
zum Provisorium

 > Übersicht der Fragen
   > JavaScript/DOM
     > Bilderwechsel
 
 
Bilderwechsel- Wie ersetze ich in meiner Webseite eine Grafik durch eine andere?
 

Um eine vorhandene Grafik durch eine andere zu ersetzen, muss man per Javascript das src - Attribut der ursprünglichen Grafik ändern. 


<img src="bild1.gif" onClick="this.src='bild2.gif';">

tauscht beim Klicken auf die Grafik bild1.gif selbige gegen die Grafik bild1.gif aus.

Will man dies auch für Netscape- Browser der 4er- Generation realisieren, ist es nötig, das Bild in einen Link einzubetten, da diese Browser im <img> - Element die meisten Eventhändler, wie z.B. onClick oder onMouseover nicht interpretieren. 


<a href="#"onMouseover="document.images.Bild.src='bild2.gif';return false;">
 <img name="Bild"src="bild1.gif" >
</a>

{#SPACEDie bisher beschriebene Methode hat allerdings den Nachteil, daß bei erfolgter Mausaktion die Bilder erst geladen werden müssen, was gerade bei größeren Grafikdateien eine Verzögerung des Bildaustausches mit sich bringt. Um dies zu vermeiden, muß man die verwendeten Grafiken vorab laden.

Zu diesem Zweck erzeugt man neue Image-Objekte:

Beispiel
Bild vorab laden:

Quelltext der Seite: 


<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
var bild1=new Image();bild1.src="irgendein.gif";
var bild2=new Image();bild2.src="nochein.gif";

function tausche_bild(obj)
{
document.images.wechselbild.src=obj.src;
}

//-->
</script>
</head>
<body>
<a href="#"onMouseover="tausche_bild(bild2);"onMouseout="tausche_bild(bild1);">
  <img name="wechselbild"src="irgendein.gif"alt=":P"border="0" >
</a>
</body>
</html>

Erläuterung:

In die Seite wurde eine Grafik irgendein.gif eingebunden. Beim Überfahren der Grafik soll diese gegen eine andere Grafik ausgetauscht werden.
Normalerweise müsste diese Grafik erst durch den Browser geladen werden. Im Skript der Seite wurde diese Grafik jedoch bereits geladen, indem ein Image-Objekt erzeugt wurde und diesem Objekt als src die URL der Grafik zugewiesen wurde, Dies veranlasst den Browser, eine Grafik zu laden, unabhängig davon, ob sie in der Seite eingebunden ist.

Will man viele Grafiken vorladen, erspart es eine Menge Schreibarbeit, wenn man diese Bilder in eine Schleife vorlädt. Dies geht besonders komfortabel, wenn man die Grafiken nach durchlaufenden Index benennt:

Beispiel #2
Kleine Bildergalerie mit in einer Schleife geladenen Grafiken

Quelltext der Seite: 


<html>
<head>
<title>Galerie</title>
</head>
<body>
<center>
<h1>Galerie</h1>
<script type="text/javascript">
<!--
bilder=new Array('');
bilderzahl=8;
reihen=2;
for(z=1;z<=bilderzahl;++z)
  {
  bilder[z]=new Image();bilder[z].src=z+'.jpg';
  document.write('<a href="javascript:zeige('+[z]+')"title="Klick=Gross">');
  document.write('<img src="mini'+z+'.jpg"border="0"></a>');
  if(z%(bilderzahl/reihen)==0)
  	{
  	document.write('<br>');
  	}
  }
document.write('<br><br><img src="1.jpg"name="original">');
function zeige(z)
{
document.original.src=bilder[z].src;
}
//-->
</script>
</center>
</body>
</html>

Erläuterung:

Die Seite enthält ausser dem Skrip erstmal fast garnichts.
Es wurden aber für die Galerie 16 Grafiken erstellt, 8 für die Vorschau und 8 für die Originalgrösse. Die Vorschaubilder haben durchlaufende Namen mit dem Prefix mini, also mini1.jpg bis mini8.jpg.
Die Originalgrafiken haben als Dateinamen lediglich die entsprechende Ziffer.

In einer Schleife von 1-8 wird nun der benötigte HTML-Code in das Dokument geschrieben. Das Vorladen der Originalgrafiken übernimmt dabei die Zeile 


bilder[z]=new Image();bilder[z].src=z+'.jpg';

...wodurch bei einem Klick auf die Vorschaugrafik das Originalbild sofort angezeigt werden kann, ohne durch den Browser erst geladen werden zu müssen.

Sollten die Grafiken nicht nach einem einheitlichen Schema benannt sein, ist es andererseits möglich, die Namen der Grafiken in einem Array[] zu vermerken und zum Vorladen dieser Grafiken den Array zu durchlaufen: 


bilder=new Array('bild1.gif','logo.png','banner3.jpg');
bildobjekte=new Array();
for(z=0;z<bilder.length;++z)
	{
	bildobjekte[z]=new Image();bildobjekte[z].src=bilder[z];
	}

  		 
   
beantwortet von
doktormolle 		 
 
zum proVisorium Impressum