Click here to Skip to main content
11,926,429 members (57,666 online)
Rate this:
Please Sign up or sign in to vote.
hi friends
I hope to help me to design rollover image button like this link[^]

you can see when mouse over the image, its rollover to other image smoothly.

can any one help me to do same thing

thanks Developer
Posted 18-Dec-12 8:04am
Edited 18-Dec-12 8:10am
Zoltán Zörgő 18-Dec-12 13:06pm
And what is hindering you to look at that page's code, and see how they built it? But as I see, they put both images one above the other, and they animate the opacity on hover.
Rate this: bad
Please Sign up or sign in to vote.

Solution 3

Hi please check below code,
$(document).ready(function () {
  $("#aMenu").hover(function () {
      opacity: 1
    }, 300);
  }, function () {
      opacity: 0
    }, 300);

Here is an html for one menu button:
  <a id="aMenu" href="/web-design/">
    <img style="position:absolute;" class="" src="greyImage.png">
    <img class="" src="colorImage.png" style="opacity: 0;">

This is very interesting. Actually there are two image overlapping one another. The colorful image is place below the grey image and its opacity is 0. So when user hover his mouse on the grey image(actually the a tag) the colorful image's opacity has be increased to 1 with jQuery animate() function. The process of animate function is given on top. The grey image's display property is set to inline. So when colored image's opacity is increased then it seems to come forward and make that effect. Please apply your creativity with this process and I hope you will make beautiful effect as well.

ALHAMDI.OMAN 19-Dec-12 5:49am
thanks this is a simple and easy solution
Sk. Tajbir 19-Dec-12 5:52am
Thanks :)
Monjurul Habib 16-Feb-13 13:21pm
Sk. Tajbir 16-Feb-13 13:52pm
Thanks :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.151126.1 | Last Updated 18 Dec 2012
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100