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

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

text linked to popup's does not have mouse pointer reaction 2
FP2003: Hover text 2
mouse over to change images 1
How to display 'tool tip' or info when mouse hovers over picture? 3
Super imposing text on multiple predefined areas on a graphic 13
Rollover advice/code needed 1
mouse over hyperlinks 1
Change image on mouse-over 3

Back
Top