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> |
