PDA

View Full Version : How to make script work for mutiple internet programs



owbussey
09-18-2005, 12:19 AM
Image w/ description tooltip
http://www.dynamicdrive.com/dynamicindex4/imagetooltip.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):


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


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


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:


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 (http://www.eliven.net/fle/pad/welcome2.asp)

thanks in advance,:)
elisa

jscheuer1
12-27-2007, 04:11 PM
You missed one, change:


tipcss.width = tipWidth+"px";

to:


tipcss.width = tipWidth;

eliven
12-27-2007, 10:14 PM
:D thanks so much it's fantastic!! it's all right now :D
elisa