!--the HTML
<div id="folioNav">
<ul id="imageGallery">
<li><a href="jm_images/bravado.gif" title="Bravado" ><img src="jm_images/bravadoThumb.gif" border="0" /></a></li>
<li><a href="jm_images/joseySleeps.gif" title="My Dog Josey"><img src="jm_images/joseyThumb.gif" border="0" /></a></li>
<li><a href="jm_images/planecrash_Finalcolor.gif"  title="The Spirit Rabbit"><img src="jm_images/planecrashThumb.gif" border="0"/></a></li>
<li><a href="jm_images/lion.gif"  title="The Zoo Keeper"><img src="jm_images/lionThumb_03.gif" border="0"/></a></li>
</ul>
</div>

<div id="folioContent">
<img id="placeholder" src="jm_images/webTease.jpg" alt="My Image Gallery" /><p id="description">Choose an image.</p> 
</div>

!--the JavaScript

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

function insertAfter(newElement,targetElement) {
	var parent = targetElement.parentNode;
	if(parent.lastChild == targetElement) {
		parent.appendChild(newElement);
	} else {
		parent.insertBefore(newElement,targetElement.nextSibling);
	}
}
function preparePlaceholder() {
	if (document.createElement) return false;
	if (document.createTextNode) return false;
	if (document.createElementById) return false;
	if (document.createElementById("imageGallery")) return false;
	var placeholder = document.createElement("img");
	placeholder.setAttribute("id","placeholder");
	placeholder.setAttribute("src","jm_images/webTease.gif")
	placeholder.setAttribute("alt","My Image Gallery");
	var description = document.createElement("p");
	description.setAttribute("id","description");
	var desctext = document.createTextNode("Choose an image");
	description.appendChild(desctext);
	var gallery = document.getElementById("imageGallery");
	inserAfter(placeholder,gallery);
	insertAfter(description,placeholder);
}





function prepareGallery(){
	if (!document.getElemntsByTagName) return false;
	if (!document.getElementById) return false;
	if (!document.getElementById("imageGallery")) return false;
	var gallery = document.getElementById("imageGallery");
	var links = gallery.getElementsByTagName("a");
	for ( var i=0; i < links.length; i++) {
		links[i].onclick = function() {
			return showPic(this); 
			}
			links[i]onkeypress = links[i].onclick;
			}
		}



function showPic(whichPic) {
	if (!document.getElementById("placeholder")) return true;
	var source = whichPic.getAttribute("href");
	var placeholder = document.getElementById("placeholder");
	placeholder.setAttribute("src",source);
	if (!document.getElementById("description")) return false;
	if (whichPic.get Attribute("title")) {
	var text = whichPic.getAttribute("title");
	} else {
		var text = "";
	}
	var description = document.getElementById("description");
	if (description.firstChild.nodeType == 3) {
		description.firstChild.nodeValue = text;
	}
	return false;
}

addLoadEvent(preparePlaceholder);
AddLoadEvent(prepareGallery);