KhAk - Design And Style Your Myspace 1.0

CSS Image Rollover

° ↓ Introduction: ↓ °
Häufig sieht man in einer Webseite ein Bild, das durch ein anderes Bild ersetzt wird, wenn die Maus darüber gerollt wird. Hier sind zwei einfache CSS Tutorials, wie das auf Myspace zu realisieren ist:
Often, you see in a web page an image which is replaced with another image if the mouse rolled over it. Below are two simple CSS tutorials to how it is realized on myspace:

° ↓ Introduction: ↓ °

Häufig sieht man in einer Webseite ein Bild, das durch ein anderes Bild ersetzt wird, wenn die Maus darüber gerollt wird.
Hier sind zwei einfache CSS Tutorials, wie das auf Myspace zu realisieren ist:

Often, you see in a web page an image which is replaced with another image if the mouse rolled over it.
Below are two simple CSS tutorials to how it is realized on myspace:

° ↓ Example: ↓ °
	- Fahre mit der Maus über das Bild um den Effekt zu sehen. - Hover your mouse over the image to see the effect.

° ↓ Example: ↓ °

- Fahre mit der Maus über das Bild um den Effekt zu sehen.

- Hover your mouse over the image to see the effect.

° ↓ Notice: ↓ °

Stelle fest, dass du "Zwei Bilder" mit exakt "Derselben Größe" ausgewählt hast und lade sie hoch.

Make sure that you selected "Two Images" with exactly the "Same Size", and upload them on a hosting site.

° ↓ Like: ↓ °

Image I

Image II
© Designed By KhAk

°"Image Hosting Sites"°

°photobucket.com°

°tinypic.com°

° ↓ Code I: ↓ °
<style type="text/css"> .KhAk {Image Rollover} .KhAkROL1 {display:block; width: `100`px; height: `120`px; background-image:url(`URL Of Image I`);} .KhAkROL1 a:hover {background-image:url(`URL Of Image II`);} </style> <div class="KhAkROL1"> <a class="KhAkROL1" href="Your Page URL"></a> </div>

° ↓ Code I: ↓ °

° ↓ Code II: ↓ °
<style type="text/css"> .KhAk {Image Rollover} a.KhAkROL2 {display:block; width: `100`px; height: `120`px; background-image:url(`URL Of Image II`);} a.KhAkROL2:hover img {visibility:hidden;} </style> <a href="Your Page URL" class="KhAkROL2"> <img src="`URL Of Image I`" border="0px"> </a>

° ↓ Code II: ↓ °

° ↓ Note: ↓ °
`☼- Ändere die Breite/Höhe in der Größe deines Bildes.` `☼- Ersetze die "Image URLs" (I/II) durch deine eigene URLs.` ☼- das Bild wird Klickbar sein, also ersetzte auch "Your Page URL" mit der URL deiner Wahl (Home Page etc.). ☼- Ändere die Zahl "1" ODER "2" in 3, 4, und 5 etc., wenn du vorhast multiple Bilder auf deinem profil einzufügen.
`☼- Change the width/height to the size of your Image.` `☼- Replace the "Image URLs" (I/II) with your own URLs.` ☼- The image will be clickable, and you can replace "Your Page URL" with your own (Home Page etc.). ☼- If you want to add "different" Images at the multiple places on your profile: Add the entire code BUT change: the class numbers "1" OR "2" to 3, 4, and 5 etc.

° ↓ Note: ↓ °

☼- Ändere die Breite/Höhe in der Größe deines Bildes.
☼- Ersetze die "Image URLs" (I/II) durch deine eigene URLs.
☼- das Bild wird Klickbar sein, also ersetzte auch "Your Page URL" mit
der URL deiner Wahl (Home Page etc.).

☼- Ändere die Zahl "1" ODER "2" in 3, 4, und 5 etc.,
wenn du vorhast multiple Bilder
auf deinem profil einzufügen.

☼- Change the width/height to the size of your Image.
☼- Replace the "Image URLs" (I/II) with your own URLs.
☼- The image will be clickable, and you can replace "Your Page URL"
with your own (Home Page etc.).

☼- If you want to add "different" Images at the multiple
places on your profile:
Add the entire code BUT change:
the class numbers "1" OR "2" to 3, 4, and 5 etc.