CODEWITHSUNDEEP
javascriptjqueryhtml
Jerry Svensson
Jerry Svensson

Reputation: 277

Change image in element Onclick

I have an a href element with an image - and another links with an image.

I want to swap the target image with the image from the clicked link.

Target: 

<div class="mainPicture">
 <img src="/img/0~7183AF0F-799A-4248-A9B0-848F038DE194~400~300~1" class="photo" alt="MC812-REF">
</div>

Links: 

<li>  
  <a rel="colorboxRel1930551650" href="/img/0~C19CB486-F38E-4F27-999F-200B35EFB916~640~480~1" class="testColorbox cboxElement" onclick="return false;">   
 <img src="/img/0~C19CB486-F38E-4F27-999F-200B35EFB916~70~70~1" alt="Närbild" title="Närbild">  
 </a>
</li>

<li>  
 <a rel="colorboxRel1930551650" href="/img/0~E1E5892F-0A22-4DA0-A9F8-3A93C4461125~640~480~1" class="testColorbox cboxElement" onclick="return false;">    
 <img src="/img/0~E1E5892F-0A22-4DA0-A9F8-3A93C4461125~70~70~1" alt="Höger vinkel" title="Höger vinkel">  
 </a>
</li>

How do I do this with jQuery or Vanilla Js?

Upvotes: 0

Views: 244

Answers (3)

Carl Edwards
Carl Edwards

Reputation: 14434

$("a").on("click", function() {
  $(this).siblings("img").first().attr("src", this.getAttribute("href"));
});

Pure JS

document.addEventListener("DOMContentLoaded", function() {
  var links = document.getElementsByTagName("a");

  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener("click", function(e) {
      e.preventDefault();

      this.firstElementChild.setAttribute("src", this.getAttribute("href"));
    });
  }
});

Upvotes: 1

CherryDT
CherryDT

Reputation: 29012

First, let's give the target an ID for easier usage in vanilla JS:

<div class="mainPicture">
    <img id="targetImg" src="/img/0~7183AF0F-799A-4248-A9B0-848F038DE194~400~300~1" class="photo" alt="MC812-REF">
</div>

You could then use:

<li>  
    <a rel="colorboxRel1930551650" href="/img/0~C19CB486-F38E-4F27-999F-200B35EFB916~640~480~1" class="testColorbox cboxElement" onclick="document.getElementById('targetImg').src = this.childNodes[0].src; return false;">   
        <img src="/img/0~C19CB486-F38E-4F27-999F-200B35EFB916~70~70~1" alt="Närbild" title="Närbild">  
    </a>
</li>

<li>  
    <a rel="colorboxRel1930551650" href="/img/0~E1E5892F-0A22-4DA0-A9F8-3A93C4461125~640~480~1" class="testColorbox cboxElement" onclick="document.getElementById('targetImg').src = this.childNodes[0].src; return false;">    
        <img src="/img/0~E1E5892F-0A22-4DA0-A9F8-3A93C4461125~70~70~1" alt="Höger vinkel" title="Höger vinkel">  
    </a>
</li>

...However I'm not sure how your href and rel attributes are supposed to work there.

For a jQuery solution, it would probably be best to leave to onclick alone and use this JavaScript code:

$(function() {
    $("a.testColorbox.cboxElement").click(function() {
        $(".mainPicture img").attr("src", $("img", this).attr("src"));
    });
});

Upvotes: 1

Velimir Tchatchevsky
Velimir Tchatchevsky

Reputation: 2815

You can use the jQuery .attr() method 

    $("li a").click(function(){
       $(".mainPicture img").attr("src", $("img", this).attr("src"));
    });

Documentation: http://api.jquery.com/attr/

Upvotes: 3

Related Questions