Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript CSS HTML jQuery , +
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 8:04am
Edited 18-Dec-12 8:10am
v2
Comments
Zoltán Zörgő at 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 at 19-Dec-12 5:49am
   
thanks this is a simple and easy solution
Sk. Tajbir at 19-Dec-12 5:52am
   
Thanks :)
Monjurul Habib at 16-Feb-13 13:21pm
   
5+
Sk. Tajbir at 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
0 OriginalGriff 459
1 Maciej Los 325
2 Sergey Alexandrovich Kryukov 234
3 DamithSL 233
4 BillWoodruff 200
0 OriginalGriff 7,168
1 Sergey Alexandrovich Kryukov 6,377
2 DamithSL 5,461
3 Manas Bhardwaj 4,876
4 Maciej Los 4,450


Advertise | Privacy | Mobile
Web02 | 2.8.1411023.1 | Last Updated 18 Dec 2012
Copyright © CodeProject, 1999-2014
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