Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: image hover

  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts

    image hover

    html
    Code:
    <a class="button" href="pages/differentiation/differentiation.html" target="_self"> Diff </a>
    CSS
    Code:
    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.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by ptrcao View Post
    html
    Code:
    <a class="button" href="pages/differentiation/differentiation.html" target="_self"> Diff </a>
    CSS
    Code:
    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?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    It could be you need
    Code:
    a.button:link{
    background: url(images/icons/differentiation-sprite.jpg);
    display: block;
    width: 195 px;
    height: 195 px;
    }
    ??
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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/hoverte...ion-sprite.jpg

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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-practi...s-image-hover/

  • #6
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    It could be you need
    Code:
    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/hoverte...ion-sprite.jpg

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

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by ptrcao View Post
    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-practi...s-image-hover/
    BAh, same crap as always. People have hidden so much spam and crap seo keywords with text-indent: -9999px; 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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    No, the validator definitely sees that.
    Try this -
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •