Only Showing An Image When Mouse Is In Certain Spot?

[brds]

I was wondering how to make it so that when the viewer's mouse came across a certain part of the webpage, an image would pop up. For example: If i have a index page that said something like

1-my favorite sites
2-Why i'm so awesome
3-hobbies
4-leave a message

and let's say that i want to make it so that when the viewers mouse scrolls or hovers above "1-my favorite sites" a little picture would come up to the right of it and showed all the sites. And when the viewers mouse scrolled or hovered over "2-why i'm so awesome" a picture would pop up to the right and show the reasons... etc...

Also, i need to know how to designate to the computer the bounding box for each item.

THANKS!
Alex
brds85@yahoo.com

[Khalid Ali]

there are tonnes of mousever menu out there..just search the google

[rhsunderground]

this is the basic layout:

<div id="1main" style="postition: absolute; top: X; left: Y" onMouseover="1popup.style.visibility='visible'" onMouseout="1popup.style.visibility='hidden'"> 1 blah blah blah</div><br>
<div id="2main" style="postition: absolute; top: X; left: Y" onMouseover="2popup.style.visibility='visible'" onMouseout="2popup.style.visibility='hidden'"> 2 blah blah blah</div><br>
<div id="3main" style="postition: absolute; top: X; left: Y" onMouseover="3popup.style.visibility='visible'" onMouseout="3popup.style.visibility='hidden'"> 3 blah blah blah</div><br>
<div id="4main" style="postition: absolute; top: X; left: Y" onMouseover="4popup.style.visibility='visible'" onMouseout="4popup.style.visibility='hidden'"> 4 blah blah blah</div><br>

<div id="1popup" style="position: absolute; top: pi; left: e; visibility: hidden" onMouseover="1popup.style.visibility='visible'" onMouseout="1popup.style.visibility='hidden'">1 blah whatever</div>
<div id="2popup" style="position: absolute; top: pi; left: e; visibility: hidden" onMouseover="2popup.style.visibility='visible'" onMouseout="2popup.style.visibility='hidden'">2 blah whatever</div>

<div id="3popup" style="position: absolute; top: pi; left: e; visibility: hidden" onMouseover="3popup.style.visibility='visible'" onMouseout="3popup.style.visibility='hidden'">3 blah whatever</div>

<div id="4popup" style="position: absolute; top: pi; left: e; visibility: hidden" onMouseover="4popup.style.visibility='visible'" onMouseout="4popup.style.visibility='hidden'">4 blah whatever</div>


that's about what they'll give you. it's similar to the reeeeeally basic dropdown i've linked to here (http://www.geocities.com/crazydude33/thegreatestwebpageintheworld.html) for reference. enjoy.

[Khalid Ali]

The above posted solution does not work with NS6+ browsers..just a caution..:D