mouseover und mouseout

[Felix Riesterer]

Lieber juppi,

wie schon erwähnt Du brauchst ein Script, welches alle Deine <img>-Elemente der Reihe nach prüft, um ihnen die passenden Eventhandler zu verpassen. Dazu bietet es sich an, dass Du dem jeweiligen <img>-Element irgendwie mit HTML-Mitteln die Hovergrafik zuordnest, oder aber Du erfindest eine Art Dateinamenskonvention.

Man könnte das sehr selten verwendete "longdescr"-Attribut missbrauchen(!), um die Hovergrafik zuzuordnen:

<img src="bild.jpg" longdescr="hovergrafik:bild_.jpg" alt="" />

Das würde aber sehr viel Extra-Code im HTML verursachen. Besser fände ich eine selbst festgelegte Konvention, dass jede Hovergrafik das Präfix "hover_" bekommt: <img src="bild.jpg" alt="" /> würde beim Hovern dann zu <img src="hover_bild.jpg" alt="" />.

So. Jetzt brauchst Du nur noch eine Schleife, die Dir alle <img>-Elemente findet (oder Du nimmst gleich document.images) und mit Deinen passenden Eventhandlern ausrüstet.

Dabei solltest Du aber bedenken, dass vielleicht nicht restlos alle <img>-Elemente Deiner Seite einen solchen Hover-Effekt bekommen sollten. Die auszuschließenden Elemente könnten eine passende Klasse zugewiesen bekommen, oder besser nicht die auszuschließenden, sondern die zu hovernden.

<img src="bild.jpg" alt="" class="has-hover-effect" />

In JavaScript kannst Du das so prüfen:

for (var i=0; i < document.images.length; i++) {  
    if (document.images[i].className  
        && document.images[i].className.match(/\bhas-hover-effect\b/)  
    ) {  
        document.images[i].mouseover = function () {  
            this.src = this.src.replace(/(\/)+$/ "hover_$1");  
        };  
        document.images[i].mouseout = function () {  
            this.src = this.src.replace(/hover_(\/)+$/ "$1");  
        };  
    }  
}

Selbstverständlich habe ich obigen Code nicht getestet, aber Du kannst es ja ausprobieren und aus meinen möglichen Fehlern lernen. ;-)

Liebe Grüße,

Felix Riesterer.