Reconfiguring the script

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 ----------

In your script, change this:

Code:

---

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

---

Code:

---

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.

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....

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:

Code:

---

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

---

Hope this helps.

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

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):

Code:

---

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:

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.

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

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

Basically, from this:

Code:

---

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

---

Code:

---

<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.

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?

You have it typed in as this:

Quote:

---

doTooltip(event,fishing_cartoon2.gif)

---

It should be like this:

Code:

---

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

wonderful instructions TestinSite! Please see: http://www.cartoonfile.net/fishing_cartoons.htm and I am configuring for image 3 and did the 'do Tooltip (event,2)' to display image 3 but as you'll notice, it comes on screen as small black square. I am so close! I got this figured out, just need the right number sequence and I'm on my way! . . .
Any feedback as always, is appreciated . . .

In your script, you have a ton of these:

Code:

---

messages[1]
messages[2]
messages[1]
messages[2]

---

Over and over again. The last line of the messages array is messages[2] = ('test.gif','Test Description'); or something to that effect. Finish editing the script with all the new numbers and whatnot, then see if it still causes problems.

Hope this hels.

Looks like you've got it. Time for two additions to make your page work in other browsers like FF and Opera (additions/changes are red in the below that is taken from your page's source code):

Code:

---

var dom = (document.getElementById) ? true : false;
var ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1||window.opera) && dom) ? true : false;
var ns4 = (document.layers && !dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;

// resize fix for ns4
var origWidth, origHeight;
if (ns4) {
        origWidth = window.innerWidth; origHeight = window.innerHeight;
        window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
}

// avoid error of passing event object in older browsers
if (nodyn) { event = "nope" }

///////////////////////  CUSTOMIZE HERE  ////////////////////
// settings for tooltip
// Do you want tip to move when mouse moves over link?
var tipFollowMouse= true;       
// Be sure to set tipWidth wide enough for widest image
var tipWidth= 500;
var offX= 20;        // how far from mouse to show tip
var offY= 12;
var tipFontFamily= "Verdan

---

Note: With:

Code:

---

var tipWidth= 500;

---

500 is just my best guess, it should be the width of the widest image (cartoon) that you have.

So you fellas know what I had intended this script for, please visit the finished layout: http://www.cartoonfile.net/fishing_cartoons.htm and if there is any criticism, I am thick skinned. The unique aspect of this script, is the fact a visitor would have a hard time grabbing or right-click / copying the image onscreen . . . and it also allows for the visitor to quickly browse as opposed to clicking through a complete photogallery. Alas, I think I have the gist of it understood . . .like with anything new, a bit frustrating but I keep at it & get your assistance. Mucho appreciated . . .

Not a problem at all, let us know if you need any more help. The only other thing that I could say to do with it, is what I had said in one of my previous posts and what John had posted in his most recent post. The tooltip width item. Other than that, don't know what to tell you.