点击链接时如何切换图像

How can a image be switched when a link is tapped?

本文关键字：何切换 图像 链接      更新时间：2023-09-26

点击链接后应立即更改图像。如何使用javascript和html实现这一点？我已经尝试并收集了信息，并提出了代码

    <script type="text/javascript">
      function changeImage(element) {
      document.getElementById('imageReplaceTel').src = element;}
    </script>
<a href={{callphonenumber}} style="color:white" onclick="changeImage({{asset('bundles/testProject/images/telephoneSelected.png')}})">
    <img src="{{asset('bundles/testProject/images/telephone.png')}}" width="54px" height="54px" id="imageReplaceTel" alt="Images"></img></a>

我希望这能奏效，但失败了，我可能会错过一些东西，因为我是javascript的初学者。感谢

使用javascript和html，它看起来像这个

<script type="text/jscript">
function Changetheimage() {
    document.getElementById("img1").src = "imagefoldername/Imagename2.jpg";
}
</script>
</head>
<body>
<a onclick="Changetheimage()">click here</a>
<img src="imagefoldername/Imagename1.jpg" id="img1" alt="" />

注意事项："Img1"必须替换为要更改的图像的idjavascript中的"imagefoldername/Imagename2.jpg"必须更改为要显示的新图像的目录并且"imagefoldername/Imagename1.jpg"必须更改为当前显示的图像

最好的方法是使用图像精灵。点击只需通过javascript更改精灵坐标。

相关文章：