使用javascript在onmouseover和onmouseout中添加转换

时间:2017-01-20 16:03:59

标签: javascript html

我还是新手。如何在仍然使用标签的同时添加从更改picture1到picture2的转换?我还可以在脚本中添加第三个图像,这样当您将鼠标悬停在图片上时,它会显示三张图片而不是两张图片吗?这是我的代码

<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>

1 个答案:

答案 0 :(得分:0)

我希望它有效..

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>