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

2017-02-17 08:22:09 +00:00
Commented Feb 17, 2017 at 8:22 — Kaddath
– Kaddath, Commented Feb 17, 2017 at 8:22
I could save time if its only a few lines of JS

D. Richard
– D. Richard

2017-02-17 08:23:31 +00:00
Commented Feb 17, 2017 at 8:23 — D. Richard
– D. Richard, Commented Feb 17, 2017 at 8:23
you could use a for loop

Liam
– Liam

2017-02-17 08:24:59 +00:00
Commented Feb 17, 2017 at 8:24 — Liam
– Liam, Commented Feb 17, 2017 at 8:24

user218046 · Accepted Answer · 2017-02-17 08:41:15Z

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, 2017 at 8:41

answered Feb 17, 2017 at 8:26

user218046

6438 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

D. Richard Over a year ago

What should I put in place of "index, value"? I am asking bc I don't see them appear in the code below.

user218046 Over a year ago

Nowhere. You may exclude them.

D. Richard Over a year ago

And instead of .block I should put in the class name right? Isn't it a problem that it's not an ID?

user218046 Over a year ago

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 Over a year ago

Changed and tested. Now it should wrap the image in <a> tag with its href attribute.

Fal · Accepted Answer · 2017-02-17 08:36:03Z

0

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>

answered Feb 17, 2017 at 8:36

Fal

1346 bronze badges

5 Comments

D. Richard Over a year ago

This is very good, but it returns the href in the article_category div. I need the one in the article_title.

D. Richard Over a year ago

You are a god. Thanks so much.

D. Richard Over a year ago

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.

Fal Over a year ago

@D.Richard with this function, you can get the domain >> 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); })

D. Richard Over a year ago

This one loops through ALL the hrefs? I only need it for the first appearing one within the div.

Abhitalks · Accepted Answer · 2017-02-17 08:37:24Z

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.

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related