Link to images in file

[Steve@sportingwales.com]

Image w/ description tooltip
http://www.dynamicdrive.com/dynamici...agetooltip.htm

I am using the above script in a huge project that will eventually involve 30,000 photographs. It is working great so far with just over 200 photographs, though a little slow to load. Instead of all the images having to load before the script will work properly, can it be altered so that it links to the photographs in a html image file?

[jscheuer1]

Well, to speed things up, you could get rid of the preloading. This will mean that the users will have to wait for however long it takes to load each individual image at the time of each tip's first appearance before the image will be seen. To do this, remove this from the code:

// preload images that are to appear in tooltip
// from arrays above
if (document.images) {
	var theImgs = new Array();
	for (var i=0; i<messages.length; i++) {
  	theImgs[i] = new Image();
		theImgs[i].src = messages[i][0];
  }
}

Or, you could wait until the page is otherwise loaded before preloading the the images. This might be the best compromise under the circumstances. To do this, change the above to a function, like so (additions red):

// preload images that are to appear in tooltip
// from arrays above
function preloadImages(){
if (document.images) {
	var theImgs = new Array();
	for (var i=0; i<messages.length; i++) {
  	theImgs[i] = new Image();
		theImgs[i].src = messages[i][0];
  }
}
}

Then in the init() function (which fires only after the rest of the page is loaded), do a call, like so (addition red):

///////////////////////////////////////////////////////////
//  initTip	- initialization for tooltip.
//		Global variables for tooltip. 
//		Set styles for all but ns4. 
//		Set up mousemove capture if tipFollowMouse set true.
////////////////////////////////////////////////////////////
var tooltip, tipcss;
function initTip() {
preloadImages();
	if (nodyn) return;
	tooltip = (ns4)? document.tipDiv.document: (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
	tipcss = (ns4)? document.tipDiv: tooltip.style;
	if (ie4||ie5||ns5) {	// ns4 would lose all this on rewrites
		tipcss.width = t . . . snip . . .

This can still result in, at times, the users having to wait for the tip images to load upon first activation of a given tip but, it is less likely and, the longer the page is loaded in the browser, the less likely this will become.

[Steve@sportingwales.com]

Hi john thanks for your reply, I've had a look through my page but I can't find the section of script you refer to above. Here is the script that appears on my page just before the list of images and messages.

var dom = (document.getElementById) ? true : false;
var ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && 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= 300;
var offX= 20; // how far from mouse to show tip
var offY= 12;
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "8pt";
// set default text color and background color for tooltip here
// individual tooltips can have their own (set in messages arrays)
// but don't have to
var tipFontColor= "#000000";
var tipBgColor= "#DDECFF";
var tipBorderColor= "#000080";
var tipBorderWidth= 0;
var tipBorderStyle= "ridge";
var tipPadding= 4;
// 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

[Steve@sportingwales.com]

Hi John

Ignore my last post, I've found the piece of script. The problem now is if I add the text you highlighted in red it causes errors on the page and none of the images pop up!

[jscheuer1]

Well, I tested it out here and it worked fine. You may have missed the trailing bracket that was added in the first change block. That would certainly cause errors. Go back over what I posted and make absolutely sure you have followed it exactly.

[Steve@sportingwales.com]

Thanks John

I missed the last trailing bracket, you were right! It works fine, thanks for your help.