markp said:
I am still not understanding and can't seem to get what I want with
this.
The site i am building has a home page with a central image that I
would like to have rollover each time one of the interactive buttons
relating to another page is hovered over. I am not sure if this is
the instructions you sent me or not. For example, the home page
would have a large picture of a painting on it , with interactive
buttons for pages that show different types of art works, i.e. paper,
public work, etc. As the viewer moves the mouse over each of the
buttons I would like the large central image to rollover to one of
the images from the corresponding page until they click the button
and go to the photo gallery of that page. This would serve to entice
the viewer at the home page location to move further into the site.
Am I making any sense? Thanks for the help. Mark
I haven't followed this entire thread, but you could try this code, courtesy
of Murray (altered slightly)
<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/0.jpg">
</div>
<p><a href="gallery1.html"
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="gallery3.html"
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="gallery3.html"
onmouseover="FP_setLayerText('layer1',
'<img src = "images/3.jpg">')">
<img border="0" src="images/3.jpg" width="100" height="100">
</a></p>
</body>
</html>
The original image is the one named in <div id="layer1"> (in this case
"images/0.jpg" )
The rollover images are those in the paras below, i.e. images/1.jpg ,
images/2.jpg , images/3.jpg
Just replace images/1.jpg , images/2.jpg , images/3.jpg with your names.
and change gallery1.html , gallery2.html , gallery3.html to the pages with
your galleries on them
This is not quite you want, as it displays thumbnails of the rolllover
images, not interactive buttons, but you can alter this as you wish
