How do I link a hyperlink to an HTML5 image t

Question

This is a responsive HTML5 gallery that I've been working on recently. I just want each image to link to a different page.

<li> 

<div data-alt="img03" data-description="<h3>Project</h3>" data-max-width="1800" data-max-height="1350" > 
<div data-src="images/xxxlarge/1.jpg" data-min-width="1300"></div>


</div>

</li>

 I know that it should be as simple as adding a <a href="#"></a> but this isn't working. I am open to hear about other options. Thanks.

Answer 1

You can access the values in data-attributes (data-*) using .dataset (currently supported in all major browsers). I.e. to access the value of the attribute data-src of an element, you would write:

var srcValue = varHoldingElemNode.dataset.src;   // or
var srcValue = varHoldingElemNode.dataset["src"];

That said, you can use some JS to achieve what (I suppose) you want: turning a <div data-src=<url_to_image>... into an image linking to some page.

See, also, this short demo.