StackOverflow_16594265: how-do-i-link-a-hyperlink-to-an-html5-li-image-that-uses-data-attribues

Illustration of answer to http://stackoverflow.com/questions/16594265/how-do-i-link-a-hyperlink-to-an-html5-li-image-that-uses-data-attribues.

by ExpertSystem

HTML

<li> 
    <div data-alt="img01" data-description="<h3>Project</h3>" 
         data-max-width="1800" data-max-height="1350">
        <div class="imgDiv" data-src="pics/nature01855.jpg" data-min-width="1300"></div>
    </div>
</li>
<li> 
    <div data-alt="img02" data-description="<h3>Project</h3>" 
         data-max-width="1800" data-max-height="1350">
        <div class="imgDiv" data-src="pics/nature02061.jpg" data-min-width="1300"></div>
    </div>
</li>
<li> 
    <div data-alt="img03" data-description="<h3>Project</h3>" 
         data-max-width="1800" data-max-height="1350">
        <div class="imgDiv" data-src="pics/nature02068.jpg" data-min-width="1300"></div>
    </div>
</li>

CSS

img {
    width: 200px;
    height: 100px;
}

JavaScript

var contextRoot = "http://www.freeimageslive.com/galleries/nature/trees/";
var divs = document.getElementsByClassName("imgDiv");
for (var i = 0; i < divs.length; i++) {
    var url = contextRoot + divs[i].dataset["src"];
    var a = document.createElement("a");
    a.href = url;
    var img = document.createElement("img");
    img.src = url;

    divs[i].appendChild(a);
    a.appendChild(img);
}