My website uses the method of combining two images into one and moving the background position on rollover, but I'd like to use CSS to do the rollover so that I can use one image at a lower file size, since the image I'm currently using is about 263 kb (which has already been dramatically decreased from 418 kb when I was using two images).
However, it looks...pretty bad in IE but works perfectly in Firefox. So I was wondering if there was some kind of fix or workaround for it.
Here's my test Web page for the CSS rollover (has a picture of what it looks like in IE as well).
http://loveandasandwich.com/teststuff/index.html
Here is my source code:
CODE
<html>
<head>
<style>
.pic, a.pic, a.pic img { filter: Alpha(opacity=60); -moz-opacity: 0.7; }
a.pic:hover, a.pic:hover img { filter: Alpha(opacity=100); -moz-opacity: 1.0; }
</style>
</head>
<body>
<a class="pic" href="#"><img class="pic" src="clickme.png" border="0" alt=""></a>
<br><br>
<img src="ie.jpg">
</body>
</html>
<head>
<style>
.pic, a.pic, a.pic img { filter: Alpha(opacity=60); -moz-opacity: 0.7; }
a.pic:hover, a.pic:hover img { filter: Alpha(opacity=100); -moz-opacity: 1.0; }
</style>
</head>
<body>
<a class="pic" href="#"><img class="pic" src="clickme.png" border="0" alt=""></a>
<br><br>
<img src="ie.jpg">
</body>
</html>
I posted this in HTML and CSS because that's what my code uses, but a JavaScript fix would be fine, too.