How to make an HTML class containing links a link?

Question

The image and caption, in class story has two different links. Image points to one location and link to another.

I need to make whole class story into a link.

<div class="story">
<a href="link"> <img src="linkforimage"></a> 
<a href="link2">Caption for image </a>
</div>

I need a solution like this:

<a href="link">
  <div class="story">
    <a href="link"> <img src="linkforimage"></a> 
    <a href="link2">Caption for image </a>
  </div>
</a>

So you already have the solution? Can you clarify a bit more as to your desired result? — scniro, Jun 23 '15 at 19:53
Try [looking here][1] for using JS or jQuery [1]: http://stackoverflow.com/questions/1685078/how-do-you-make-a-div-tag-into-a-link — Pigasus, Jun 23 '15 at 19:54
I have tried wraping whole class in but it doesnt working. Need a solution in Js, will try onclick. Thanks — abzalassembekov, Jun 23 '15 at 19:57
Do you mean "image points to one location and **caption** to another."? — light, Jun 23 '15 at 19:59
You said: *I need to make whole class "story" as **a** link.* So do you need ONE link or TWO links? — light, Jun 23 '15 at 20:00
Image points to one link, caption to another. I need to make image to be linked to the same location. I know it sounds stupid, cause I can just change link, but I use embedly platform which parses image from the "link" which is original article. Link2 is a same article on my web site. — abzalassembekov, Jun 23 '15 at 21:16
With onclick(), image still points to "link", where I need it to point to "link2" — abzalassembekov, Jun 23 '15 at 21:17

Koen Peters · Answer 1 · 2015-06-23T20:03:15.173

2

Nesting a tags is a bad idea. I would use a delegate here. Have a wrapper a tag and in JS check which source span was clicked.

html

<a href="#" class="story">
    <span data-href="link"><img src="linkforimage"/></span> 
    <span data-href="link2">Caption for image</span>
</a>

js (jquery based)

$('.story').on('click', 'span', function() {
  document.location.href= $(this).data('href');
});

edited Jun 23 '15 at 20:03

answered Jun 23 '15 at 19:57

Koen Peters

12,798
6
36
59

The problem I am facing right now is that I am using embedly platform, where image comes from . So, I just post with link and image are parsed from the link by embedly. But, that ahref takes user to original web site. Caption takes user to the page with that content on my web site. I need to make of caption to the whole div. Hope you can help me out, thanks. – abzalassembekov Jun 23 '15 at 21:07
In that case I'd just JavaScript to rewrite the href of the image link. `$('.story a').attr('href', 'link')`. This sets the link of all `a` tags within the `story` div to the right link – Koen Peters Jun 23 '15 at 22:29

Anoop · Answer 2 · 2015-06-23T22:50:35.850

0

You can't have anchor tag inside anchor tag. You can use onclick method to achieve your goal.

<div onClick="window.open(link);" class="story">
<a> <img src="linkforimage"></a> 
<a onClick="window.open(link2); event.stopPropagation();" >Caption for image </a>
</div>

EDIT jsfiddle

edited Jun 23 '15 at 22:50

answered Jun 23 '15 at 19:56

Anoop

23,044
10
62
76

Tried this, but when user clicks on image, it goes to "link" where I need to make whole class "story" to be "link2" same as caption. – abzalassembekov Jun 23 '15 at 21:08
The problem I am facing right now is that I am using embedly platform, where image comes from . So, I just post with link and image are parsed from the link by embedly. But, that ahref takes user to original web site. Caption takes user to the page with that content on my web site. I need to make of caption to the whole div. Hope you can help me out, thanks. – abzalassembekov Jun 24 '15 at 12:33

score 0 · Answer 3 · answered Jun 24 '15 at 14:47

Clarifying the problem I am facing right now is that I am using embedly platform, where image comes from . So, I just post with link and image are parsed from the link by embedly. But, that ahref takes user to original web site. Caption takes user to the page with that content on my web site. I need to make of caption to the whole div.

So, I found the answer with CSS, I just added: style=" pointer-events: none;cursor: default;" on the link with image and style="cursor: pointer;" onclick="window.location='link'" on a class "story" in div.

How to make an HTML class containing links a link?

3 Answers3