How to add links to images within HTML dynamically with JS?

Question

I have 50 divs like the below, and the image is not clickable. I would like to make the image clickable, depending on what link the div contains: it is always the href link in the article_title tag.

How can I achieve this with adding just a few lines of JavaScript?

I was thinking of adding an ID to each img tag manually, and then use getElementById and do some magic, but that would take too long.

<div class="col-md-4 article">
      <img src="7tips.jpg" alt="Canary Wharf" title="7 Tips For Lasting In Your Career" width="324" height="235"> 
      <div class="article_category">
         <a href=”http://www.canarywharfian.co.uk/forums/wealth-management/”>Wealth Management</a> 
      </div>
      <div class="article_meta">
         <h1 class="article_title"><a href="http://www.canarywharfian.co.uk/threads/7-tips-for-lasting-in-your-career.242/" rel="bookmark" title="7 Tips For Lasting In Your Career">7 Tips For Lasting In Your Career</a></h1>
         <div class="col-md-6 author_date"><a href="http://www.canarywharfian.co.uk/members/smallcappm.1140/">SmallCapPM</a> - <span class="date"> Mar 10, 2016</span></div>
         <div class="article_abstract">
            Many of you are hoping and planning for a long and successful career in finance...
         </div>
      </div>
   </div>

what do you mean by it would take too long? – Kaddath Feb 17 '17 at 08:22 — Kaddath, Feb 17 '17 at 08:22
I could save time if its only a few lines of JS – D. Richard Feb 17 '17 at 08:23 — D. Richard, Feb 17 '17 at 08:23

user218046 · Answer 1 · 2017-02-17T08:41:15.293

2

Maybe this (using jQuery):

<script>
    $(document).ready(function () {
        $('.block').each(function( index, value ) {
            let href = $(this).find('a[href]').attr('href');
            $(this).find('img').wrap('<a href=' + href + '></a>');
        });
    });
</script>

edited Feb 17 '17 at 08:41

answered Feb 17 '17 at 08:26

user218046

623
6
20

What should I put in place of "index, value"? I am asking bc I don't see them appear in the code below. – D. Richard Feb 17 '17 at 08:32
Nowhere. You may exclude them. – user218046 Feb 17 '17 at 08:33
And instead of .block I should put in the class name right? Isn't it a problem that it's not an ID? – D. Richard Feb 17 '17 at 08:36
Its a class name because you have many of those for who you want to change stuff. Oops I made a mistake: you should wrap image with new anchor tag not change its src attribute. Let me fix it now... – user218046 Feb 17 '17 at 08:39
Changed and tested. Now it should wrap the image in tag with its href attribute. – user218046 Feb 17 '17 at 08:44

score 0 · Answer 2 · answered Feb 17 '17 at 08:36

if you use jQuery, you can simply wrapping the images with element.

$(function(){
  // traversing all the images
  $('img').each(function(){
    // get the link by finding from parent
    var link = $(this).parent().find('.article_title a').attr('href');
    // replace the image with link + image
    $(this).replaceWith('<a href="' + link + '">' + $(this)[0].outerHTML + '</a>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="col-md-4 article">
      <img src="http://www.canarywharfian.co.uk/7tips.jpg" alt="Canary Wharf" title="7 Tips For Lasting In Your Career" width="324" height="235"> 
      <div class="article_category">
         <a href="http://www.canarywharfian.co.uk/forums/wealth-management/">Wealth Management</a> 
      </div>
      <div class="article_meta">
         <h1 class="article_title"><a href="http://www.canarywharfian.co.uk/threads/7-tips-for-lasting-in-your-career.242/" rel="bookmark" title="7 Tips For Lasting In Your Career">7 Tips For Lasting In Your Career</a></h1>
         <div class="col-md-6 author_date"><a href="http://www.canarywharfian.co.uk/members/smallcappm.1140/">SmallCapPM</a> - <span class="date"> Mar 10, 2016</span></div>
         <div class="article_abstract">
            Many of you are hoping and planning for a long and successful career in finance...
         </div>
      </div>
   </div>

This is very good, but it returns the href in the article_category div. I need the one in the article_title. — D. Richard, Feb 17 '17 at 08:39
I have another question. Can you tell me how can I remove the "canarywharfian.co.uk" part of the href in the article_category div dynamically? I need to remove that part otherwise if a user clicks canarywharfian.co.uk/canarywharfian.co.uk/path will load which is not ok. — D. Richard, Feb 17 '17 at 08:50
@D.Richard with this function, you can get the domain >> http://stackoverflow.com/a/23945027/7572603. then you just simply use that to edit href >> $('[href]').each(function(){ link = $(this).attr('href'); domain = extractDomain(link); new_href = link.replace(domain, ''); $(this).attr('href', new_href); }) — Fal, Feb 17 '17 at 08:58
This one loops through ALL the hrefs? I only need it for the first appearing one within the div. — D. Richard, Feb 17 '17 at 12:26

score 0 · Answer 3 · answered Feb 17 '17 at 08:37

Per your tag of vanila Javascript, what you can do is to search for and cache all your articles. Within each article search for anchor inside your title and set its href to a newly created anchor. Append the image into the newly created anchor and prepend it into your article.

A simple example (H1 font-size reduced for demo):

var articles = document.getElementsByClassName('article');

[].forEach.call(articles, function(article) {
 var image = article.querySelector('img:first-child');
 var title = article.querySelector('h1.article_title > a');
 var anchor = document.createElement('a');
 anchor.href = title.href;
 anchor.appendChild(image);
 article.insertBefore(anchor, article.firstChild);
});

h1 { font-size: 12px; }

<div class="col-md-4 article">
      <img src="//placehold.it/120x64" alt="Canary Wharf" title="7 Tips For Lasting In Your Career"> 
      <div class="article_category">
         <a href="example.com">Wealth Management</a> 
      </div>
      <div class="article_meta">
         <h1 class="article_title"><a href="//bing.com" rel="bookmark" title="7 Tips For Lasting In Your Career">7 Tips For Lasting In Your Career</a></h1>
         <div class="col-md-6 author_date"><a href="example.com">SmallCapPM</a> - <span class="date"> Mar 10, 2016</span></div>
         <div class="article_abstract">
            Many of you are hoping and planning for a long and successful career in finance...
         </div>
      </div>
</div>
<hr/>
<div class="col-md-4 article">
      <img src="//placehold.it/120x64" alt="Canary Wharf" title="7 Tips For Lasting In Your Career"> 
      <div class="article_category">
         <a href="example.com">Wealth Management</a> 
      </div>
      <div class="article_meta">
         <h1 class="article_title"><a href="//google.com" rel="bookmark" title="7 Tips For Lasting In Your Career">7 Tips For Lasting In Your Career</a></h1>
         <div class="col-md-6 author_date"><a href="example.com">SmallCapPM</a> - <span class="date"> Mar 10, 2016</span></div>
         <div class="article_abstract">
            Many of you are hoping and planning for a long and successful career in finance...
         </div>
      </div>
</div>

Notice, how the links to bing and google are picked up from the title anchors and inserted into a new anchor wrapping the images.

How to add links to images within HTML dynamically with JS?

3 Answers3