Using jQuery
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$('#btnImageToLinkConvert').live('click', function () {
for (var i = 1; i <= $("img").length; i++) {
$("<a>", {
text: "Click here to view " + $("#img" + i).attr("src"),
id: "anchor" + 1,
href: ($("#img" + i).attr("src")).substr(5, $("#img" + i).attr("src").length)
}).appendTo("#div1");
$("<p></p>").appendTo("#div1");
}
$("img").remove();
return false;
});
</script>
</head>
<body>
<form id="form1" runat="server">
<br />
<div id="divImages">
<img id="img1" src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" height="100"
width="100" alt="Alternate Text" />
<img id="img2" src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" height="100"
width="100" alt="Alternate Text" />
<img id="img3" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" height="100"
width="100" alt="Alternate Text" />
<img id="img4" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" height="100"
width="100" alt="Alternate Text" />
</div>
<br />
<div id="div1">
</div>
<button id="btnImageToLinkConvert">
Convert Image to Link
</button>
</form>
</body>
</html>
Demo
Using JavaScript
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
<script type="text/javascript">
function ImageToLinkConvert() {
var images = document.getElementsByTagName("img");
//debugger;
for (var i = 0; i < images.length; i++) {
var anchor = document.createElement("a");
var span = document.createElement("span");
span.innerHTML = "<br>";
anchor.setAttribute("id", "anchor" + i);
anchor.setAttribute("href", images[i].src);
var source = (images[i].src);
var image = source.substr(7, source.length);
var text = document.createTextNode(image);
anchor.appendChild(text);
document.getElementById("div1").appendChild(anchor);
document.getElementById("div1").appendChild(span);
}
document.getElementById("divImages").innerHTML = '';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<br />
<div id="divImages">
<img id="img1" src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" height="100"
width="100" alt="Alternate Text" />
<img id="img2" src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" height="100"
width="100" alt="Alternate Text" />
<img id="img3" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" height="100"
width="100" alt="Alternate Text" />
<img id="img4" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" height="100"
width="100" alt="Alternate Text" />
</div>
<br />
<div id="div1">
</div>
<button id="btnImageToLinkConvert" onclick="ImageToLinkConvert();return false;">
Convert Image to Link
</button>
</form>
</body>
</html>
Demo
