bild durch mouseover über link verändern

[mnasdaq]

ich habe folgendes problem: auf meiner page sind aus design-gründen text und bilder (auf einer seite) voneinander getrennt. jetzt besteht natürlich kein direkter bezug mehr, man muss ihn also wieder herstellen; dabei dachte ich mir das man durch das überfahren eines links (mouseover) das dazugehörige bild "verändert", also z.b. invertiert oder anders wie.
ich würde es am liebsten so lösen, dass ich nicht noch ein zweites bild hoch laden muss, sondern dass das entsprechende bild durch bestimmte css-formatierungen verändert wird.

ich hoffe, dass hilft fürs erste.

gruß

mnasdaq

[Felix Kaiser]

Bilder via CSS verändern funktioniert leider nur mit Microsoft spezifischem CSS Syntax, also nur im Internet Explorer. Daher rate ich davon ab und würde es doch über ein zweites Bild lösen. Ansonsten kannst du problemlos in OnMouseOver und OnMouseOut die CSS Eigenschaften ändern und zwar in dem du Bezug zu dem jeweiligen Bild nimmst über das vordefinierte Objekt 'this'. Versuchs mal!

[mnasdaq]

danke; leider bin ich anfänger in sachen javascript --> kannst du das mal erläutern?

[Felix Kaiser]

<img src="MeinBild.png" onMouseOver="this.style.filter = '';" onMouseOut="this.style.filter = 'Gray()';" style="filter:Gray()">

Wäre zum Beispiel ein Filter, bei dem das Bild normal grau ist und nur farbig erscheint, wenn der Mauszeiger es überfährt. Insert() anstatt Gray() würde einen Invertierungseffekt bewirken, sieht aber meist scheiße aus. :)

[mnasdaq]

okidoki, und wie stelle ich die verbindung zum link her?
schließlich soll durch überfahren des links da bild verändert werden, nicht erst durch überfahren des bildes an sich!

[Felix Kaiser]

Geb jedem <img> Tag ein name="" Attribut und setz in die Anführungszeichen einen beliebigen Namen für das Bild ein. Dann packst du die beiden Mausevents in dein Link Tag rein und sprichst die Links anstatt über this über document.BildName.style... an, wobei BildName die ID bezeichnet die im Name Attribut steht.