Rollover Images Without Javascript
One of the messiest things I have seen is the auto-generated code from Dreamweaver for rollover images. It got me thinking of ways to make the images swap without the need of Javascript. Instantly I thought CSS. It was actually fairly simple to get working.
Take for example this button:
<a href="results.html" class="button"></a>
Right now the button doesn’t do a thing. However, if we apply some CSS to it, we get a nice button with a rollover.
.button{
background:url('url/to/image.png') no-repeat;
width:20px;
height:20px;
display:block;
}
.button:hover{
background:url(url/to/rollover.png) no-repeat;
}
Now the button will show the image and swap to the rollover when you hover over it. All without Javascript. But, you ask “How do you preload the images without Javascript?”
I laugh, such a simple answer. Put the rollover images at the top of the page, inside of a hidden div.
<div style="display:none;">
<img src="url/to/rollover.png" alt="" />
</div>
And there you have it, JS free rollover images.
May 29th, 2008 at 11:52 am
Quite sure this doesn´t work in IE…
May 29th, 2008 at 12:50 pm
I’ve tested this in IE6-8, Safari2-3, Firefox2-3.
All seem to work just fine.
June 2nd, 2008 at 2:25 am
HTML:
[code]Show me some preloaded buttons[/code]
CSS:
[code]a.button {
background:url(images/button.gif) left top no-repeat;
text-indent: -9999em;
display:block;
width:93px;
height:21px;
cursor:pointer;
}
a.button:hover { background-position: left bottom; }[/code]
So.. Your image height is total 42px where upper 21px is none hovered image and lower 21px is hovered image. Got it?
Simple as it is.. Tested IE6-7, Opr-newest-couble older versions and FF2-3.
You need to make all buttons theyr own css and make sure you change width as correct. Then you can make it to be as centered by putting “margin 0 auto” in buttons css.
Thanks.
June 2nd, 2008 at 2:26 am
Oh.. here we can’t use codeboxes?? Sorry.. Try to seek HTML code by viewing site code.