Antworten zum Thema „mouse over machen“

EyeForce · 08.12.2006

kann mir jemand sagen wie ich ein mouse over effekt hinkriege?
das sich halt das bild ändert wenn ich mit der maus drüber fahre

bei der suche hab ich nix gescheites gefunden -.-

illuminatus10 · 08.12.2006

Also du nimmst im img-Tag das Attribut OnMouseOver und trägst folgenden Javscript-Code ein:

Code:

this.src='neues Bild';

...bei dem Attribut OnMouseOut trägst du das ein:

Code:

this.src='altes Bild';

Prinzip is klar, oda?

FromTheAshes · 08.12.2006

Willst Du das auf Links anwenden, oder auf einfache Bilder?

Bei einfachen Bildern wüsste ich nur eine Lösung: DIV-Container erstellen und so beschreiben:
#bild {
background-image:url(Pfad zum Bild);
width: Größe des Bildes in Breite;
height: Größe des Bildes in Höhe;
}
#bild:hover {
background-image:url(Pfad zum neuen Bild);
}

Der HTML-Teil:
<div id="bild"></div>

Javascript würde ich nicht verwenden... Einfacher aber mit starken Nachteilen behaftet.

EyeForce · 08.12.2006

ist der code nicht für php?

FromTheAshes · 08.12.2006

Nein, das ist reines CSS und HTML
Im Dokument schreibst Du das folgendermaßen:

Code:

<html>
<head>
deine Angaben im HEAD-Tag
</head>
<style type="text/css">
#bild {
background-image:url(Pfad zum Bild);
width: Größe des Bildes in Breite;
height: Größe des Bildes in Höhe;
}
#bild:hover {
background-image:url(Pfad zum neuen Bild);
} 
</style>
<body>
<div id="bild"></div> 
</body>
</html>

Das funktioniert, habs schon ausprobiert.
Du musst halt beachten, dass Du die Pfade richtig schreibst.
PS: Du speicherst die Datei natürlich ganz normal mit der Endung .html oder .htm

EDIT: Ach, Scheiße! Ich sehe grad, im Internet Explorer gehts nicht.. Nur im FireFox... Mal schauen, was ich noch dran ändern kann, damits funktioniert!

Duddle · 08.12.2006

Quelltext studieren

Duddle

FromTheAshes · 08.12.2006

Ist das gleiche, nur auf einen Link angewandt...

Duddle · 08.12.2006

FromTheAshes schrieb:
nur auf einen Link angewendet...

Jo, deshalb geht es im IE :lol:

Duddle

EyeForce · 08.12.2006

thx an fat

FromTheAshes · 08.12.2006

Duddle schrieb:
FromTheAshes schrieb:

nur auf einen Link angewendet...

Zum Vergrößern anklicken....

Jo, deshalb geht es im IE :lol:

Duddle

Aber es muss doch eine Möglichkeit geben, es dem IE recht zu machen, ohne einen Link zu verwenden...

emily12345 · 14.12.2006

Ja, den gibt es

Die Menübilder haben das Namensformat: *_n.* bzw *_h.* (bild1_n.jpg)

Code:

[img]images/bild1_n.jpg[/img]

Das tauscht das Bild bei Rollover:

Code:

this.src=this.src.replace('_n.','_h.');

Dieses einfach im QuellCode ansehn...

-redpassion- · 16.12.2006

so wie vorher beschrieben müsste es gehen ...aberv für sowas kann man ja nebenher immer noch einen WYSIWYG editor nutzen da sieht man direkt was man macht

..lol..

Koopa · 18.12.2006

Re: Ja, den gibt es

emily12345 schrieb:
Die Menübilder haben das Namensformat: *_n.* bzw *_h.* (bild1_n.jpg)

Code:

[img]images/bild1_n.jpg[/img]

Das tauscht das Bild bei Rollover:

Code:

this.src=this.src.replace('_n.','_h.');

Dieses einfach im QuellCode ansehn...

Geht das ganze auch bei ausgeschaltetem JavaScript?

Duddle · 18.12.2006

Re: Ja, den gibt es

Koopa schrieb:
Geht das ganze auch bei ausgeschaltetem JavaScript?

Natürlich nicht, da die gezeigten Wege alle mit JS arbeiten.
Nix Autofahren ohne Auto

Duddle

emily12345 · 19.12.2006

Alternativ wäre da noch Flash...

Alternativ wäre da noch Flash...

ansonsten sollte JS anbleiben... sind doch nur Computer

DaAndi90 · 03.01.2007

Code:

[img]Pfad des Bildes[/img]

so hab ich das bis jz immer gemacht, gibt vielleicht bessere lösungen die schon angeführt sind, ich bins aber schon so gewohnt.

mistermorrison · 04.01.2007

Ich arbeite derzeit an meiner Homepage und habe ein Problem mit den Rollover-Effekten.
Im Firefox funktionieren diese einwandfrei, allerdings verweigert der IE jeglichen Dienst.

So siehts im Dokument aus:

Code:

[img]images/ubersicht/morrison2.gif[/img]

Was läuft da für den IE falsch?

graphix · 04.01.2007

mistermorrison schrieb:
Ich arbeite derzeit an meiner Homepage und habe ein Problem mit den Rollover-Effekten.
Im Firefox funktionieren diese einwandfrei, allerdings verweigert der IE jeglichen Dienst.

So siehts im Dokument aus:

Code:

[img]images/ubersicht/morrison2.gif[/img]

Was läuft da für den IE falsch?

hi mr.morrison!

link:

schaus dir mal an. vielleicht hilft's dir ja

Gruß, Graphix