I managed to create a code snippet that toggles between two images when clicked, thanks to some assistance from stackoverflow. However, I am now looking to add a link to the second image that redirects users to another webpage, like The App Store.
My question is how can I insert a link into the second image without interrupting the toggle effect that switches between the images?
Here is the jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$('#slick-toggle').click(function() {
$('img',this).attr('src', function(i, oldSrc) {
return oldSrc == 'img/button.png' ? 'img/applestoredownload.png' : 'img/button.png';
});
$('#slickbox').toggle(400);
return false;
});
});
</script>
Here is the relevant HTML structure:
<div class="co-download-app">
<div class="wrapper">
<div id="imageContainer">
<a href="#1" id="slick-toggle">
<img src="img/button.png"/>
</a>
</div>
</div>
</div>
If you have any suggestions on where I should insert the link for the second image to direct users to another webpage upon clicking, please let me know!