Reconfiguring the script

[danno]

1) Script Title: Image W/Description Tooltip

2) Script URL (on DD):http://www.dynamicdrive.com/dynamici...getooltip.htm#

3) Describe problem: Tried centering image on my screen to no avail so had to strip every image out of folder and delete folder out of my site. I uploaded a new folder and realigned the text in exact center of page: http://www.cartoonfile.net/fishing_cartoons.htm and discovered why my images were not showing in the first place. There needs to be an underscore in the folder name. Well, since restructuring this, I lost my image and I believe I have followed it all as I did yesterday but now image doesn't show upon mousing over the blue text link. Can you look at my code and let me know if something is wrong?
Thanks ----------

[thetestingsite]

In your script, change this:

messages[0] = new Array('fishing_cartoon1.jpg','Here is a red balloon on a white background',"#FFFFFF");

messages[0] = new Array('fishing_cartoons/fishing_cartoon1.jpg','Here is a red balloon on a white background',"#FFFFFF");

That should do it. Hope this helps.

[danno]

Thank you Testing . . . hmmmm, tried that & it didn't work. I'm curious, could this need reconfig?
<a href="http://www.cartoonfile.net/fishing-cartoon1.jpg" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">Fishing Cartoon1 &nbsp;</a>

The actual text link I have for 'Fishing Cartoons' is:
http://www.cartoonfile.net/fishing_cartoons/fishing_cartoon1.jpg'

re: http://www.cartoonfile.net/fishing_cartoons.htm

FYI I wouldn't have messed with this but my original images were all 600 pixels wide and couldn't find a way to center them, so deleted that folder & went back and resized all original images to 500 pixels wide so I plan to run one vertical column of text in mid page for this....

[thetestingsite]

One other thing I noticed (that I didn't before was that the image name is not fishing_image, but instead it is fishing-image. Try changing this and it should work.

Hence:

messages[0] = new Array('fishing_cartoons/fishing-cartoon1.jpg','Here is a red balloon on a white background',"#FFFFFF");

Hope this helps.

[danno]

Testing! It worked! Your guidance (along with the other genrlemen) has been extremely appreciated. As you are aware, I've never played around much with scripts, not even HTML until a couple years ago . . . learn aloyt of the basic nuances how this stuff works. Check out first image . . . I think you will see what I am trying to accomplish. Now, I hope I can get the other 48 images done up OK - if there is anything I need to be aware of, prior to proceeding, feel free. Keep up this great work!

re: http://www.cartoonfile.net/fishing_cartoons.htm

[thetestingsite]

Just use the following format for all 48 images and you should be fine. Just change the few colored items below with the corresponding color below the following code (if that makes sense):

messages[0] = new Array('fishing_cartoons/fishing-cartoon1.jpg');

Change the above in blue to the next number up (remember that programming arrays (or at least from what I'm aware of) start with 0), so your code would be messages[0-47].

Change the above in red to the corresponding image you wish to display.

Hope this helps.

Added Later: One other thing you could do is make the tooltip form around the image (or make the image fit inside the tooltip) by changing the following line of code:

// Be sure to set tipWidth wide enough for widest image
var tipWidth= 160;

Change that to a width (in pixels) that will fit your image.

[danno]

Let me see if I understand this . . . see below as this is what it currently is:
messages[0] = new Array('fishing_cartoons/fishing-cartoon1.jpg','Here is a red balloon on a white background',"#FFFFFF");
messages[1] = new Array('fishing_cartoons/fishing-cartoon2.gif','Here is a duck on a light blue background.',"#DDECFF");
messages[2] = new Array('test.gif','Test description','black','white');

And I have already added the image for the second link, but image 1 appears for that one too. Let's see, you say make the [0] to next number up, which I did, to [1], but then nothing appeared..... Sould I make the [0] to a [1] and for my fishing-cartoon2.gif, make that a [2]?

re www.cartoonfile.net/fishing_cartoons.htm

[thetestingsite]

In the link where you want the tooltip to appear, you also have to change the onmouseover as well.

Basically, from this:

<a onmouseover="doTooltip(event,0)" onmouseout="hideTip()" href="http://www.cartoonfile.net/fishing_cartoons/fishing_cartoon2.gif">Fishing Cartoon 2</a>

<a onmouseover="doTooltip(event,which tooltip image)" onmouseout="hideTip()" href="http://www.cartoonfile.net/fishing_cartoons/fishing_cartoon2.gif">Fishing Cartoon 2</a>

Hope that helps.

[danno]

Done! Although the image for the 2nd one doesn't appear. Hmmmm, I am still trying to configure that part in customization area...i.e.: [1], [2] etc...I can make a template actually....the rest of the text within thebox underneath the image is of no concern at the moment....if I can get second image to appear (which I believe I am close to) I will be on my way!

Any suggestions on that Array part?

[thetestingsite]

You have it typed in as this:

doTooltip(event,fishing_cartoon2.gif)

It should be like this:

doTooltip(event,num)

Where num is the number of the image in the array (0,1,2,...)

This is why your image is not showing up.

Hope this helps