How to display 'tool tip' or info when mouse hovers over picture?

  • Thread starter Thread starter Pheasant Plucker®
  • Start date Start date
P

Pheasant Plucker®

Hi there,

I wish to have a little popup box with a few details in when the mouse is
hovered over a .jpg picture or a hyperlink.

How is this done in FP 2003 please?
 
Pheasant Plucker® said:
Hi there,

I wish to have a little popup box with a few details in when the mouse is
hovered over a .jpg picture or a hyperlink.

How is this done in FP 2003 please?
Click to expand...

Here is code that shows text when the image is hovered over

<html>
<head>
<script type="text/javascript">
function hideit(elid)
{ var elt = document.getElementById(elid);
elt.style.display = (elt.style.display == "none") ? '' : 'none' ;
}
</script>
</head>
<body>
<div align="center">
picture heading<br />
<img src= "images/1.jpg"
onmouseover="hideit('div1')"
onmouseout="hideit('div1')">
<div id="div1" style="display:none">
<b>Full description</b><br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
</div>
</div>
</body>
</html>

The <div id="div1"> could be positioned anywhere on the page but I have
placed it immediately under the picture.
 
Or the simplest way is to add alt text to the image
- In Image properties set the text on the second tab
- Or in code view as alt="some text here"

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
_____________________________________________


| | > Hi there,
| >
| > I wish to have a little popup box with a few details in when the mouse is
| > hovered over a .jpg picture or a hyperlink.
| >
| > How is this done in FP 2003 please?
| >
|
| Here is code that shows text when the image is hovered over
|
| <html>
| <head>
| <script type="text/javascript">
| function hideit(elid)
| { var elt = document.getElementById(elid);
| elt.style.display = (elt.style.display == "none") ? '' : 'none' ;
| }
| </script>
| </head>
| <body>
| <div align="center">
| picture heading<br />
| <img src= "images/1.jpg"
| onmouseover="hideit('div1')"
| onmouseout="hideit('div1')">
| <div id="div1" style="display:none">
| <b>Full description</b><br>
| Blah blah blah <br>
| Blah blah blah <br>
| Blah blah blah <br>
| </div>
| </div>
| </body>
| </html>
|
| The <div id="div1"> could be positioned anywhere on the page but I have
| placed it immediately under the picture.
|
| --
| Trevor Lawrence
| Canberra
| Web Site http://trevorl.mvps.org
|
|
 
Nope. The alt attribute is only displayed by IE (erroneously). That would
be the title attribute that you should use....

<img title="you'll see this in all browsers" alt="you'll only see this in
IE, but not at all if there is also a title attribute"....
 
Back
Top