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

Rollover advice/code needed 1
FP2003: Hover text 2
mouse over to change images 1
Frontpage 2003 1
Creating a Pop up window with a description related to the contents of the contents of the field 0
Adding sound to clipart? 1
Change image on mouse-over 3
text linked to popup's does not have mouse pointer reaction 2

Top