Too many tooltips = long page load time!

[radioattic]

1) Script Title: Image w/ description tooltip v2.0

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

3) Describe problem: I LOVE THIS SCRIPT! That said, even though it works perfectly, I have a problem due to the nature of my page.

I am testing this script on a beta page that has over 1,100 links, so the script generates over 1,100 tooltips. Just like it's supposed to.

But because each tooltip displays an image that's 6KB-9KB in size, the page takes a LOOONG time to load (about 50 seconds for me).

So MY QUESTION IS... Is there a way to prevent the thumbnail images from downloading until the visitor mouses over the link? And thus download one thumbnail at a time...? Or is this not the right way to approach my desired solution of displaying a thumbnail on mouseover?

P.S. If you visit this page, not all the tooltips work, because the beta site does not include the most recent images published to the production site. But enough of the images are present so you get an idea of the time involved in the page download!

Thank you,

Steve Adams
Webmaster, the Radio Attic

[ddadmin]

Try the below modified .js file, which only populates each tooltip with the specified image the first time you move the mouse over the corresponding anchor, instead of automatically when the page loads. Before you try out the .js file though, you may want to copy the tooltip array from your original .js file, and replace the one in the modified file with it so you don' have to redefine all of your tooltip contents again, for example:

		tooltips[0]=["red_balloon.gif", "Here is a red balloon<br /> on a white background", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}]
		tooltips[1]=["duck2.gif", "Here is a duck on a light blue background.", {background:"#DDECFF", width:"200px"}]
		tooltips[2]=["winter.jpg"]
		tooltips[3]=["bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]