css und mouseover

[gabi]

hallo, ich hab mir ein kleines blog-script besorgt und möcht in diesem blog nun bei einem bild den mouseovereffect anwenden.
normalerweise klappt es immer mit dieser zauberformel:

<img src="jump.jpg" border="no" id="yump" name=yump
onmouseover="document.yump.src='jump2.jpg'" onmouseout="document.yump.src='jump3.jpg'"></a>

aber nun, ich glaube, es liegt daran, dass das blog mit css gemacht wird...
(also die datei heiß weblog.php)
klappt das gar nichtmehr, man sieht nur das bild und wenn man mit der maus rüberfährt kriselts komisch und das wars...

im selfthtmtl-artikel dazu stehen irgendwelche zeichen, die ich nicht interpretieren vermag, aber es sieht so aus, als müsste ich irgendwas in den body-text schreiben
dazu bin ich aber nicht in der lage.

geht das trotzdem dass ich so einen hübschen mouseover-effekt erzeugen kann mit einer anderen "zauberformel"?
zB: einfach vor dem üblichen code noch schreiben "verwende javascript" oder so?

danke für die antwort!!

gabi

[Alex]

Hallo,

<img src="jump.jpg" border="no" id="yump" name=yump
onmouseover="document.yump.src='jump2.jpg'" onmouseout="document.yump.src='jump3.jpg'"></a>

Du hast die Attribute teilweise in Anführungszeichen gesetzt und teilweise nicht, ansonsten sieht's aber OK aus. Etwas vereinfacht:

<img src="jump.jpg" onmouseover="this.src='jump2.jpg'" onmouseout="this.src='jump3.jpg'" />

aber nun, ich glaube, es liegt daran, dass das blog mit css gemacht wird...

Das hat eigentlich nichts damit zu tun. Mit CSS könnte man aber auch ein Mouseover machen. Allerdings kann man mit CSS nur Hintergrundbilder austauschen. Du könntest also ein transparentes Bild anzeigen...

<img id="meinBild" src="transparent.png" />

...und dieses mit CSS so formatieren, dass das eigentliche Bild als Hintergrundbild "hindurchschimmert" und dieses Hintergrundbild bei Mouseover ausgetauscht wird:

#meinBild        { background:url('jump.jpg'); }  
#meinBild:hover  { background:url('jump2.jpg'); }

Letzteres funktioniert auch ohne JavaScript, ist aber eigentlich nicht Sinn der Sache, da hier Inhalt zu Gestaltung gemacht wird. Um das Ganze noch ruckelfrei zu bekommen, müssen die Mouseover-Bilder noch in den Browsercache geladen werden. Das geht entweder mit JavaScript (siehe hier) oder man zeigt das Bild irgendwo auf der Seite unauffällig (1x1px) an. Schließlich gibt es noch die Möglichkeit, normales und Mouseover-Bild in ein Bild zu packen und dieses bei Mouseover mit CSS zu verschieben (siehe hier, das Bild sieht so aus).

Alex

[gabi]

hallo, tut mir leid, ich bin nich ganz so bewandert, dass ich alles verstehe, was du mir sagst... :(

1. wo habe ich anführungszeichen zuviel oder zuwenig gesetzt? normalerweise hat genau dieser code immer funktioniert. aber hier versagt der komischerweise

2. nur hintergrundbilder austauschen? wo lege ich denn fest, und wie, dass ein bild, ein HINTERGRUNDBILD ist? und wie mache ich das dann, dass dieses bild zumindest "scheinbar" im vordergrund ist und keine schrift drüber zu sehen ist, etc?

3. das letztgenannte beispiel von dir gefällt mir, ist das einfach zu bewerkstelligen? oder muss ich da auch den body-text verändern?
   (betrifft: http://www.wachenfeld-golla.de/vortraege/advanced_css/rolloverDemo/index.html)

4. es wäre mit lieb, wenn du einen vollständigen code aufschreiben könntest, weil ich glaube ich nicht in der lage bin aus verschiedenen hinweisen, einen eigenen zu basteln, sorry.

danke, lieben gruß

gabi

[gabi]

das problem ist ja, dass man da - oder sehe ich das falsch? immer im body-text arbeiten muss, also nicht sowas wie einen befehl vorneweg vor dem code angeben kann?
ich hoffe, das klingt halbwegs nachvollziehbar, was ich meine

gabi

[gabi]

ok, ich hab den fehler.
nur zur info!!

ich hatte ein bild "bild.JPG" benannt, obwohl es ein "bild.jpg" war. ja, diese groß und kleinschreibung immer, die kleinen fehlerchen, die man immer übersieht...

gruß, und danke

gabi