Bildover und Preloader
Es gibt hier 4 unterschiedliche Scripts um einen onmouseover (Rollover) Bildwechsel zu erzielen. Allen gemeinsam ist, dass jedes Bild einen eigenen Namen haben muss, durch welchen es via Javascript angesprochen werden kann. Und, jedes Bild, welches für einen Effekt genutzt werden soll, muss vorgeladen werden.
omo im a-Tag
Ohne Funktion im head:
Für jedes Bild mit Rollover auf der selben Seite, muss ein neuer 'name' her, auch wenn Alles gleich sein soll, verdoppeln geht nicht ohne neuen Namen. Also scull wird zu kopf: Im a-Tag, einmal beim onmouseover und einmal beim onmouseout, und dann nocheinmal im img-Tag !
<a href= "js_test_danke.htm" onmouseover= "document.scull.src= 'images/skull_neg.jpg';"
onmouseout= "document.scull.src= 'images/skull.jpg';"><img src= "images/skull.jpg"
name="scull" width="86" height="74" alt="Bildlink" title="Bildlink zur Testzwecken" border="0" /></a>
<a href= "js_test_danke.htm" onmouseover= "document.kopf.src= 'images/skull_neg.jpg';"
onmouseout= "document.kopf.src= 'images/skull.jpg';"><img src= "images/skull.jpg"
name="kopf" width="86" height="74" alt="Bildlink" title="Bildlink zur Testzwecken" border="0" /></a>
Alte Browser wurden früher getestet, ob sie das Objekt images kennen, bevor das Bild aufgerufen wurde:
if (document.images) {...}
Preload simple
new Image()
Damit das Overbild bereit liegt, und somit bei seinem Aufruf ohne Verzögerung erscheint, muss es in den Browser-Cache vorgeladen werden. Ein Preload stellt das Bild noch nicht dar.
Das onmouseover Preloadscript sollte in den head, das verzögert zwar das Laden der Seite, aber die Seite, und damit die Buttons, wird erst dargestellt, wenn der Bildover funktionieren kann.
Anders bei einer Diashow: Das Preloadscript kommt an das Seitenende, vor das Body-Endtag. Wärend das erste Bild der Show schon gezeigt wird, können die weiteren in Ruhe vorgeladen werden.
Auch wenn auf der nächsten Seite grosse Bilder gebraucht werden, ist ein Preload angebracht; dieser kommt dann natürlich auch an das Seitenende.
Beim obigen omo-Effekt wurde absichtlich der unten dargestellte Preload weggelassen, um die Ladeverzögerung zu demonstrieren; durch einen Reload der Seite, lässt sie sich erneut beobachten.
So muss jedes Over-Bild einzeln vorgeladen werden - das ergibt unter Umständen eine ganz schön lange Liste.
<script type="text/javascript"> // Dies ist der Preloader für das OverBild skull - und da es das gleiche Bild ist, braucht es keinen Preloader für kopf var skully = new Image(); skully.src="images/skull_neg.jpg"; // Bild in Cache laden, ohne es vorerst darzustellen </script>
Preload mit HTML und CSS
Der Cache speichert und vergleicht die Adresse der aufgerufenen Bilder und lädt jedes Bild nur einmal. Eine Möglichkeit Bilder ganz ohne Javascript vorzuladen,
ist darum auch das Einbinden der Bilder per HTML und CSS mit einer Grösse von 0x0 Pixel am Seitenende. Das volle Bild wird vorgeladen, denn die Massangaben betreffen nur die Darstellung:
<img src= "images/skull_neg.jpg" style="width:0px; height:0px; display:none;" />
Oder sogar mit einer Klasse:
<style type="text/css">
.verstecktesBild {
width:0px;
height:0px;
display:none;
}
</style>
Am Seitenende:
<img class="verstecktesBild" src="meinbildover.jpg" />
Preload Array und Funktion
Bei etwas mehr Bildern, kann ein Array und eine Funktion helfen:
<script type="text/JavaScript">
var Bilder = new Array();
Bilder[0] = "images/onkel.jpg";
Bilder[1] = "images/tante.jpg";
Bilder[2] = "images/grosi.jpg";
// etc.
// alternative Schreibweise um den Array zu laden:
// Bilder = new Array("images/onkel.jpg", ... "../images/papi.jpg");
function BilderVorladen() {
for (i=0; i < Bilder.length; i++) { // solange, bis die Anzahl Bilder im Array erreicht wurde
var VozuladendesBild = new Image();
VozuladendesBild.src = Bilder[i];
}
}
</script>
Im Body-Start-Tag wird nun die Funktion aufgerufen:
<body onload="BilderVorladen()">
omo Funktion
Je Bild eine Funktion:
Bild 1 mit Over
---------
Bild 2 mit Over
Zusätzlicher Textlink zum wechseln des Bildes 2
---------
Bild 3 wechselt nur via Textlink
Textlink zum wechseln des Bildes 3
---------
Javascript im head:
<script type="text/javascript">
/* Preload */
var imageOK = new Image();
imageOK.src = "images/butn_ok.gif";
/*
You must always add as many functions as you have changing pictures.
You must have different name= for each of your images.
You must use "document.image_name.src = picture".
*/
function change1(picture) {
document.theimg1.src = picture
}
function change2(picture) {
document.theimg2.src = picture
}
function change3(picture) {
document.theimg3.src = picture
}
</script>
HTML und Eventhandler im body:
<a href="test_danke.htm" onmouseover="change1('images/butn_ok.gif')" onmouseout="change1('images/butn_1.gif')">
<img src="images/butn_1.gif" name="theimg1" border=0 width="15" height="15" /></a> Bild 1 mit Over
<a href="test_danke.htm" onmouseover="change2('images/butn_ok.gif')" onmouseout="change2('images/butn_2.gif')">
<img src="images/butn_2.gif" name="theimg2" border=0 width="15" height="15" /></a> Bild 2 mit Over
<a href="js_test_danke.htm" onmouseover="change2('images/butn_ok.gif')" onmouseout="change2('images/butn_2.gif')">
Zusätzlicher Textlink zum wechseln des Bildes 2</a>
<img src="images/butn_3.gif" width="15" height="15" name="theimg3" border="0" /> Bild 3 wechselt nur via Textlink
<a href="js_test_danke.htm" onmouseover="change3('images/butn_ok.gif')" onmouseout="change3('images/butn_3.gif')">
Textlink zum wechseln des Bildes 3</a>
Weitere Preloader am Seitenende und auf der Seite Diashow.
omo Elegante Funktion
Eine Funktion für beliebig viele Bilder:
'button'
Alle diese Event-Handler-Befehle können auch im ImgOpenTag stehen:
'putton'
Als Zückerli gibt es hier auch noch einen onmousedown-Event.
Beim 'button' sind die Events im <a>Tag,
beim 'putton' sind die Events im <img>Tag. Beides mit selbem Erfolg.
Javascript im head:
<script type="text/JavaScript">
/* Das ist der Bilder preload, image1 wäre images/butn_read.gif und wird nicht vorgeladen */
var image2 = new Image(); image2.src = "images/butn_write.gif";
var image3 = new Image(); image3.src = "images/butn_ok.gif";
// Dieses Script gefaellt mir sehr gut, es ist elegant!
// Dies ist die Funktion Exchange Pictures
function exch_pic(img_name,img_src) {
document[img_name].src=img_src;
}
</script>
HTML und Eventhandler im body:
<a href="test_danke.htm"
onmouseout="exch_pic('button','images/butn_read.gif')"
onmouseover="exch_pic('button','images/butn_write.gif')"
onmousedown="exch_pic('button','images/butn_ok.gif')">
<img name="button" src="images/butn_read.gif" alt="Image" width="15" height="15" border="0" />
</a>
<a href="test_danke.htm">
<img name="putton" src="images/butn_read.gif" alt="Image" width="15" height="15" border="0"
onmouseout="exch_pic('putton','images/butn_read.gif')"
onmouseover="exch_pic('putton','images/butn_write.gif')"
onmousedown="exch_pic('putton','images/butn_ok.gif')" />
</a>
omo Raffinierte Funktion
Diesem raffinierten Script wird beim Aufruf der Bildnahme und eine Statusnummer mitgegeben. Die Funktion löscht von der Bildadresse des übergebenen Bildes die hintersten 5 Zeichen,
nämlich die Dateiendung jpg, den . (Punkt) und die norm-Statusnummer. Dann fügt sie die übergebene over-Statusnummer, den Punkt und jpg wieder an.
Die Funktion könnte man weiter ausbauen, so dass sie auch eine andere Dateiendung (z.B. gif) entgegennehmen und verarbeiten kann.
Da die Bilder ja sowieso bearbeitet werden müssen, wird das Bennen keinen zusätzlichen Aufwand verursachen.
Es wäre auch möglich statt der Zahlen 'norm' und 'over' zu benutzen und statt 5 Zeichen, 8 Zeichen zu löschen.
Der Preload darf dennoch nicht vergessen werden!
Javascript im head:
<script type="text/javascript">
function omo(bild,status) {
f = document[bild].src;
f = f.substr(0,f.length-5);
f+=status+'.jpg';
document[bild].src = f;
}
</script>
HTML und Eventhandler im body:
<a href="#" onmouseover="omo('bild1','3')" onmouseout="omo('bild1','2')">
<img src="images/face_2.jpg" width="120" height="120" alt="Bild" name="bild1" border="0" />
</a>
<a href="#" onmouseover="omo('bild2','4')" onmouseout="omo('bild2','1')">
<img src="images/face_1.jpg" width="120" height="120" alt="Bild" name="bild2" border="0" />
</a>
Raffinierter Preloader
Da ja die Adressen der norm-Bilder durch das Laden im HTML angegeben wurden und durch das images-Objekt bekannt sind (und damit auch die Dateinamen),
kann man auch einen automatischen Preloader erstellen, indem ganz wie im obigen Script 'Raffinierte Funktion', die Dateiendung ersetzt wird.
Voraussetzung: jedes Bild im Dokument 'irgendwas.jpg' muss ein Overbild 'irgendwas_over.jpg' haben.
<script type="text/javascript">
function preloader() {
for (i = 0; i < document.images.length; ++i) { // für jedes Bild im Dokument mache folgendes:
f = document.images[i].src; // der temporären Variable f wird die Bildadresse zugeordnet
f = f.substr(0,f.length-4); // davon werden die letzten 4 Zeichen (.jpg) gelöscht
f+= '_over.jpg'; // dazu wird der neue Endungs-String (_over.jpg) angehängt
var noname = new Image(); // neues Image Objekt erstellen bzw. überschreiben
/* ich dachte es wäre besser jeweils ein neues Image Objekt zu machen, etwa so: var noname[i] = new Image();
aber das produziert ein Fehler. Vielleicht, weil die Bilder nicht existieren? */
noname.src = f; // dem Image Objekt die neue Adresse zuordnen (der Preload)
document.write(noname.src +"<br />"); // neue Adresse zur Kontrolle ausgeben
}
}
preloader();
</script>
Check den Code.