phreak3r

Hi I want to be able to give different tooltips that contain both image as well as text when mouse over different areas of an image (just like an image map). Any suggestions on which is the best possible way to do this? I know there are css and java tooltips there. But I cant get any to work on an image map along with an image in the tooltip as well.

wazerface

First use one of those dynamic tooltip things (for example):

(sorry apparently I'm not cool enough to post normal links)
walterzorn *dot* com /tooltip/tooltip_e *dot* htm

Then, when you do your image map, in the onmouseover event, set it to:

"return escape('Text with <img src=\'image.jpg\' width=\'60\'> image.')"

(Just like in the example from the above website).


Full Example:

<script language="JavaScript" type="text/javascript" src="wz_tooltip.js"></script>

...

<MAP NAME="TheMap">
<AREA SHAPE="RECT" COORDS="57, 78, 135, 138" HREF="normal_one.com" onMouseover="showtip(this,event,'This is a normal tooltip')"
onMouseout="hidetip()"><AREA SHAPE="RECT" COORDS="103, 10, 174, 75" HREF="wsabstract.com" onmouseover="return escape('Text with <img src=\'image.jpg\' width=\'60\'> image--this is a cooler tooltip!')"
onMouseout="hidetip()">
</MAP>
<img src="imagemap.gif" width="188" height="173" border="0" usemap="#TheMap">