Log in

View Full Version : 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
http://img837.imageshack.us/img837/4831/meobay.gif
and

thankyou.gif
http://img258.imageshack.us/img258/6564/thankyouo.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:

<div id="rightCV">
<a href="Doc/WebDeveloper.pdf"><img src="CSS/images/meobay.gif"/></a>
</div>
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;


<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>


<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


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


#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;

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

My test page;

<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>