Bild Hover

[speedbike24]

Da ich jetzt überall Gesucht habe und einfach wirklich nichts passendes Gefunden habe stelle ich hier mal meine frage!
Ich möchte wie hier:

http://www.neckermann.de/Baby-Ausstattung/230395303,de_DE,sc.html#[{%22evt%22:%22nkmnAjaxSearchBack%22,%22evtdata%22:{%22url%22:%22http://www.neckermann.de/Baby-Ausstattung/230395303,de_DE,sc.html?sz=20&viewMode=gallery&srule=_Rev7:100%22}}]

das ein Transparentes bild sich über das eigentliche bild legt und Verlinkt ist.

Wie kann mann das Verwirklichen?

 

[ThomasE]

Hi,

schau dir den Quellcode an der Stelle doch einfach einmal an, dann musst du nicht soviel suchen ;)

Das Stichwort ist "position: absolute".

position: Positionsart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

 

[dazzle89]

Genau, du gibst dem transparenten Bild "position: absolute" und dem herumliegenden Element "position relative", damit sich das transparente Bild jeweils nicht an dem Browserfenster sondern dem relativ positionierten Element ausrichtet. Außerdem gibst du dem Bild ein "display: none" und beim Hovern "display: block".

 

[Wustersoss]

Das ist ein Gif-Bild der Grösse 1px X 1px transparent, welches dann auf die passende Bildgrösse hoch skaliert wird.
Interessante Technik, da man so nur ein klitzekleines Bild von 43 Byte benötigt.
Wollte ich nur mal zusätzlich erwähnen, nicht dass jemand denkt er brauche jetzt für jede Bildgrösse noch ein extra Transparentes Bild im gleichen Format.

Edit: Zur Frage

Wie kann mann das Verwirklichen?

Das eigentliche Bild ist im CSS als Hintergrundbild erstellt. Das ist sogar noch einfacher. Das kann man aber nur machen, wenn man statische Seiten hat, die sich nicht mehr verändern oder wie hier dynamisch, wenn das CSS mit einer serverseitigen Sprache erstellt wird.