Custom image for Image ToolTip

[cordac]

1) Script Title: Image w/ description tooltip

2) Script URL (on DD): ImageToolTip (http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm)

3) Describe problem: I'd like a custom image to be show directly from the image src. im new to this and its a problem for me that ive been strugling with for 2 days now.

i think im right when i guess the code at the HTML page should look like:

<img src="ima/prodPics/signDodge.jpg" alt="Dodge" onmouseover="doTooltip(event,'ima/prodPics/2_signDodge.jpg')" onmouseout="hideTip()">

But its to much for me to solve atm.

Why i want this done is because i have alot of images and it would just make the script slow and the old version i have messes up in IE. (DOM problem i think)

Thanks for any help

[jscheuer1]

The tooltips, including their images are configured here (from Step 1):



// tooltip content goes here (image, description, optional bgColor, optional textcolor)
var messages = new Array();
// multi-dimensional arrays containing:
// image and text for tooltip
// optional: bgColor and color to be sent to tooltip
messages[0] = new Array('red_balloon.gif','Here is a red balloon on a white background',"#FFFFFF");
messages[1] = new Array('duck2.gif','Here is a duck on a light blue background.',"#DDECFF");
messages[2] = new Array('test.gif','Test description','black','white');

The part that goes in where the code from your post is should look like so:


<img src="ima/prodPics/signDodge.jpg" alt="Dodge" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">

The 0 refers to the tip (messages number) to use. You can include the path for the image, ex:


messages[0] = new Array('ima/prodPics/2_signDodge.jpg','Dodge Sign',"#FFFFFF");

If no text is desired:


messages[0] = new Array('ima/prodPics/2_signDodge.jpg','',"#FFFFFF");

you still need an empty field for it (red in the above).