How to rollover another image on my current image by CSS

**thientanchuong** · 11-10-2010, 10:49 AM

I have 2 different images:

meobay.gif

and

thankyou.gif

My problem is when an user move his mouse over the image of meobay.gif, my code can not change meobay.gif to thankyou.gif

Please help me out with my code:

HTML:

CSS:

#rightCV{
position: absolute;
right: 270px;
margin-top:87px;
}
img {
width:230px;
height:170px;
border: none;
background-repeat:no-repeat;
}
img:hover{
background-image: url(images/thankyou.gif);
border: none;
}

**Beverleyh** · 11-10-2010, 01:14 PM

Try using a div with a background image instead;

Code:

<style type="text/css">
div#mypic a {
width:280px;
height:300px;
background: url("meobay.gif") 0 0 no-repeat; 
}
div#mypic a:hover { 
background: url("thankyou.gif") 0 0 no-repeat; 
}
</style>

Code:

<div id="rightCV">
<div id="mypic"><a href="Doc/WebDeveloper.pdf"></a></div>
</div>

**thientanchuong** · 11-10-2010, 11:53 PM

thank you for your advise, unfortunately, it is not working and there is not any pic after I applied the code

#rightCV {
position: absolute;
right: 230px;
margin-top:87px;
}
#mypic a {
width:280px;
height:300px;
background: url("images/meobay.gif") 0 0 no-repeat;
}
#mypic a:hover {
background: url("images/thankyou.gif") 0 0 no-repeat;
}

**Beverleyh** · 11-11-2010, 11:25 AM

I tested the code and it works fine for me - try checking the paths and/or use absolute references.

Also try adding positioning elements into the CSS for the image;

Code:

position: absolute;
top: 0px;
left: 0px;

My test page;

Code:

<html>
<head>
<title>Image Swop</title>
<style type="text/css">
div#mypic a {
width:300px;
height:280px;
background: url("http://img837.imageshack.us/img837/4831/meobay.gif") 0 0 no-repeat; 
}
div#mypic a:hover { 
background: url("http://img258.imageshack.us/img258/6564/thankyouo.gif") 0 0 no-repeat; 
}
</style>
</head>
<body>
<div id="rightCV">
<div id="mypic"><a href="Doc/WebDeveloper.pdf"></a></div>
</div> 
</body>
</html>

Thread: How to rollover another image on my current image by CSS

Thread Tools

Search Thread

How to rollover another image on my current image by CSS

Bookmarks

Bookmarks

Posting Permissions