mouse over effect

Hi,

I've been toiling with this for a couple days now and can't seem to figure out why it doesn't work.

I attached the image I am using. I'm copying this affect from a tutorial on a site I found.

The effect makes it look as if the color of the image has changed color, but really, the image is just repositioned.

Thanks for any ideas.

This is the code:

<html>
<style type="text/css">
    .myImage { 
             width: 100px; 
             height: 100px; 
             background: url('/path/to/myImage.png') no-repeat;                   
             background-position: 0 -100px; }

.myImage:hover { background-position: 0 0; }

</style>

<body>
      <div class="myImage">&nbsp;</div>
</body>

</html>

Thanks.

Attachments

harry010

Light Poster

35 posts since Aug 2009

Reputation Points: 10

Solved Threads: 3

2 Years Ago

0

I forgot to add that I'm using Firefox/IE and neither work so its not a browser issue.

I am also using the Firefox developer tool bar and when I click
CSS-> view style information, the hover css rule doesn't even show up. So for some reason, this one rule is not registering with the browser?

Thanks in advance :)

harry010

Light Poster

35 posts since Aug 2009

Reputation Points: 10

Solved Threads: 3

2 Years Ago

0

Harry010,

This technique is generally called a "sprite".

The pseudo class :hover only applies to clickable links, not divs, therefore try : <a class="myImage" href="#" >My link</a>
If you don't want text in the link, then use   .

If you want text in the link, then you will probably want it v & h center-aligned. Try line-height:100px; text-align:center; text-decoration:none; . You may also want text-decoration:none; in the :hover directives as underline will tend to distract from the background rollover effect.Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,683 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

2 Years Ago

0

Hi Airshow,

Thanks for the response-I think I figured it out though-it was the doctype. I was using HTML but whatever the tutorial was doing required XHTML and when I slowly started removing pieces of the markup from the tutorials web site, the only thing that was left was the doctype declaration at the top:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Problem solved and thank you for the help!

just for anyone who's interested, this is the site: http://www.kyleschaeffer.com/best-practices/pure-css-image-hover

harry010

Light Poster

35 posts since Aug 2009

Reputation Points: 10

Solved Threads: 3

2 Years Ago

0

Harry,

So it works on a raw div!!!

Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,683 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

2 Years Ago

0

harry010,
what is this code doing on your site?
<script type="text/javascript"> var pageTracker = _gat._getTracker("UA-5789165-1"); pageTracker._trackPageview(); </script>
It is rising error on my firefox v3.5.2

Troy III

Practically a Master Poster

609 posts since Jun 2008

Reputation Points: 120

Solved Threads: 80

2 Years Ago

0

harry010, what is this code doing on your site? <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-5789165-1"); pageTracker._trackPageview(); </script> It is rising error on my firefox v3.5.2

I don't know where that code came from. What site are you talking about?

harry010

Light Poster

35 posts since Aug 2009

Reputation Points: 10

Solved Threads: 3

2 Years Ago

0

The link to your blog page you just provided:
http://www.kyleschaeffer.com/best-practices/pure-css-image-hover

But there is more...

Troy III

Practically a Master Poster

609 posts since Jun 2008

Reputation Points: 120

Solved Threads: 80

2 Years Ago

0

The link to your blog page you just provided: http://www.kyleschaeffer.com/best-practices/pure-css-image-hover

But there is more...

That's NOT my blog.lol. I just found a couple good tutorials on there that I wanted to share.

I'm not sure about the errors though...I've no idea. I'm using firefox v3.5.2 as well and I don't get any errors.

Maybe it's cookie or security settings on your browser or something?

harry010

Light Poster

35 posts since Aug 2009

Reputation Points: 10

Solved Threads: 3

2 Years Ago

0

Sorry my missunderstanding,
anyway, its an adware and a spyware blocked from my security. :)

Troy III

Practically a Master Poster

609 posts since Jun 2008

Reputation Points: 120

Solved Threads: 80

2 Years Ago

0

Just curious, but how do you know that's adware? I mean, what about the script tells you that? I'm asking because I really don't know, I'm not saying it isn't add-ware.

I'm surprised though because it is the guys personal web-site where he has his web-development portfolio.

I'm curious about the script you said is adware.

harry010

Light Poster

35 posts since Aug 2009

Reputation Points: 10

Solved Threads: 3

2 Years Ago

Show Comments

1

Harry,
Problem solved and thank you for the help!
I just found time to do some testing.

FF 3.0.13: OK
Opera 9.01 : OK
IE6 : No go - div:hover not supported.