Can javascript (without flash) make a rollover effect like this? http://www.templatemonster.com/flash-templates/35762.html

    3 answers 3

    Yes. Easy:

    $('image').mouseover(function(){animate({height: 0},200)});

    This is in brief. =)

     <div class='imgcontainer'> <img src='pantera1.jpg' style='height: 0' /> <img src='pantera2.jpg' style='height: 200px' /> </div> <script> $('.imgcontainer').mouseover(function(){ $(this).children('img').first().animate({height:'200px'},200); $(this).children('img').last().animate({height:'0'},200); }).mouseout(function(){ $(this).children('img').last().animate({height:'200px'},200); $(this).children('img').first().animate({height:'0'},200); }); </script>

    This is completely for one die. Dice can be any number.
    If nowhere was wrong, it should work.
    200px change to the real height of the picture

    • Well, completely - something like that. Requires jquery. - knes
    • one
      it is advisable to put the .imgcontainer {overflow: hidden;} into the div-style for the div block — Sep
    • The console does not show errors, but the script does not work. - Tchort

    You can do this using CSS3, without JS

    • tell me how? :) - Tchort

    css3 for example

     #image{-webkit-transition: all 1s ease-in-out;} #image:hover {-webkit-transform: rotate(360deg) scale(2);}