Mouse over text image popup

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??
 
T

Trevor Lawrence

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??
Click to expand...

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>
 
T

tess81

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!
 
T

Trevor Lawrence

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>
 

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

Similar Threads

How to center adjust text above and image in a two column document. 1
How to make scroll bar permanently visible, Word 365 0
Merging from an Excel file with graphics 1
Automatic hover/help texts based on Schema annotations? 0
Cannot wrap text around an image 1
Rollover advice/code needed 1
Move Chart with Text 0
OneNote and MS Forms 0

Top