Topic awaiting preservation: Help with a tooltip screen (Page 1 of 1)

Can anyone point to a good script to do the following:

Html page will show a screenshot of an application i'm developing.
The screenshot acts as an imagemap in the sense that the user can
rollover different sections of the screenshot and he/she will get a text box that appears
describing a feature or function.

I would rather not do this with an imagemap. I would rather do it using layers (divs)
I would also like, if possible, to format the text box but using inline styles.

I am not a programmer - can someone help me find a script. i've found dozens but none close enough to what I want to do.

thanks

While thinking about your request I annot see an alternative to imagemap which does not actually look like an imagemap. A table of co-ordinates have to be listed somewhere. May as well make them within an imagemap. It's what they are for.

http://www.p01.org/20lines_custom_tooltip/

Good application of simple html modification... maybe not what you need. And you'd probably have to implement it in an imagemap anyway.

Ummm, for a single image, a list of x,y to x1,y1, using onmousemove to detect the part of the image being pointed to, displaying a hidden DIV and moving it to the appropriate co-ordinates...

use an imagemap.

<img src="image.jpg" usemap="#myMmap">

<map name="myMmap">
<area shape="rect" COORDS="0,0,100,100" alt="square" href="#">
<area shape="circle" COORDS="50,50,10" alt="circle" href="#">
<area shape="poly" COORDS="10,10,20,30,30,20,50,50,10,10" alt="poly shape" href="#">
</map>

You can make a div, add onmouseover="moveDivFunct();" which is a funntion to trap the mouse x and y and move the div to that location. The only difference with this and an ALT tag is that you have to make the div look like a tooltip.


Not Enough Is Better Than Too Much

Hi
and thanks.
I already have a scripted prototype based on an imagemap.
If it can't be done at the pixel level, then i guess I don't have a choice - just makes it
much harder to maintain.

http://www.alistapart.com/articles/sprites/

See if you can do something fun with that.

and ALA: Night of the Image Map

Excellent articles! I'll be keeping it in mind when my server goes back up.

"Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke
"Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling

All done with CSS - very cool.
Not sure if I can adapt it but will give it a try.
Need to better understand the principle and the syntax.. but very neat how it uses one half of the jpeg for the rollover state!