molily: HTML file per include, java script Problem

Beitrag lesen

Hallo,

jetzt bin mit meinem Wissen am Ende, was meinst du mit:
»»vom Zugriff die Bildnummer auf eine andere Zugriffsart, bspw. die ID, umzustellen.

Machen wir es mal ganz anders, nämlich zeitgemäß:

<script>  
[code lang=javascript]function Bildwechsel (id, highlightSrc) {  
 var element = document.getElementById(id);  
 this.normalSrc = element.src;  
 this.highlightSrc = highlightSrc;  
 new Image(highlightSrc);  
 var instanz = this;  
 element.onmouseover = function () {  
  this.src = instanz.highlightSrc;  
 };  
 element.onmouseout = function () {  
  this.src = instanz.normalSrc;  
 };  
}  
  
function init () {  
 new Bildwechsel("bild1", "h1.png")  
 new Bildwechsel("bild2", "h2.png");  
}  
window.onload = init;

</script>

<p><img src="normal.png" id="bild1">
<p><img src="normal.png" id="bild2">[/code]

Im HTML notieren wir nur zwei Bilder mit IDs.

Dann werden beim Laden der Seite zwei Bildwechsel-Objekte erzeugt, das heißt, die Konstruktor-Funktion wird zweimal aufgerufen.

Ihr wird die ID sowie das Highlight-Bild übergeben. Das ist alles, was man machen muss, den Rest erledigt das Script selbst.

Wenn man weitere Bilder hinzufügen will, einfach an der Stelle weitere Zeilen nach dem Schema
new Bildwechsel("ID", "Highlight-Bild-URL");
hinzufügen.

Was macht die Bildwechsel-Funktion nun? Es erzeugt wie gesagt ein eigenes Objekt, an dem es die zum jeweiligen Bildwechsel zugehörigen Daten speichert.

Erst einmal spricht sie das Bild über die ID an (getElementById). Eine Referenz auf das img-Element wird in der Variable element gespeichert.

var element = document.getElementById(id);

So wird erstmal die URL des Ausgangsbildes ausgelesen und beim Objekt gespeichert, damit man das Bild später wieder zurücksetzen kann:

this.normalSrc = element.src;

Der übergebene Parameter wird auch am Objekt gespeichert:

this.highlightSrc = highlightSrc;

Jetzt wird das Highlight-Bild im Hintergrund vorgeladen, sodass es im Browser-Cache liegt:

new Image(highlightSrc);

Jetzt folgt nur noch das Event-Handling. Beim Mouseover und Mouseout sollen die Bilder gewechselt werden. Also werden dem Element zwei Handlerfunktionen für onmouseover und onmouseout verpasst:

 var instanz = this;  
 element.onmouseover = function () {  
  this.src = instanz.highlightSrc;  
 };  
 element.onmouseout = function () {  
  this.src = instanz.normalSrc;  
 };

Darin wird über this auf das Element zugegriffen und über instanz auf das Bildwechsel-Objekt. Damit das möglich ist, wurde vorher die Variable instanz angelegt, die auch in den Handlerfunktionen verfügbar ist.

Das ist eigentlich alles.

Vorteile: HTML und JavaScript sind getrennt, man muss nicht mit irgendwelchen Attributen herumfummeln. Und der JavaScript-Code, den man anpassen muss, ist viel kürzer und übersichtlicher.

Mathias