Hover Effekt bei Bildern

[Corvulus]

Hallo,

hab eben mal folgendes versucht:

<style type="text/css">
 bild.img:hover{url(bild2.jpg);}
</style>
<img class="bild" src="bild.jpg" border="0">

Es hat leider nciht geklappt. :cry: Habt ihr eine Idee, wie ma ndas richtig macht?

Gruß Corvulus

 

[Schnuff]

<div id='img1' style="background:url('test.jpg'); width:100%; height:100%;">&nbsp;</div>

und in die CSS:

div #img1:hover{background:url('test2.jpg');}

 

[Corvulus]

Hab es ausprobiert. Ich verstehe nicht warum du das als background definierst. Da kommen dann ja nur unendlich Bilder. Mann könnte ja jetzt no-repeat setzen, aber Effekt klappt sowieso net. :sad:

Corvulus

 

[matcho]

ich glaub du hast da einfach nen denkfehler drin zwischen
background-image und normalen image ??!

 

[m0sT]

Hallo,

hab eben mal folgendes versucht:

<style type="text/css">
 bild.img:hover{url(bild2.jpg);}
</style>
<img class="bild" src="bild.jpg" border="0">

Es hat leider nciht geklappt. :cry: Habt ihr eine Idee, wie ma ndas richtig macht?

Gruß Corvulus

das hieße sowieso img.bild:hover nicht bild.img:hover
oder sehe ich das falsch?

 

[Schnuff]

man kann aber das vordergrund bild, nur mit JS verändern, wohingegen man das Backgroundimage auch mit CSS verändern kann ;)
und in meinem beispiel, sollten die width und height atribute, an die bild atribute angepasst werden ;)
dann ist das bild einmal da, und lässt sich über CSS switchen

 

[Corvulus]

Also, das mit dem Background find ich blöd. Das kann ich nicht so benutzen wie ich es brauche. Brauche schon einzelne IMGs die per hover in ein anderes verwandelt werden. Z.b. ein Haus wo die Türen und Fenster aufgehen wenn man drüber geht. Wenn ich das in nem DIV-Container mache ginge es, aber es ist nicht genau das weas ich mir vorgestellt habe. Müsste es also mit JS machen, oder? Naja, danke für eure Hilfe. Wollte Grundlegend nur etwas mit der Hover-Funktion rumspielen. ist also nciht so wichtig. Wenn ihr noch etwas habt is aba auch net schlimm. :twisted:

Corvulus

 

[matcho]

also ich denke ein background-image kann man fast überall positionieren mit css und deinem gewünschten effekt

ansonsten eben per javascript :roll:

 

[matibaski]

Nimm doch beide Bilder als Hintergrund und dazu brauchst du nur noch 'nen Spacer:

<style type="text/css">
.hover1:hover {
background:url(bild2.jpg) no-repeat;
}
</style>

<div class="hover1" style="display:block; width:??px; height:??px; border:??px; background:url(bild1.jpg) no-repeat;">
 <img src="spacer.gif" style="width:100%; height:100%; border:0px;" alt="" />
</div>

Diesen Code kann man natürlich erweitern. Ist aber ein Ansatz, den ich auch benutze bei Hovereffekten.


MfG, matibaski

 

[Schnuff]

ungefähr den gleichen, wollte er von mir auch nicht:mrgreen:

 

[Corvulus]

Ich sag ja, für mich war ncith das Ziel wichtig. Wollte nur wissen ob es so geht. Wenn ihr sagt es geht nicht, ist mein Problem also schon gelöst.

Gruß Corvulus