SasssieCJ said:
How do you add a java script to a webpage that when you hoover your
mouse over a small image it shows that image bigger next to that
small image? I know how to make a bigger image pop up in a new window
but I need to know how to make it show up on that same page. Can this
be done in frontpage?
Thanx
Here is some code writen by Murray from this NG, which will display a
larger image when one of several smaller images is moused over.
Originally the "onmouseover"s were "onclick"s. I just changed it to work
the way you want. You don't need 3 images - one would do.
<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>
<!-- <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>
</body>
</html>
