CODEWITHSUNDEEP
cssimagehyperlink
simonTifo
simonTifo

Reputation: 307

change image link when hover the link css

I have this link : 

<a href = "" ><img src="images_cartographie/cartographie3_05.gif" width="207" height="47" alt=""></a></td>

and I want to change the image when the user over the link I tested : 

#planification:hover{
background-image:"images_cartographie/cartographie3_03.gif";
}

but the image doesn't change, it is ignored, (I tested background-color it works (then the problem isn't in url or ...))

when I use the background-image without hover like that : it doesn't appear : 

#planification{
background-image:"images_cartographie/cartographie3_03.gif";
}

NB : I generated the page with photoshop

do you have any idea

Upvotes: 0

Views: 13649

Answers (2)

Vucko
Vucko

Reputation: 20844

You can completely remove the img because you add the efect via CSS on the a tag.

HTML

<a href="" class="image_link"></a>

CSS

.image_link{
    display:block;
    width:800px;
    height:600px;
    background:url('http://ferringtonpost.com/wp-content/uploads/2012/07/Responsibilities-of-Owning-a-New-Puppy-Photo-by-bestdogsforkids.jpg');
}

.image_link:hover {
    display:block;
    width:800px;
    height:600px;
    background:url('http://25.media.tumblr.com/tumblr_m4frqhdW0k1rwpusuo1_1280.jpg');
}

JSFiddle.

Note that you must add dispay:block/inline-block to the a

Upvotes: 6

Ben
Ben

Reputation: 99

I'm a little confused about your question, but it sounds like you need to put in two different images. So, there's one image when you mouse over, and another image when you don't. You just put in a different path for the background-url on hover. Also, you should put in a plank gif in your img tag for backwards compatibility.

You should also use a self closing tag /> for your image. The tag is open the way that you posted it.

#planification
{
    background: url(images_cartographie/cartographie3_03.gif) 
}

#planification:hover
{
    background: url(images_cartographie/new_image_goes_here.gif) 
}

<a id="planification" href = "" ><img src="images_cartographie/blank.gif" width="207" height="47" alt=""/></a>

Upvotes: 0

Related Questions