SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to change the image when the user hover the link?

    Hey guys, I've been trying a lot of combinations of CSS code but still have no success. I want the vistanothovered to change to vistahovered image using CSS.

    So I coded a#win:hover { background-image{../image/vistahovered.png} but it failed to change the image.

    Please give me tips guys!!

    Code:
    HTML:
    <div id="dashboard">
    	<h2 id="dashHead"><span class="red">Cliente</span>, Please select your preferred system:</h2>
        
        <p id="systems">
       	 	<a id="win" href=""><img src="images/vistanothovered.png" /></a>
    		<a id="mac" href=""><img src="images/Apple256.png" /></a>
        </p>
        
    </div>

  2. #2
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,177
    Mentioned
    233 Post(s)
    Tagged
    1 Thread(s)
    You can do it by using background images, as an example. If you are trying to change the src from an image, you need to use a programming language.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by molona View Post
    You can do it by using background images, as an example. If you are trying to change the src from an image, you need to use a programming language.
    Correct, but explaining how he could do it would be more helpful.

    I'm sure you were quite close to properly creating the affect you want, but I think the one error you are making is placing the image using an src attribute. You can use the following code for example:
    Code:
    <html>
    <head>
    <style type="text/css">
    #randomlink {
    width:400px;
    height:400px;
    background-image: url(images/vistanothovered.png);
    }
    #randomlink:hover {
    background-image: url(images/vistahovered.png);
    }
    </style>
    </head>
    <body>
    <div id="randomlink">
    <br  />
    </div>
    </body>
    </html>
    Simply set the height and width of your div if you want to, or position your image using the background-position attribute. If I understand you correctly, this should do what you want.

    Hope this helps

  4. #4
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,177
    Mentioned
    233 Post(s)
    Tagged
    1 Thread(s)
    Why a div? why not styling the A element instead? I think this would be more semantic, for start.

  5. #5
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,177
    Mentioned
    233 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by alcatraz678 View Post
    So I coded a#win:hover { background-image{../image/vistahovered.png} but it failed to change the image.
    I have to say that I missed this bit. You can't simply give a background image to the A element. If you don't add anything between the open tag and the closing tag, it will have no size. Therefore, it would be good if you could specify a height and a width, so it knows how much room it should take. That should work. If it doesn't, let me know and I will have a look when I am at my computer

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by molona View Post
    Why a div? why not styling the A element instead? I think this would be more semantic, for start.
    Just using it as an example. There are lots of ways to do things, and it should still give alcatraz an idea of what he needs to do.

  7. #7
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,177
    Mentioned
    233 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by canassassin View Post
    Just using it as an example. There are lots of ways to do things, and it should still give alcatraz an idea of what he needs to do.
    I am re-reading my post and I hope it didn't sound like I was starting an argument or anything. I realize that now that it could be taken as a bit agressive. I was asking just out of curiosity. After all, Alcatraz was talking about links in particular and that's why the div caught my attention.

    You are right. There are thousands of ways to do this.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by molona View Post
    I am re-reading my post and I hope it didn't sound like I was starting an argument or anything. I realize that now that it could be taken as a bit agressive. I was asking just out of curiosity. After all, Alcatraz was talking about links in particular and that's why the div caught my attention.

    You are right. There are thousands of ways to do this.
    mb, thought you were purposly trying to point out that it was wrong. No problem, and yah a link would work as well. No hard feelings.

  9. #9
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And what about something like:

    <style>
    .apple img, .win img { width: 50px; height: 50px; }
    .apple img:hover { background-image: url(images/apple2.png); }
    .win img:hover { background-image: url(images/win2.png); }
    </style>

    <ul>
    <li class="win"><a id="win" href=""><img src="images/vistanothovered.png" /></a></li>
    <li class="apple"><a id="mac" href=""><img src="images/Apple256.png" /></a></li>
    </ul>


Bookmarks

Posting Permissions

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