Antworten auf deine Fragen:
Neues Thema erstellen

Bild wechseln bei MouseOver

MelanieCibura

Noch nicht viel geschrieben

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:

Vielen Dank!

Gruß, Melanie
 

TheTalesOfImmo

Medieninformatiker

AW: Bild wechseln bei MouseOver

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:

HTML:
<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.
 
Zuletzt bearbeitet:

Herr_D

offline

AW: Bild wechseln bei MouseOver

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


Einen einfachen hover-Effekt bekommst du nur mit CSS hin


Code:
.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 */ 
}

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

MelanieCibura

Noch nicht viel geschrieben

AW: Bild wechseln bei MouseOver

Wow cool, danke :) Genau das brauchte ich!

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

Vielen Dank euch beiden :)

Gruß, Melanie
 
V

VladDerFehler

Guest

AW: Bild wechseln bei MouseOver

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

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

Medieninformatiker

AW: Bild wechseln bei MouseOver

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.
 
D

Diko79

Guest

AW: Bild wechseln bei MouseOver

Freut mich, dass dir das Template gefällt! ;-) LG Nukic
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben