Website selber erstellen - Tools, Widgets, Zubehör
Nachfolgend der Code des Javascripts für die Varianten 1 bis 3. die Funtionen mouseoverpic() und mouseoutpic() werden nur in der Variante 3 benötigt. Könnten also sonst entfernt werden. Hier der Code und darunter ein paar Erklärungen, soweit nötig.
<script type="text/javascript">
pictures = new Array(
"http://selber-machen-homepage.de/katzen/amor4wochen.jpg",
"http://selber-machen-homepage.de/katzen/andy4wochen.jpg",
"http://selber-machen-homepage.de/katzen/artur4wochen.jpg",
"http://selber-machen-homepage.de/katzen/aron4wochen.jpg",
"http://selber-machen-homepage.de/katzen/annabell4wochen.jpg",
"http://selber-machen-homepage.de/katzen/amor4wochen.jpg");
i = 0;
anz = 6;
bild = i + 1 + " von " +anz;
function loadpic(a) {
document.images['image'].src = pictures[a];
}
function mouseoverpic(pic) {
document.images[pic].style.width = 150 + "px";
}
function mouseoutpic(pic) {
document.images[pic].style.width = 60 + "px";
}
function imgback (){
if (i>0) { loadpic(--i); }
else { i = anz - 1; loadpic(i);
};
bild = i + 1 + " von " + anz;
document.getElementById('bildnummer').innerHTML = bild;
}
function imgvor (){
if (i<pictures.length-1) { loadpic(++i); }
else { i = 0; loadpic(i); };
bild = i +1 + " von " + anz;
document.getElementById('bildnummer').innerHTML = bild;
}
</script>
<style type="text/css">
.imgbox{ padding:5px; background:#000000; vertical-align:center; text-align:center;}
.imgbox:hover{background:#555;}
</style>
Ganz am Anfang wird ein array definiert (eine Liste), welche die URL's der Bilder enthält. Array zählen immer von 0 an, nicht von 1. Dann werden die Anfangswerte gesetzt und in der Variablen "bild" wird eine Zeichenkette gebildet, indem die Variablen und die Zeichenkette "von" mit Hilfe von "+" verkettet werden.
Diese Zeichenkette wird dann in den Funktionen auf die gleiche Weise angepasst und mit "document.getElementById('bildnummer').innerHTML = bild;" im HTML-Document geändert. Das geht praktisch mit allen Elementen so, man muss diese nur im HTML-Document mit id="Bezeichnung" oder name=""Bezeichnung" benennen. Und bei meinem Beispiel habe ich den Ausgabebereich mit "Bildnummer" benannt.
function loadpic(a) {
document.images['image'].src = pictures[a];
}
Die function loadpic wird von den anderen Funktionen aufgerufen und bekommt immer als Parameter die Nummer des Bildes im Array-"Pictures" übergeben. Der HTML-Code benennt ja den Ausgabebereich für das große Bild mit name="image" und gibt dem <img>-Tag mit src=XXXX die Bild-URL
<img name="image" width="auto" height="auto" align="center" valign="center" src="http://selber-machen-homepage.de/katzen/amor4wochen.jpg">
Also wird der function()-Code verständlich. Im document gibt es images, davon heißt eines "image" und die Eigenschaft src erhält jetzt den Wert sprich die URL die im Array pictures unter der Nummer von a gespeichert ist.
Das ist das Grundprinzip nachdem praktisch jede Eigenschaft eines Elementes auch nachträglich noch geändert werden kann.
function mouseoutpic(pic) {
document.images[pic].style.width = 60 + "px";
}
Genauso erfolgt es auch bei mouseoverpic. Aber da ich ja den Namen des Elementes angeben muss, kann ich hier nicht mit Zahlen arbeiten, sondern muss beim Aufruf in der HTML-Datei jeden einzelnen <img>-TAG benennen und den Namen des jeweiligen <img>-TAGS beim Aufruf übergeben.
<img id="pic5" src="http://selber-machen-homepage.de/katzen/annabell4wochen.jpg" width="60px" height="auto" onmouseover="mouseoverpic('pic5')" onmouseout="mouseoutpic('pic5')"
Der Bereich zwischen den <style>-Tags sind die Klassen welche die Formate für die Tabelle enthalten, und mit class="imagebox" zugewiesen weden. Das .imagebox.hover bewirkt den Farbwechsel, wenn man mit der Maus über das Bild geht.