Bob said:
Hi, Can you pls help
I have created a page with a central large size image that changes
accordingly when the mouse rolls over a number of smaller images. I
have approx 9 large images of various sizes involved.
Because the images are different sizes, I unchecked the box 'Specify
Size' in picture properties of the original image.
This works well when I press F12 in Frontpage - it works as I would
expect - the page is adjusted according to the size of the new large
image.
However, when I upload the page and run it from my browser each
replacement large image is forced (distorted) to be the same size as
the original image - I am confused and 'stuck'
Can you advise how I can overcome this please?
Hmm, I tried this code (courtesy of Murray) and the last image
(images/trevor-and-carole.jpg) is a different size - 600*400. The others are
386*386.
It worked perfectly
It may mean some cutting and pasting but it is tested and it works, so good
luck.
<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;">
<!-- <img src = "images/1.jpg";> -->
Watch this space
</div>
<!-- <a > tags were onclick= -->
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/1.jpg">')">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/2.jpg">')">
<img border="0" src="images/2.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/3.jpg">')">
<img border="0" src="images/3.jpg" width="100" height="100">
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src =
"images/trevor-and-carole.jpg">')">New Picture
</a></p>
</body>
</html>