mouseover-geschichte

[greenvalley]

HI @ all!

Ich hab da ein Problem. Ich habe, um nicht alles vollzuspamen auch schon die Suchmaschine benutzt aber nicht das gefunden, was ich suche oder wie ich es in Erinnerung hab. Die meisten Codes gehen bei mir noch nicht mal.

Problem:
Ich habe 2 Bilder, nennen wir sie enter1.jpg und enter2.jpg. Ich möchte, dass enter1.jpg das Ausgangsbild ist und wenn man mit der Maus draufgeht, kommt enter2.jpg. Wenn man wieder runtergeht wieder enter1.jpg. Und wenn man auf die ganze Sache draufklickt, kommt man zu einer anderen Seite. Das ganze ist also ein Mouseover-Link. Ich habs selbst schon probiert, in dem ich per Button-Generator das gemacht habe - hat nicht funktioniert. Ich hab hier ein paar Codes gezogen - hat nicht gefunzt. Ich hab einen Code, der per Link ein Bild mouseover macht probiert und wollte ihn selbst umformen ... war auch nix.
Ich hoffe, ich kann von euch einen Code bekommen, den ich auch verstehe *schäm* und der funktioniert.
Danke.

LG, Dark.Angel

 

[dkdenz]

Such mal mit dem Begriff hover hier im Forum.

 

[bubu-der-uhu]

Machst du das:

In den Head:

<style>
#bild {
display:block;
width: deine Bildbreite;
height: deine Bildhöhe;
background-image:url(deinBild-ohneMouseover);
}

#bild:hover { background-image:url(deinBild-mitMouseover);}
</style>

in den Body:

<a id="bild" href="deineSeite.html"> </a>

 

[greenvalley]

Hi!

@ dkdenz: Ich hab mit 'hover' gesucht und nicht das passende gefunden.
@ bubu-der-uhu: war schon nicht ganz falsch, jedoch schiebt sich das 2. bild so abgehakt von oben her, es sollte direkt überblenden.

LG, Dark.Angel

 

[ein schlauer]

Was heißt den abgehackt von oben her?

Das Bild wird normal ausgetauscht, wenn du was mit Überblendeffekt willst wirst du um ein komplexes Javascript nicht drumherum kommen.

 

[greenvalley]

ich hatte schonmal einen einfachen code ... nur weiß ich ihn nicht mehr und das bild schiebt sich von oben ein und zwar abgehakt, es überblendet nicht einfach, sondern zuerst sieht man von oben die hälfte vom bild und dann erst kommt der untere teil.

 

[slosd]

ich hatte schonmal einen einfachen code ... nur weiß ich ihn nicht mehr und das bild schiebt sich von oben ein und zwar abgehakt, es überblendet nicht einfach, sondern zuerst sieht man von oben die hälfte vom bild und dann erst kommt der untere teil.

Das passiert wenn das Bild erst geladen werden muss. Ich weiß jetzt nicht ob du mit "überblenden" faden meinst oder einfach austauschen. Aber wenn du das Bild nur austauschen willst geht das am einfachsten mit CSS (siehe Post von bubu-der-uhu). Damit das Bild gleich am Anfang geladen ist machst du die beiden Bilder in eines übereinander und änderst dann beim hovern die Hintergrundposition:

 <style>
#bild {
display:block;
width: deine Bildbreite;
height: deine Bildhöhe;
background-image:url(deinBild);
}

#bild:hover { 
background-position:left deine Bildhöhe;
}
</style>