Changing Image On Hover
Solution 2:
Here is a js/jquery solution
//should go inside your <head> tag
function onHover()
{
$("#menuImg").attr('src', 'images/aboutR.png');
}
function offHover()
{
$("#menuImg").attr('src', 'images/about.png');
}
html:
<div id="menu" >
<a href="#" id="home">
<img id="menuImg" src="images/about.png" alt="logo" onmouseover="onHover();"
onmouseout="offHover();" />
</a>
</div>
Here is a working example. Happy coding :)
Solution 3:
This works:
<html>
<head>
<title>Example</title>
<style type="text/css">
#menu {
width: 400px;
height: 142px;
margin-left: 353px;
margin-top: -70px;
padding-bottom: 16px;
}
#menu:hover {
background: url(lPr4mOr.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="menu">
<a href="#" id="home"><img src="lPr4m.png" alt="logo" /></a>
</div>
</body>
</html>
(Image names changed for my convenience making the page.)
Solution 4:
Remove the img
tag, and set the width and height of #home
(and any other menu item) to the width and height of the images.
Also, set the content to whatever the alt
of the image would be (for accessibility purposes), and then set the text-indent
property so it's moved offpage.
Currently, when you hover, it's changing the background image, but the img
tag is on top, and it always will be.
HTML
<div id="menu" >
<a href="#" id="home">Home</a>
</div>
CSS
#menu{
margin-left: 353px;
margin-top: -70px;
padding-bottom: 16px;
}
#home{
background:transparent url(images/about.png);
width: 400px;
height: 142px;
z-index:1;
text-indent: -9999em;
}
#home:hover{
background:url(images/aboutR.png);
z-index:2;
}
Solution 5:
you could do a:hover img{display:none} which would get rid of the img, idk about size issue bc you didnt specify the sizes. if i were you i'd either ditch the img element, use it as background-image for a element, then change it on :hover. or if you want the img element, use the clip property following the same principles as above
Post a Comment for "Changing Image On Hover"