Click here to Skip to main content
12,395,645 members (73,318 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
http://www.artandcode.eu/services/[^]

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 7:04am
Updated 18-Dec-12 7:10am
v2
Comments
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
 
good
Please Sign up or sign in to vote.

Solution 3

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

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

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.

Thanks.
  Permalink  
Comments
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
   
5+
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
Web01 | 2.8.160721.1 | Last Updated 18 Dec 2012
Copyright © CodeProject, 1999-2016
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