Huckster Huckster - 7 months ago 12
Javascript Question

Add href link to Image that has been displayed via js click

Similar to a question I asked recently but the previous was using mouse over so was rubbish for touch screen.

This is 3 divs with images. on click they individually change to a second image and reset the other 2 to a standard image. this all works ok.

But when the second image in any of the divs is active i would like to be able to click this image and navigate to a different page.

Clearly adding href to the html just navigates and ignores the JS effect.

Thanks for reading.

$(document).ready(function(){
$('#s1').click(function(){
$('#s1').attr('src', 'images/object/click-1.png');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s2').click(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/click-2.png');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s3').click(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/click-3.png');
});


});


<div id="section3" class="container-fluid" align="center">
<div class="row row-centered ">

<div id="top-box-1" class="col-sm-4">
<img src="images/object/standard-1.jpg" class="std" id="s1" width="300" height="300"/>
</div>


<div id="top-box-2" class="col-sm-4">
<img src="images/object/standard-2.jpg" class="std "id="s2" width="300" height="300"/>
</div>


<div id="top-box-3" class="col-sm-4">
<img src="images/object/standard-3.jpg" class="std" id="s3" width="300" height="300"/>
</div>

</div>
</div>

Answer

You can see if the src now contains 'click'. if not then swap the src and return false to stop the href:-

$('#s1').click(function(e) {
  if (!$(this).is('[src*="click"]')) {
    $('#s1').attr('src', 'images/object/click-1.png');
    $('#s2').attr('src', 'images/object/standard-2.jpg');
    $('#s3').attr('src', 'images/object/standard-3.jpg');
    return false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="section3" class="container-fluid" align="center">
  <div class="row row-centered ">

    <div id="top-box-1" class="col-sm-4">
      <a href="http://stackoverflow.com/">
        <img src="images/object/standard-1.jpg" class="std" id="s1" width="300" height="300" />
      </a>
    </div>


    <div id="top-box-2" class="col-sm-4">
      <a href="http://stackoverflow.com/">
        <img src="images/object/standard-2.jpg" class="std " id="s2" width="300" height="300" />
      </a>
    </div>


    <div id="top-box-3" class="col-sm-4">
      <a href="http://stackoverflow.com/">
        <img src="images/object/standard-3.jpg" class="std" id="s3" width="300" height="300" />
      </a>
    </div>

  </div>
</div>

To break this down: if (!$(this).is('[src*="click"]')) {

$(this).is allows you to check this against a selector, returning a boolean (true) if it does.

'[src*="click"]' is the selector to determine if the src attribute contains 'click'. Where the * means contains anywhere. There are other combinations like ^= for starts with.

Therefore $(this).is('[src*="click"]') means true if the src has 'click'. But you need to invert this to not contains. That's what the ! is for, meaning if this (the clicked element) has not got 'click' in the src.