Bild wechseln bei MouseOver

[MelanieCibura]

Hallo,

ich bin immernoch an meiner Seite dran und habe mal wieder ein Problem.

Ich habe auf meiner Seite ein Bild und möchte, dass wenn man mit dem Maus-Cursor darübergeht ein anderes Bild erscheint. Wenn ich das Bild in ein <a>-Tag stecke verändert sich ja logischerweise der Cursor, wenn ich über das Bild gehe. Hab es aber schon gesehen, dass es auch anders geht, z.B. mit Javascript. Leider kenne ich mich mit Javascript überhaupt nicht aus. Kann mir da einer erklären wie das geht? Wäre echt super!

Hier das Beispiel: HIER

Vielen Dank!

Gruß, Melanie

[TheTalesOfImmo]

Hi!

Das ist relativ simpel, ich habe etwas ähnliches erst vor kurzem gemacht.
In HTML gibt es für JavaScript sogenannte Eventhandler, die auf bestimmte Ereignisse reagieren. In Deinem Fall wäre das der Handler "onmouseover".

Der HTML-Code dafür könnte z.B. so aussehen:

<div style="width:200px;height:100px;background:url('irgendwas.jpg') no-repeat;" id="irgendwas" alt="Irgendwas" onmouseover="this.style.backgroundImage = 'url(irgendwasanderes.jpg)'" onmouseout="this.style.backgroundImage = 'url(irgendwas.jpg)'" />

Ich erstelle einen div-Container und gebe ihm einen Hintergrund. Immer wenn Du mit der Maus darüber hoverst ändert sich der Hintergrund (onmouseover). Damit er sich auch wieder zurückändert, muss der Code allerdings noch den Handler "onmouseout" umfassen, der das Event abhandelt, wenn die Maus den Container verlässt und dann das Hintergrundbild zurücksetzt.

[Herr_D]

Außer für den IE<7 brauchst du kein a mehr...


Einen einfachen hover-Effekt bekommst du nur mit CSS hin

.bild-one {
width:300px;
height:400px;
border:none;
background:transparent url(bildadresse.jpg);
}

.bild-one:hover {
background:transparent url(bildadresse2.jpg) /* wahlweise ein Bild mit Verschiebung in Höhe */ 
}

<div class="bild-one">&nbsp;</div>

[MelanieCibura]

Wow cool, danke Genau das brauchte ich!

Es hat sofort funktioniert, genauso wie ich es mir vorgestellt habe.

Vielen Dank euch beiden

Gruß, Melanie

[VladDerFehler]

Hallo, vllt könnte ich mit eure Hilfe folgendes realisieren. Also es geht in Prinzip ebenso um einen Bildwechsel beim MouseOver Vorgang, allerdings wünsche ich mir einen "weichen" Übergang sowie auf der http://www.nukic.de/index.php?option...138&Itemid=464

Es scheint ein Joomla-Modul zu sein und meine Frage wäre: könnte mann es auch über html/css lösen, ohne Joomla in Anspruch zu nehmen?

Bedanke mich im Voraus und schönes WE!

[TheTalesOfImmo]

Hallo und willkommen im Forum!

Dieser Effekt hat mit Joomla! selbst nichts zu tun, da es sich bei Joomla! nur um ein CMS handelt, es also nur für den Inhalt, nicht aber für Layout und Design zuständig ist. Auch CSS bietet für weiche Fade-Effekte keinerlei Hilfsmittel.

Dieser Effekt kann nur über eine Javascriptbibliothek realisiert werden, ich benutze dafür immer JQuery und ein leicht abgewandeltes Script ähnlich wie jenem, welches in diesem Tutorial beschrieben wird.

[Myhar]

Zitat von TheTalesOfImmo

Auch CSS bietet für weiche Fade-Effekte keinerlei Hilfsmittel.

Das stimmt so nicht, mit CSS3 ist das sehr wohl möglich. Stichwort: transitions.

[TheTalesOfImmo]

Zitat von Myhar

Das stimmt so nicht, mit CSS3 ist das sehr wohl möglich. Stichwort: transitions.

Okay, danke für den Hinweis.
Dennoch würde ich noch davon abraten, da doch viele Spielereien noch nicht von der Trident-Engine unterstützt werden. Trotzdem eine sehr tolle Funktion.

[Diko79]

Freut mich, dass dir das Template gefällt! ;-) LG Nukic