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

StackOverflow https://stackoverflow.com/questions/18352999

Question

The image should be changed as soon as the link is tapped. How can I realise this with javascript and html? I have tried and gathered information and come up with the code 

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

I was hoping this would work but it failed, I might be missing something as I am a beginner with javascript. Thanks

Was it helpful?

Solution

using javascript and html it would look like this

<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="" />

Notes: "Img1" must be replaced with the id of the image you want to change "imagefoldername/Imagename2.jpg" in the javascript must be changed to the directory of the new image you want to display and "imagefoldername/Imagename1.jpg" must be changed to the image currently displaying

OTHER TIPS

best way to do it will be with image sprite.onclick just change sprite coordinates through javascript.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top