How to make mouseover effect text show image in popup window or tooltip?

Question

I am trying to display a popup image in a new window when the mouse moves over some text. Or perhaps, the image could display in a tooltip when the mouse moves over some text.
However, I have achieved the functionality of an image appearing above the text when the mouse moves over some text. This is how I did this:
I put this code into the Page HTML Header:
<script type="text/javascript">
<!--
function setFirstChildImgDisplay(el,vis) {
if(!el || !el.getElementsByTagName) return;
el.getElementsByTagName('img')[0].style.display=vis;
// -->
</script>
I created a region and put this in the Region's Title field:
{div onmouseover="setFirstChildImgDisplay(this,'inline')"  onmouseout="setFirstChildImgDisplay(this,'none')">Check out Page 1 here <img src="#WORKSPACE_IMAGES#DGNR Preview Page 1.bmp" alt="Page 1 Preview" style="display:none;">{/div}
I am thinking that I should not have all of this code in the Region's Title field. But, I don't know where else to put it in APEX.
So my questions are:
1. how to get an image to display in a popup window or as a tooltip when the mouse is moved over some text?
2. where should the {div} content be placed in APEX, if not in the Title field?
Please note that I used '{' & '}' instead of '<' & '>' just so the div would display in this post.
Also, I would like to give credit to this website because this is where I found out how to do what I have provided above.
http://forums.devshed.com/web-design-help-2/mouseover-effect-text-shows-image-321876.html
Thank you in advance,
Maggie

Answer 1

It's just an image map. Play with the settings. Here's a shape layer making a hole in the water and adding a bit of color.