...

View Full Version : image hover



ptrcao
12-10-2010, 01:05 AM
html

<a class="button" href="pages/differentiation/differentiation.html" target="_self"> Diff </a>

CSS

a.button{
background: url(images/icons/differentiation-sprite.jpg);
display: block;
width: 195 px;
height: 195 px;
}

a.button:hover{background-position: 100% 0;}

Why doesn't this work?

Also I don't technically want any text involved in this link; this is purely a picture link, though every tutorial I've read so far treats this as a text link and the pictures get invoked in the CSS. It looks pretty inappropriate to me but that's how the tutorials teach it.

Excavator
12-10-2010, 01:09 AM
html

<a class="button" href="pages/differentiation/differentiation.html" target="_self"> Diff </a>

CSS

a.button{
background: url(images/icons/differentiation-sprite.jpg);
display: block;
width: 195 px;
height: 195 px;
}

a.button:hover{background-position: 100% 0;}

Why doesn't this work?

Also I don't technically want any text involved in this link; this is purely a picture link, though every tutorial I've read so far treats this as a text link and the pictures get invoked in the CSS. It looks pretty inappropriate to me but that's how the tutorials teach it.

You don't want any text but you put "Diff" in there. ??
That all looks right... except for the hover positioning. There is no way for us to verify that 100% 0 is actually where the hover image is without giving us the image.
Have you validated your code, just to double check?
Can you link us to the test site?

Excavator
12-10-2010, 01:11 AM
It could be you need
a.button:link{
background: url(images/icons/differentiation-sprite.jpg);
display: block;
width: 195 px;
height: 195 px;
}

??

ptrcao
12-10-2010, 01:18 AM
That all looks right... except for the hover positioning. There is no way for us to verify that 100% 0 is actually where the hover image is without giving us the image.
Have you validated your code, just to double check?
Can you link us to the test site?

http://www.mathannotated.com/hovertest/hovertest.html

http://www.mathannotated.com/hovertest/differentiation-sprite.jpg

ptrcao
12-10-2010, 01:20 AM
You don't want any text but you put "Diff" in there. ??

I agree, it's not appropriate; this is intended to be an image link, not a text link, but he does teaches it this way for some reason:

http://kyleschaeffer.com/best-practices/pure-css-image-hover/

ptrcao
12-10-2010, 01:32 AM
It could be you need
a.button:link{
background: url(images/icons/differentiation-sprite.jpg);
display: block;
width: 195 px;
height: 195 px;
}

??

Didn't help I'm afraid.

It's not important that I can do it this way. If you know a better way, just suggest that instead. Basically I'm using a sprite image to create a mouse rollover effect, so that when the viewer positions the mouse above this picture link, it glows.

http://www.mathannotated.com/hovertest/differentiation-sprite.jpg

The strategy has been to shift the sprite image to the right.

Excavator
12-10-2010, 01:34 AM
I agree, it's not appropriate; this is intended to be an image link, not a text link, but he does teaches it this way for some reason:

http://kyleschaeffer.com/best-practices/pure-css-image-hover/

BAh, same crap as always. People have hidden so much spam and crap seo keywords with text-indent: -9999px; (http://luigimontanez.com/2010/stop-using-text-indent-css-trick/) that it is considered spam.
You can use it or not, I'm sure it won't hurt a thing. He only has that in there because that's how we did things a year or two ago. Hell, I still have lots of demos on my site that do the same thing.

It also won't hurt a thing to get rid of that text and it's indent.

Excavator
12-10-2010, 01:40 AM
Did you try validating yet?
I did not... but I'm pretty sure the validator will find the error. 195 px is not viewed the same as 195px.

Hmm, maybe that is overlooked. Off to check now...

Excavator
12-10-2010, 01:42 AM
No, the validator definitely sees that.
Try this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
a.button{
background: url(http://www.mathannotated.com/hovertest/differentiation-sprite.jpg);
display: block;
width: 195px;
height: 195px;
}
a.button:hover{background-position: 100% 0;}
</style>
</head>
<body>
<div id="container">
<a class="button" href="pages/differentiation/differentiation.html"></a>
<!--end container--></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum