0

Can anyone please suggest me a plugin which would change the background image/ image on hovering over different buttons?

there are three buttons and a corresponding image for every one of them. so when i hover over them, the image behind these buttons should change. I am stuck badly!

prawwe316
  • 225
  • 1
  • 6
  • 17

3 Answers3

1

This is the easiest way: Fiddle, and it uses this sprite sheet: https://i.stack.imgur.com/OWeVC.png

There are two ways to do this. The lightweight way is to use CSS, like so:

#mylink-1 {
  background: transparent url('/img/my-img.png') 0 0 no-repeat;
}

  #mylink-1:hover {
    background: transparent url('/img/my-img-over.png') 0 0 no-repeat;
  }

#mylink-2 {
  background: transparent url('/img/my-img-2.png') 0 0 no-repeat;
}

  #mylink-2:hover {
    background: transparent url('/img/my-img-2-over.png') 0 0 no-repeat;
  }

Or, using a sprite sheet:

#mylink-1 {
  background: transparent url('/img/my-img.png') 0 0 no-repeat;
}

  #mylink-1:hover {
    background: transparent url('/img/my-img-over.png') 0 -20px no-repeat;
  }

The second way is JavaScript. If you're using jQuery:

$('#mylink-1').on('hover', function() {
  $(this).css({ background: 'transparent url("/img/my-img-over.png") 0 0 no-repeat' });
});

If you have lots of them, and name the images with numbers or use sprites, you can do something like this:

var i = 1;

// Non-sprite
#('.mylinks').each(function() {
  $(this).css({ background: "transparent url('/img/my-img-' + i +'-over.png') 0 0 no-repeat" });
  i++;
});

var i = 0;

// Using sprites
#('.mylinks').each(function() {
  $(this).css({ background: "transparent url('/img/my-img-over.png') 0 ' + i + 'px no-repeat" });
  i -= 20;
});
Chris Clower
  • 5,036
  • 2
  • 18
  • 29
  • @prawwe316 I added the fiddle to the top of the post. Hope this helps! – Chris Clower Dec 05 '13 at 07:29
  • thanks chris.. i appreciate your help. I think i didnt explain the problem correctly... there are these three buttons i am using in the jumbotron. and when i hover over them, the image in the jumbotron is supposed to change – prawwe316 Dec 05 '13 at 07:57
0

You can browse through 100's of examples when you google tour ques.. Anyhow i suggest you to lookaroud the following questions might help you.. 1,2,3

Community
  • 1
  • 1
Santhosh
  • 8,181
  • 4
  • 29
  • 56
0

Why dont you do this in css?

#button1:hover
{
    background: url(/image/btn1.png) no-repeat;
}
#button2:hover
{
    background: url(/image/btn2.png) no-repeat;
}
#button3:hover
{
    background: url(/image/btn3.png) no-repeat;
}
JTN
  • 229
  • 5
  • 13
  • i dont need to change image of the button.. i need to change the background image of jumbotron when you hover over these buttons – prawwe316 Dec 05 '13 at 07:26