Zymic Forums

Webmaster resources

Zymic IRC Server

Chat in real time at irc.zymic.com - Learn More

Welcome

Welcome to the Zymic webmaster forums. Our forums are here to provide people the free ability to discuss a range of websites related topics such as design, development coding and marketing.

In order to post you will need to register for a zymic account or if you already have one simply login by using the form on the left.

left Zymic Webmaster ForumsWeb Design & DevelopmentClient Side ScriptingHTML and CSS right
  Closed Topic Start new topic
left right
loveandasandwich
post Jul 17 2008, 01:28 AM
Post #1


Newbie
*

Group: Members
Posts: 27
Joined: 11-July 08
From: Texas, USA
Member No.: 45,276



Hello,

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>


I posted this in HTML and CSS because that's what my code uses, but a JavaScript fix would be fine, too.
Go to the top of the page 
 
  + Quote Post
Andrew
post Jul 17 2008, 05:42 AM
Post #2


Hosting Abuse Staff
*******

Group: Moderators
Posts: 2,933
Joined: 14-February 08
From: Fort Myers FL, USA
Member No.: 10,089



I believe this is what you were looking for. It even lets you change the image when you click the mouse on the image.
http://www.tutorio.com/tutorial/pure-css-image-rollovers
Go to the top of the page 
 
  + Quote Post
 Closed Topic Start new topic
left right
0 Members:
left right
 


Lo-Fi Version Time is now: 21st May 2013 - 01:07 PM