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

**alcatraz678** · Jan 27, 2009 11:05

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>

**molona** · Jan 27, 2009 14:50

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.

**canassassin** · Jan 28, 2009 01:18

Originally Posted by molona

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

**molona** · Jan 28, 2009 03:19

Why a div? why not styling the A element instead? I think this would be more semantic, for start.

**molona** · Jan 28, 2009 03:22

Originally Posted by alcatraz678

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

**canassassin** · Jan 28, 2009 10:13

Originally Posted by molona

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.

**molona** · Jan 28, 2009 10:23

Originally Posted by canassassin

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.

**canassassin** · Jan 28, 2009 10:30

Originally Posted by molona

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.

**bulevardi** · Feb 2, 2009 03:29

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>

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions