<html>
<head>
<meta charset=utf-8>
<title></title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li><a href="images/1 (1).png" title="picture1" alt="picture1">picture1</a></li>
<li><a href="images/1 (2).png" title="picture2" alt="picture2">picture2</a></li>
<li><a href="images/1 (3).png" title="picture3" alt="picture3">picture3</a></li>
</ul>
<img src="images/placeholder.png" alt="my image gallery" >
<p >Choose an image</p>
<script>
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof oldonload != 'function') {
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
function prepareGallery(){
if (!document.getElementsByTagName || !document.getElementById) return false;
links = document.getElementsByTagName("a");
for (var i = 0,j = links.length;i<j; i++) {
links[i].onclick = function(){
return !showPic(this);
}
}
}
function showPic(whichPic){
if (!document.getElementById("placeholder")) return false;
var source = whichPic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
if (placeholder.nodeName != "IMG") return false;
placeholder.setAttribute("src",source);
if (document.getElementById("description")) {
var text = whichPic.getAttribute("title");
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
}
return true;
}
addLoadEvent(prepareGallery);
</script>
</body>
</html>