Add transition in onmouseover and onmouseout using javascript

Question

i am still new to this. how do i add transition from changing picture1 to picture2 while still using a tag? can i also add a third image to the script so that when you hover on the picture, it shows you three pictures instead of two? here is my code

<html>
<body>
    <img src = "picture1.jpg" onmouseover="rollover(this)" onmouseout="mouseaway(this)">
</body>
<script type="text/javascript">
    function rollover(my_image)
    {my_image.src = 'picture2.jpg';}
    function mouseaway(my_image)
    {my_image.src = "picture1.jpg";}
</script>
</html>

Answer 1

I hope it works..

 function rollover(my_image){ my_image.style.width = "200px"; my_image.style.transition = "width 2s, height 4s"; my_image.src = 'http://lorempixel.com/100/100/'; } function mouseaway(my_image){ my_image.style.width = "50px"; // my_image.style.opacity = "0.5"; my_image.src = "http://lorempixel.com/50/50/"; }

 <html> <body> <img src = "http://lorempixel.com/50/50/" onmouseover="rollover(this)" onmouseout="mouseaway(this)"> </body> </html>

Add transition in onmouseover and onmouseout using javascript

Question

1 answers

solution1
0 2017-01-20 16:33:41

Add transition in onmouseover and onmouseout using javascript

Question

1 answers

solution1 0 2017-01-20 16:33:41

solution1
0 2017-01-20 16:33:41