Mouse over text image popup

  • Thread starter Thread starter tess81
  • Start date Start date
T

tess81

I need to set up our website so that when the mouse hovers over particular
text, an image pops up. I am currently using Frontpage 2003. Any ideas??
 
tess81 said:
I need to set up our website so that when the mouse hovers over particular
text, an image pops up. I am currently using Frontpage 2003. Any ideas??

Here is some code that does what you want with 3 optional images

<html>
<head>
<script type="text/javascript">
function setLayer(id,txt) {
document.getElementById(id).innerHTML = txt;
}
</script>
</head>

<body>
<div id="layer1" style="position: absolute; left: 30%;"></div>
<span onmouseover="setLayer('layer1','<img src =
&quot;images/1.jpg&quot;>')"
onmouseout="setLayer('layer1','')">
Some text for image 1
</span> <br>

<span onmouseover="setLayer('layer1','<img src =
&quot;images/2.jpg&quot;>')"
onmouseout="setLayer('layer1','')">
Some text for image 2
</span> <br>

<span onmouseover="setLayer('layer1','<img src =
&quot;images/3.jpg&quot;>')"
onmouseout="setLayer('layer1','')">
Some text for image 3
</span>

</body>
</html>
 
Thanks Trevor. The text I want the pictures to popup on is already on the
website and is formatted in a table. Where would I insert the code so that
the picture I require pops up on that text? Where do I specifiy which picture
to use? Sorry, don't have much experience with codes!
 
It is often difficult to suggest anything without seeing the code, but I'll
try.

If each piece of text is in a cell, you could try.

<td onmouseover="setLayer('layer1','<img src = &quot;images/1.jpg&quot;>')"
onmouseout="setLayer('layer1','')">
Some text for image 1
</td>

You specify which pictuire to use by changing &quot;images/1.jpg&quot;

The bit betwen &quot; and &quot; is the location of the picture relative to
the page you are on.

Some sample code follows:

<table>
<tr>
<td onmouseover="setLayer('layer1','<img src = &quot;images/1.jpg&quot;>')"
onmouseout="setLayer('layer1','')">
Some text for image 1
</td>
</tr>

<tr>
<td onmouseover="setLayer('layer1','<img src = &quot;images/2.jpg&quot;>')"
onmouseout="setLayer('layer1','')">
Some text for image 2
</td>
</tr>

<tr>
<td onmouseover="setLayer('layer1','<img src = &quot;images/3.jpg&quot;>')"
onmouseout="setLayer('layer1','')">
Some text for image 3
</td>
</tr>
</table>
 
Back
Top