Changing image on hover

Question

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

HTML

<div id="menu" >  
    <a href="#" id="home"><img  src="images/about.png" alt="logo" /></a>
</div>

CSS

#menu {
        margin-left    : 353px;
        margin-top     : -70px;
        padding-bottom : 16px;
}

#home {
        background     : transparent url(images/about.png);
        z-index        : 1;
}

#home:hover {
        background     : url(images/aboutR.png);
        z-index        : 2;
}

The problem I am facing is that when I hover around the menu item, the image to be displayed on hover is displayed at the back of the old image. Moreover, the hover background image displayed is very small in width and height. Please help out. Thanks

yes. You could go with plain javascript but jquery will be easier. You'll be able to map efficiently your effects, actions, and so on. With css you would only look for things bordering hacks but menu and navigation end to be much more than just images on hover. — Denys Séguret, Jun 04 '12 at 19:11
I read a good article about it, it [here](http://www.onderhond.com/blog/work/changing-html-images-on-hover/) — , Jun 04 '12 at 19:12
Just Google ["CSS Sprites"](http://www.google.com/search?rls=en&q=CSS+Sprites&ie=UTF-8&oe=UTF-8). — Sparky, Jun 04 '12 at 19:13
**Quote OP:** _"The orange one(About Us) is the hover image..."_ - I don't see anything orange. — Sparky, Jun 04 '12 at 19:16
@Sparky672 It might be easier with OPs markup to switch out the img source with js events. — Nick Rolando, Jun 04 '12 at 19:22
@Shredder: Yes, I think I should go for jQuery. Would have to read a little. I have done jQuery but its been a while. — , Jun 04 '12 at 19:33
@Shredder: Thanks for mentioning jQuery. Just did that with jQuery. Thanks again. — , Jun 04 '12 at 19:47

score 28 · Answer 1 · edited Oct 18 '18 at 00:54

28

As previously stated, no need for a JS solution.

Another way of doing it is by loading both images and hiding/showing them with the :hover event. Something like this:

HTML:

<a id="home"><img class="image_on" src="images/about.png" alt="logo" /><img class="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
}

edited Oct 18 '18 at 00:54

mrj

849
2
8
18

answered Jun 04 '12 at 20:47

Pablo Rincon

999
10
23

1

This works nice. Can be added there the width of the imaged used so the hove be more precise! – Valentin Vrinceanu May 29 '13 at 20:52

score 18 · Answer 2 · answered Jun 04 '12 at 19:38

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

score 4 · Accepted Answer · answered Jun 04 '12 at 19:48

Place this code just before the closing body tag,

<script  type='text/javascript'>
$(document).ready(function(){
    $(".home").hover(
        function() {$(this).attr("src","images/aboutR.png");},
        function() {$(this).attr("src","images/about.png");
    });
});
</script>

place the class home in the img tag. Done. Works perfectly.

score 3 · Answer 4 · answered Jun 04 '12 at 19:38

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

score 2 · Answer 5 · edited Jun 04 '12 at 19:14

2

You're calling <img src="images/about.png" alt="logo" /> twice, once in the html and once in the css. I suggest deleting the html and strictly using css background image. You don't need the z-index either.

edited Jun 04 '12 at 19:14

Sparky

98,165
25
199
285

answered Jun 04 '12 at 19:12

Keith

1,364
1
8
18

score 2 · Answer 6 · answered Jun 04 '12 at 19:12

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

Even if I am specifying the width and height, the background is displayed **just for the text written inside a tag** — , Jun 04 '12 at 19:23

score 2 · Answer 7 · answered Jun 04 '12 at 19:13

2

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

answered Jun 04 '12 at 19:13

albert

8,112
3
47
63

Instead of `display: none` it should be `visibility: hidden` in order to preserve the size of the box since his width and height aren't explicitly given. – Josh Allen Jun 04 '12 at 19:14

score 2 · Answer 8 · answered Jun 04 '12 at 20:18

2

you need to use position rule while using a z-index rule. Try adding position:relative where you used z-index.

answered Jun 04 '12 at 20:18

maksbd19

3,785
28
37

score 1 · Answer 9 · answered Jun 04 '12 at 21:22

are you just trying to make a simple image rollover? without seeing a working example i can't make out exactly what you're trying to do, but image rollovers are simple to do with CSS sprites, no jquery needed and this makes for a much more bulletproof website. it also makes your website respond faster because the default and over state images are the same image, no preload code necessary.

if you need a mapped image (rather than a full swap out) this can be accomplished with a background image, a container div and png-24 graphics (javascript required to make png-24s work in IE6, but who cares about supporting IE6 anymore anyway?).

a good way to change out nav images without resorting to javascript is by using the background-position property, like so:

    // define your container element
    #nav-home {  
         margin: 20px 5px;  
         height: 15px; 
         width: 40px;
          }

    // use a descendant selector to style the <a> tag
    #nav-home a { 
         background-image: url("/images/buttons-nav.gif"); 
         display: block; // THIS IS VERY IMPORTANT!!
         background-position: 0 0;  // the first number is horizontal placement, the second is vertical placement. at 0 0 it is positioned from the top left corner
         height: 15px; 
         }

    // this is where you change the position of the background for the hover state
    #nav-home a:hover { 
         background-position: -20px 0; //this moved it 20px to the right 
         }

and your html code would look like this:

    <div id="nav-home"><a href="/yourlink/"><img src="/images/transparent.gif" alt="home" height="100%" width="100%;"></a>
    <!-- uses a 1px transparent gif to "hold" the place of the actual clicked item -->

your image would actually contain BOTH on and off states, like this: http://www.w3schools.com/css/img_navsprites_hover.gif then all you are doing is moving the image to one side to show the :hover state. (code example at http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav). you are basically making a window with a container div, then only showing a portion of the actual background image.

also, stay away from using :hover on anything but an tag as not all browsers support use of :hover on block level elements.

score 0 · Answer 10 · answered Aug 27 '19 at 04:49

0

And now for the simple way:

<img id=logo src=img1.png onmouseover=logo.src='img2.png' onmouseout=logo.src='img1.png'>

This HTML will change the image to a new picture on mouse over and turn it back to the first picture on mouse out.

answered Aug 27 '19 at 04:49

Sean H. Worthington

1,701
15
9

changing from the id name to this also works without duplicating id's. i.e. onmouseover=this.src='img2.png' – Robolisk Apr 29 '20 at 20:07

Changing image on hover

HTML

CSS

10 Answers10

Linked