Brett said:
I am using FP 2002 and I want to use a mouseover effect on small
thumbnail photos to show a LARGER version of the same photo. I have
tried the DHTML effect of swap picture but the photos ahve to be the
same size as the original.
Is it possible to do a mouseover to a larger photo?
This code (courtesy of Murray) will do the job.
There are 3 small images down the left. Mousing over any one will bring up a
larger copy of the same image in the centre box.
BTW,
The images exist on my website so there is nothing to change to get it to
work, only to change the images to your needs (and any other cosmetic
changes).
The size of the image doesn't matter, but you need to tailor the size of the
thumbnail to your liking
e.g
height="60"
height="40"
height="40"
<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 language="JavaScript">
function FP_setLayerText(id,txt)
{//v1.0
var el = FP_getObjectByID(id)
if(el.innerHTML)
el.innerHTML = txt
}
function FP_getObjectByID(id,o)
{// v1.0
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: 400px; height: 400px;
z-index: 1; left: 200px; top: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
Watch this space
</div>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src =
\'
http://tandcl.homemail.com.au/images/06-02-14-michelle.jpg\'>')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0"
src="
http://tandcl.homemail.com.au/images/06-02-14-michelle.jpg"
height="60">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = \'
http://tandcl.homemail.com.au/images/Trevor and
Carole 05-12-13.jpg\'>')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="
http://tandcl.homemail.com.au/images/Trevor and Carole
05-12-13.jpg" height="40">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src =
\'
http://tandcl.homemail.com.au/images/04-11-21-2-bryans-picture.jpg\'>')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0"
src="
http://tandcl.homemail.com.au/images/04-11-21-2-bryans-picture.jpg"
height="40">
</a></p>
</body>
</html>
--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website:
http://trevorl.mvps.org/
----------------------------------------
