Bob,
Below is some code which I found. It uses two FP functions which may be a
bit of overkill, but seems to test for features used by different browsers.
FP_setLayerText() replaces my showlarger(). I did not write function
newpage() because <a href="" > does this.
The mouseover behaviour is controlled by onmouseover= onmouseout=. The
onclick action to open a new page is controlled by <a href="..." >. If you
want centring on this page, you would have to open the same page every time
and add the image into it as centred which requires extra JS
It uses absolute positioning of the <div>s which is clearly set out in the
code and can be altered to suit. I have altered the <div> size to suit image
size. The horizontal positioning is set:as 30% but could be set to px.
I used some test files 1.jpg , 2.jpg , 3.jpg of dimension 386*386 on the
folder "images" and thumbnails of the same name of dimension 65*65 on the
folder "images/thumbnails"
Code follows
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Slideshow Demo</title>
<script type="text/javascript">
function FP_setLayerText(id,txt) {
var el = FP_getObjectByID(id);
if(el.innerHTML) { el.innerHTML = txt; }
}
function FP_getObjectByID(id,o) {
var c, el, els, f, m, n;
if(!o) { o = document; }
if(o.getElementById) { el = o.getElementById(id); }
else if(o.layers) { c = o.layers; }
else if(o.all) { el = o.all[id]; }
if(el) { return el; }
if(o.id==id || o.name==id) { return o; }
if(o.childNodes) { c = o.childNodes; }
if(c) {
for(n = 0; n < c.length; n++)
{ el = FP_getObjectByID(id,c[n]);
if(el) { return el;} } }
f = o.forms;
if(f) {
for(n = 0; n < f.length; n++)
{ els = f[n].elements
for(m = 0; m < els.length; m++)
{ el = FP_getObjectByID(id,els[n])
if(el) { return el; } } } }
return null;
}
</script>
</head>
<body>
<div id="layer1"
style="position: absolute; width: 420px; height: 420px;
z-index: 1; left: 30%; top: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 2px green inset; padding: 15px;">
Watch this space
</div>
<div id="layer2"
style="position: absolute; width: 420px; height: 50px;
z-index: 1; left: 30%; top: 450px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 2px green inset; padding: 5px;">
<!-- <a > tags were onclick= -->
<a href="images/1.jpg"
onmouseover="FP_setLayerText('layer1',
'<img src = "images/1.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img src="images/thumbnails/1.jpg" alt="" height= "50px"></a>
<a href="images/2.jpg" onmouseover="FP_setLayerText('layer1',
'<img src = "images/2.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img src="images/thumbnails/2.jpg" alt="" height= "50px"></a>
<a href="images/3.jpg"
onmouseover="FP_setLayerText('layer1',
'<img src = "images/3.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img src="images/thumbnails/3.jpg" alt="" height= "50px"></a>
</div>
</body>
</html>
