damaudios said:
Hello there,
quick idea;
I have a main big image which will sit in the middle of the HTML
page. I then want a layer to have a transparent picture in it. And
then 6 other layers will have text in them, when you hover over the
text in these layers, it changes the image in the picture layer.
Is this possible? If not, any ideas on how to achieve this idea?
Here is some nice code from Murray which places an image in a positioned
<div> when other text is hovered over. (Well, I have altered it slightly -
he did have smaller images which when clicked on placed the image in the
other <div>. I also placed a default image in that <div>. However, the
inspiration is his)
You will need to replace images/1.jpg, etc with your own images.
I am not quite sure that this is 100% what you want - you talk about a layer
with a transparent picture in it and 6 other layers. This all seems a bit of
overkill.
What I have is one central layer (well actually a <div>, which I think is
the correct terminology) and the text is just displayed (not each in its own
<div>)
BTW, Murray's functions appear to very robust - catering for lots of
possibilities. These could probably be coded much more simply if one wasn't
concerned with mutliple browsers. But they work - so why change them
)
<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 type="text/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 border="0" src="images/9.jpg" >
</div>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/1.jpg">')">
Text for Image 1
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/2.jpg">')">
Text for Image 2
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/3.jpg">')">
Text for Image 3
</a></p>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/4.jpg">')">
Text for Image 4
</a></p>
</body>
</html>
