How to make script work for mutiple internet programs

**owbussey** · 09-18-2005, 12:19 AM

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

How would I make this script compatible with firefox? It is compatible with safari and Internet explorer already.

thanks,
Owen

**jscheuer1** · 09-18-2005, 02:49 AM

It is already compatible with FF. Safari, I wouldn't be too sure about, not having a Mac to test on. It is only rated for FF, IE and Opera. This means it should fly for NS6+ as well:

IE5+: IE 5 and above
FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
Opr7+: Opera 7 and above.

**eliven** · 12-06-2007, 03:28 PM

Hi,
i've a visual problem with FF, in particular when i try to view an image the border is too small than the image.
I notice that i change tipWidth variables, the view is better but the images are not with the same with.

What can i do to resolve it?
Thanks in advance,
elisa

**jscheuer1** · 12-06-2007, 04:56 PM

It's not really meant to work like this, but I've found that if you set (in the configuration):

Code:

///////////////////////  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= 'auto';
var offX= 20;	// how fa . . .

And farther down, in the code section get rid of (red):

Code:

////////////////////////////////////////////////////////////
//  initTip	- initialization for tooltip.
//		Global variables for tooltip. 
//		Set styles
//		Set up mousemove capture if tipFollowMouse set true.
////////////////////////////////////////////////////////////
var tooltip, tipcss;
function initTip() {
	if (nodyn) return;
	tooltip = (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
	tipcss = tooltip.style;
	if (ie4||ie5||ns5) {	// ns4 would lose all this on rewrites
		tipcss.width = tipWidth+"px";
		tipcss.fontFamily = tipFontFamily;
		tipcss.fontSize = tipFontSize;
		tipcss.color = tipFontColor;
		tipcss.backgroundCo . . .

It can work out pretty well. Once you do that, you may want to format the text part of the tip, examples -

For precision, and allowing for the user perhaps adjusting his/her font sizes in the browser:

Code:

messages[0] = new Array('images/dot-com-btn.gif','<div style="width:176px;">Here is a red balloon on a white background<\/div>',"#FFFFFF");

For best results, generally set the div width to the width of the image for that tip.

Quick and dirty:

Code:

messages[0] = new Array('images/dot-com-btn.gif','Here is a red balloon<br> on a white background',"#FFFFFF");

**eliven** · 12-08-2007, 05:01 PM

hi,
thanks for you precious help, I've change var tipWidth= 'auto'; so the image's border on FF is perfect, but... on IE i receive an error, in particular I don't see the image. What can we do?

elisa

**jscheuer1** · 12-08-2007, 07:01 PM

If you followed my instructions fully, that shouldn't be happening. Did you follow both changes, not just first one to var tipWidth?

I tested this in IE 6 and 7 and it worked, as well as in FF, Safari 3 Win, and Opera. If you are still having problems:

Please post a link to the page on your site that contains the problematic code so we can check it out.

**eliven** · 12-27-2007, 02:11 PM

hi,
thanks for your help, so I follow your instructions, so now I can see the images in FF and IE, but in IE the position are fixed and not follow the mouse.
You can see this error
here

thanks in advance,

elisa