Member Avatar for harry010

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.

buttonleafhover.png 4.04 KB
  • 3 Contributors
  • 12 Replies
  • 123 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by harry010

Recommended Answers

All 12 Replies

Member Avatar for harry010

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

Member Avatar for Airshow

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 &nbsp; .

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

Member Avatar for harry010

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

Member Avatar for Airshow

Harry,

So it works on a raw div!!!

Airshow

Member Avatar for Troy III

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

Member Avatar for harry010

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?

Member Avatar for harry010

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?

Member Avatar for Troy III

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

Member Avatar for harry010

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.

Member Avatar for Airshow

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.

If you want to include IE6, I think you will need to use an <a> tag as per my post #3.

Last time I looked at browser stats (on a particular site), IE6 was about 15% of all users. Maybe a few percent less now but I would guess still quite significant.

Airshow

commented: Very informative and helpful. +1
Member Avatar for harry010

Thanks Airshow, I forgot that I was testing on IE8 which has support for more standards I think.

15% is a big percent. I'm going to try your suggestion of using the anchor tag tomorrow.

Till next time.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.