This is what I have so far. Its a JavaScript Image Popup on mouse over. All you have to do is add cover.jpg to see it work.
I am not sure how to implement it into your original script to make it work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JavaScript Image Popup</title>
<style>#imgbox
{
vertical-align : middle;
position : absolute;
border: 1px solid #999;
background : #FFFFFF;
filter: Alpha(Opacity=100);
visibility : hidden;
height : 500px;
width : 500px;
z-index : 50;
overflow : hidden;
text-align : center;
}
</style>
<script>function Large(obj)
{
var imgbox=document.getElementById("imgbox");
imgbox.style.visibility='visible';
var img = document.createElement("img");
img.src=obj.src;
img.style.width='500px';
img.style.height='500px';
if(img.addEventListener){
img.addEventListener('mouseout',Out,false);
} else {
img.attachEvent('onmouseout',Out);
}
imgbox.innerHTML='';
imgbox.appendChild(img);
imgbox.style.left=(getElementLeft(obj)) +'px';
imgbox.style.top=(getElementTop(obj)) + 'px';
}
function Out()
{
document.getElementById("imgbox").style.visibility='hidden';
}
function getElementLeft(elm)
{
var x = 0;
//set x to elm’s offsetLeft
x = elm.offsetLeft;
//set elm to its offsetParent
elm = elm.offsetParent;
//use while loop to check if elm is null
// if not then add current elm’s offsetLeft to x
//offsetTop to y and set elm to its offsetParent
while(elm != null)
{
x = parseInt(x) + parseInt(elm.offsetLeft);
elm = elm.offsetParent;
}
return x;
}
function getElementTop(elm)
{
var y = 0;
//set x to elm’s offsetLeft
y = elm.offsetTop;
//set elm to its offsetParent
elm = elm.offsetParent;
//use while loop to check if elm is null
// if not then add current elm’s offsetLeft to x
//offsetTop to y and set elm to its offsetParent
while(elm != null)
{
y = parseInt(y) + parseInt(elm.offsetTop);
elm = elm.offsetParent;
}
return y;
}
</script>
</head>
<body>
<div id="imgbox"></div>
<img id="img1" style="width:300px; height:300px;" alt="" src="Cover.jpg" onmouseover="Large(this)" />
</body>
</html>
) And then the Album Page. But as you can see the pop opens in modern day browsers ignoring scrollbars=no, toolbar=no, menubar=no etc. I thought it would be nice to just have the image popup larger (300px to 500px) on mouse over instead.
