100x100 Avatars Trans. PNGS Wallpapers Layout Index Div Layouts Table Layouts Photoshop Articles Misc
Memory P H O N Y U Divine Designs Cinematic Parade Tenshi-Ai Designs The Forgottten Lair Towairaito Graphics Apply? (eh) Stats/Info. Link Exchange
Do Not Copy Who Links Fight Spam!
CSS Rollovers
This article is subjected to change. Editing to be announced.Having an image, and changing it when you hover over it.
To get started, all you need to do is have your default image, and an the hovered image under it (they need to be the same size).
Open up a Notepad document, and paste this in it: your only HTML source jam packed with CSS coding. =D
<a href="http://domain.com" class="rollover"><var>Hello</var></a>Changing the underlined texts, leave everything as it should be.
Now sticking this in your css file:
var {You may erase the italics. =D They were to tell you what's in your css code.
visibility: hidden; } /* hides text link. The "Hello" on above example */a.rollover {
display: block; /* needed to set link dimensions */
width: 180px; /* width of your image */
height: 50px; /* height of your image. Divided by two, because we need to hide the lower portion if your image. */
background: url(image.jpg) no-repeat; /* image url */
text-decoration: none; } /* to hide link css additions */a:hover.rollover {
background: url(image.jpg) no-repeat 0px -50px; } /* When we hover over your image, we see the second image by adjusting the background position */