Changing Image On Hover

Question

I need a menu consisting of images and the images should change when someone hover around it. HTML

<aid="home"><imgclass="image_on"src="images/about.png"alt="logo" /><imgclass="image_off"src="images/aboutR.png"alt="logo" /></a>

CSS:

.image_off, #home:hover .image_on{
   display:none
}
.image_on, #home:hover .image_off{
   display:block
}

Solution 2:

Here is a js/jquery solution

//should go inside your <head> tagfunctiononHover()
{
    $("#menuImg").attr('src', 'images/aboutR.png');
}

functionoffHover()
{
    $("#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><styletype="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><divid="menu"><ahref="#"id="home"><imgsrc="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

Html5 Dev

Changing Image On Hover

Solution 2:

Solution 3:

Solution 4:

Solution 5:

Post a Comment for "Changing Image On Hover"