Bild mit onmouseover

[Robbe]

Guten Morgen,

ich habe heute Nacht mit verschiedenen Anleitungen versucht bei der von mir vorgestellten Internetseite (http://www.salon-schweizer.de) bei den Teambildern einen Onmouseovereffekt einzubauen. Sprich die Bilder sind in schwarzweiss und bei Drüberfahren erscheint das Bild in Farbe. Irgendwie hat das nicht geklappt und beim letzten Versuch hat der Javascriptbefehl für dieses Absatzelement den Editor lahmgelegt, sodass ich das komplette Element löschen und komplett neu anlegen musste.

Hat jemand diesen Effekt schon im Einsatz bzw. kann mir einen Tipp geben?

[Stefan]

Kannst du dein bisheriges Code-Snippet mal posten?

[Robbe]

Werd ich später raus suchen.

[Robbe]

Hallo Stefan,

ich habe es auf diese Weise versucht:

Code: Alles auswählen

<img src="bild1"  onmouseover="this.src='bild2';"/>

Danach konnte ich den Editor nicht mehr laden, bzw. dieser wurde nicht mehr vollständig angezeigt, nur noch die Buttons.

Interessant wäre natürlich auch, ob so ein Bildwechsel einfacher eingebaut werden kann, als direkt im Quelltext der jeweiligen Seite zu hantieren. Den Anwendern der Seite möchte ich das so nicht zeigen, die machen dabei evtl. etwas kaputt.

[Stefan]

Tatsache, der Editor vermurkst da was.

Du könntest das Tauschen des Bildes auch auslagern, z.B. in eine Funktion swap:

Code: Alles auswählen

function swap(sourceImage) {
sourceImage.src='asdada';
}


im Html würde dann stehen:

Code: Alles auswählen

<img src="bild1"  onmouseover="swap(this)"/>

wenn man es richtig sauber macht, dann würde man hier mit einer kombination aus css & js arbeiten.
am beispiel jquery:

Code: Alles auswählen

<img src="bild1"  class="swappable"/>

script:

Code: Alles auswählen

$.each('img.swappable', function() {
  $(this).hover( function() {
      $(this).attr('src', 'neues bild oder replace, z.b. hinzufügen von _farbe');
  })
});


alles ungetestet!

[Jakob]

Ich würde das rein per CSS lösen: http://stackoverflow.com/questions/6092 ... n-html-css
Dann sparst du dir die zusätzlichen Bilder und es funktioniert auch ohne JavaScript.

Übrigens, das $.each kann man sich bei dem jQuery Beispiel von Stefan sparen :

Code: Alles auswählen

$('img.swappable').hover( function() {
  $(this).attr('src', 'neues bild oder replace, z.b. hinzufügen von _farbe');
});


[Robbe]

Danke für eure Antworten, werde das am Wochenende mal durchtesten.