CSS Überschlag-Effekt
Scripte > Bildobjekte
Ein simples RollOver mit Überschlageffekt per CSS
Auch nur über die CSS-Eigenschaften eines Elements können diverse Effekte erzielt werden.
Es empfiehlt sich, die über das Stylesheet angesprochenen Elemente in einen abgeschlossenen Container
<div>.....</div>
zu setzen, da sich auf einer Webseite viele Elemente/Objekte befinden können.HTML einfach nur kopieren, Bildpfade entsprechend der Bildablage anpassen und in den in den BODY-Bereich <body>.....</body> der ausführenden Seite an gewünschter Stelle einfügen. HEAD-Code kopieren und in den HEAD-Bereich <head>.....</head> der gleichen Seite einfügen. Die Darstellungsgröße auf der Homepage wird mit width='...' festgelegt, die Höhe ergibt sich automatisch im Verhältnis zur Originalgröße.
1. Bild: Mit der Eigenschaft opacity wird bei Mouseover das Bild auf 400 Pixel vergrößert und leicht transparent dargestellt.
2. Bild: Mit der Eigenschaft opacity wird das stärker transparente Bild bei Mouseover vergrößert auf 500 Pixel und wieder normal dargestellt, sowie ein anderer Mauszeiger als Standard wird angezeigt.
![Download Button](wsX5Sys/download_none.png)
Eine sehr umfangreiche Hilfe zu den Style-Eigenschaften bietet dazu die Webseite "#content {CSS:4you;}":
Code für den <HEAD> Bereich
<style>
a.ImgObj24_1 img { filter: alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; margin: 0px; }a.ImgObj24_1:hover img {
filter: alpha(opacity=10);-moz-opacity: 0.50;opacity: 0.50;margin: 0px;width: 400px;}
a.ImgObj24_2 img {
cursor: ne-resize;filter: alpha(opacity=5);-moz-opacity: 0.25;opacity: 0.25;margin: 0px;}
a.ImgObj24_2:hover img {
filter: alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;margin: 0px;width: 500px;}
</style>
Code für den <BODY> Bereich
<div>
<a class="ImgObj24_1" href="wsX5Obj/Obj_IMG/personen_01.jpg" target="_blank">
<img src="wsX5Obj/Obj_IMG/personen_01.jpg" alt="Person 1" width="300px"/></a>
<a class="ImgObj24_2" href="wsX5Obj/Obj_IMG/personen_02.jpg" target="_blank">
<img src="wsX5Obj/Obj_IMG/personen_02.jpg" alt="Person 2" width="350px"/></a>
</div>
» nach oben «