OnMouseOver a thumbnail need to show large image on same page

J

Jon Zolsky

Trying to arrange the page so that when going with the mouse over thumbnails,
they are displayed in full size on the same page in a special window. Also,
trying to figure out how I can have an image in that larger window, which
will show up there every time the cursor is not over any of the thumbnails.
Like a default image, replaced wit other full size images when rolling over.
I am using FrontPage 2003
 
T

Trevor L.

Jon said:
Trying to arrange the page so that when going with the mouse over
thumbnails, they are displayed in full size on the same page in a
special window. Also, trying to figure out how I can have an image in
that larger window, which will show up there every time the cursor is
not over any of the thumbnails. Like a default image, replaced wit
other full size images when rolling over. I am using FrontPage 2003

The esteemed Murray has put together such a page which seems to do
everything you want.

<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',
'&lt;img src = &quot;images/1.jpg&quot;&gt;')">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>

<p><a href=""
onmouseover="FP_setLayerText('layer1',
'&lt;img src = &quot;images/2.jpg&quot;&gt;')">
<img border="0" src="images/2.jpg" width="100" height="100">
</a></p>

<p><a href=""
onmouseover="FP_setLayerText('layer1',
'&lt;img src = &quot;images/3.jpg&quot;&gt;')">
<img border="0" src="images/3.jpg" width="100" height="100">
</a></p>

<p><a href=""
onmouseover="FP_setLayerText('layer1',
'&lt;img src =
&quot;images/trevor-and-carole.jpg&quot;&gt;')">
<img border="0" src="" width="100" height="100">Picture
</a></p>

</body>

</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top