image rollover effect with css background image
Here we use basic css back ground image to get rollover effect.the logic is simple and we can find it in comments in script itself.
- we create a empty link
- set back ground as test1.jpg and display to block and height and width to 150px.
- build a suido selctor hover to link and set back ground image to test2.jpg
- this works even javascript disabled browsers also
Download Script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html>
<head>
<title>image rollover with css</title>
<style type="text/css">
<!--
#imagerollover a {
background-image: url(test2.JPG);
display: block;
background-repeat: no-repeat;
height: 150px;
width: 150px;
}
#imagerollover a:hover{
background-image: url(test1.JPG);
}
-->
</style>
</head>
<body>
<div id="imagerollover"><a href="#test"> </a></a></div>
</body>
</html> |
Download Script
Popularity: 10% [?]
Related Articles
1 user responded in this post
Pretty cool post. I just came by your site and wanted to say
that I’ve really liked reading your posts. In any case
I’ll be subscribing to your feed and I hope you write again soon!
Leave A Reply