PDA

View Full Version : Image w/ description tooltip help



jonnyray
03-23-2007, 11:19 PM
1) Script Title: Image w/ description tooltip

2) Script URL (on DD):http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm


3) Describe problem:

I followed the directions for this script and couldnít get it to work
I inserted the first part of the script into the head section as requested and the second part into the links on my page but nothing happened.

Step 1: Insert the below script into the <head> section of your page:

I checked the script itself and found this statement under the heading above.

/* IMPORTANT: Put script after tooltip div or
put tooltip div just before </BODY>. */

I did insert the script into the body of the page and it started to work but I did have a problem configuring the script.

The tooltip moving with the mousemove is an option that can be turned off by setting the tipFollowMouse to false.
Inserting false into the code didnít make any difference; in fact it caused a popup warning about a bad script being run on my page.

I am using Homestead.com site builder software and IE6 Browser.

Could you please tell me which is the correct way to install this script?

thetestingsite
03-23-2007, 11:28 PM
If you were to follow the instructions (or even click on the "Developer's View" link on the script page), you would see to place the code like so:



<html>
<head>

<script language="javascript" type="text/javascript">

/***********************************************
* Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
* Copyright 2002-2007 by Sharon Paine
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

/* IMPORTANT: Put script after tooltip div or
put tooltip div just before </BODY>. */

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= 160;
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= 3;
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
messages[0] = new Array('red_balloon.gif','Here is a red balloon on a white background',"#FFFFFF");
messages[1] = new Array('duck2.gif','Here is a duck on a light blue background.',"#DDECFF");
messages[2] = new Array('test.gif','Test description','black','white');

//////////////////// END OF CUSTOMIZATION AREA ///////////////////

// 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];
}
}

// to layout image and text, 2-row table, image centered in top cell
// these go in var tip in doTooltip function
// startStr goes before image, midStr goes between image and text
var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100&#37;"><img src="';
var midStr = '" border="0"></td></tr><tr><td valign="top">';
var endStr = '</td></tr></table>';

////////////////////////////////////////////////////////////
// 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() {
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 = tipWidth+"px";
tipcss.fontFamily = tipFontFamily;
tipcss.fontSize = tipFontSize;
tipcss.color = tipFontColor;
tipcss.backgroundColor = tipBgColor;
tipcss.borderColor = tipBorderColor;
tipcss.borderWidth = tipBorderWidth+"px";
tipcss.padding = tipPadding+"px";
tipcss.borderStyle = tipBorderStyle;
}
if (tooltip&&tipFollowMouse) {
if (ns4) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = trackMouse;
}
}

window.onload = initTip;

/////////////////////////////////////////////////
// doTooltip function
// Assembles content for tooltip and writes
// it to tipDiv
/////////////////////////////////////////////////
var t1,t2; // for setTimeouts
var tipOn = false; // check if over tooltip link
function doTooltip(evt,num) {
if (!tooltip) return;
if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);
tipOn = true;
// set colors if included in messages array
if (messages[num][2]) var curBgColor = messages[num][2];
else curBgColor = tipBgColor;
if (messages[num][3]) var curFontColor = messages[num][3];
else curFontColor = tipFontColor;
if (ns4) {
var tip = '<table bgcolor="' + tipBorderColor + '" width="' + tipWidth + '" cellspacing="0" cellpadding="' + tipBorderWidth + '" border="0"><tr><td><table bgcolor="' + curBgColor + '" width="100%" cellspacing="0" cellpadding="' + tipPadding + '" border="0"><tr><td>'+ startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr + '</td></tr></table></td></tr></table>';
tooltip.write(tip);
tooltip.close();
} else if (ie4||ie5||ns5) {
var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
tipcss.backgroundColor = curBgColor;
tooltip.innerHTML = tip;
}
if (!tipFollowMouse) positionTip(evt);
else t1=setTimeout("tipcss.visibility='visible'",100);
}

var mouseX, mouseY;
function trackMouse(evt) {
standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
if (tipOn) positionTip(evt);
}

/////////////////////////////////////////////////////////////
// positionTip function
// If tipFollowMouse set false, so trackMouse function
// not being used, get position of mouseover event.
// Calculations use mouseover event position,
// offset amounts and tooltip width to position
// tooltip within window.
/////////////////////////////////////////////////////////////
function positionTip(evt) {
if (!tipFollowMouse) {
mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
}
// tooltip width and height
var tpWd = (ns4)? tooltip.width: (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
var tpHt = (ns4)? tooltip.height: (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
// document area in view (subtract scrollbar width for ns)
var winWd = (ns4||ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
var winHt = (ns4||ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
// check mouse position against tip and window dimensions
// and position the tooltip
if ((mouseX+offX+tpWd)>winWd)
tipcss.left = (ns4)? mouseX-(tpWd+offX): mouseX-(tpWd+offX)+"px";
else tipcss.left = (ns4)? mouseX+offX: mouseX+offX+"px";
if ((mouseY+offY+tpHt)>winHt)
tipcss.top = (ns4)? winHt-(tpHt+offY): winHt-(tpHt+offY)+"px";
else tipcss.top = (ns4)? mouseY+offY: mouseY+offY+"px";
if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
}

function hideTip() {
if (!tooltip) return;
t2=setTimeout("tipcss.visibility='hidden'",100);
tipOn = false;
}

document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')

</script>

</head>

<body>


<a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">Link 1</a><br>
<a href="#" onmouseover="doTooltip(event,1)" onmouseout="hideTip()">Link 2</a>

</body>
</html>


The part in red goes between the head tag, and the part in blue goes in the body. Hope this helps.

jonnyray
03-24-2007, 05:17 PM
I have tried the script in the head of a blank page with no other scripts and it still doesn’t work.

I move the script into the body of the page and it works.

I can only say it as it is, but I have visited the authors website (www.dyn-web.com)
&#183; Copyright 2002-2007 by Sharon Paine

And found conflicting information regarding this script

The code requires three small external JavaScript files: dw_event.js, dw_viewport.js, and dw_tooltip.js (total file size: 6.62K). The script tags for these files are placed at the end of the document just before the close body tag. View source code of example documents included in the download file to see how tooltip activating links and content to be displayed in the tooltip are set up.

It’s not the same advice as DD

thetestingsite
03-24-2007, 06:40 PM
Can you post a link to your problem page so that we can take see what could be causing this problem.



it's no good saying I'm not reading DD instructions correctly because I am


I didn't mean anything by it, simply answering the question at the end of your original post:



Could you please tell me which is the correct way to install this script?

jonnyray
03-24-2007, 07:23 PM
Hi

I've posted both test pages

The code is in the Head of this page


The Code is in the Body of this page

jonnyray
03-25-2007, 10:30 PM
one last appeal for help to get this script to work and find out what I am doing wrong.

Two url's re posted

The code is in the Head of this page


The Code is in the Body of this page

Markxxx
03-27-2007, 03:25 AM
I have this script before it was updated and it USED to give one more bit of information: This is as follows

<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>
</body>

</html>

That DIV ID seems to be lost in the updated version. If you look at the source code from the page it is there. It is this div ID that should be placed before the </body> tag.

I am having other issues like getting it to work with my CSS. It seems to kill my CSS code, so there may be a conflict. I have to see if I have my original file somewhere before the script was updated

jonnyray
03-27-2007, 10:24 PM
Hi Mark

Thanks for the info I tried the extra code in my page, but as I am using Homestead site builder I cannot get the code to the bottom of the page as the script for real tracker is permanently in that position.

A friend of mind gave me a very small temporary work around to get it working, but once working I found that it stopped my CSS page centring script from working.

I think I will go back to the authorís page and download the older version with the java script files and leave the DD version alone.

John

seventhfury
05-08-2008, 03:48 PM
I know that this is an old post, but I have been working all morning on trying to get this script to work with multiple test pages that I have built. I found that if I implemented the code exactly as it is in the test page I couldn't get it to work, but then I realized something.. my <body> tags had a bunch of preload stuff in them.. so basically I found that if I removed the preload images stuff the script worked just fine.

Now I'm stuck with another dilemma, I have to rebuild that section a different way but at least I found one possible solution to the script not working.

Thanks,

Mj

jscheuer1
05-08-2008, 04:47 PM
I know that this is an old post, but I have been working all morning on trying to get this script to work with multiple test pages that I have built. I found that if I implemented the code exactly as it is in the test page I couldn't get it to work, but then I realized something.. my <body> tags had a bunch of preload stuff in them.. so basically I found that if I removed the preload images stuff the script worked just fine.

Now I'm stuck with another dilemma, I have to rebuild that section a different way but at least I found one possible solution to the script not working.

Thanks,

Mj

Remove this from the script:


window.onload = initTip;

Then in your body tag, let's say it looked something like so:


<body onload="MM_preload_images('some.gif', . . . .)">

Keep the onload event that you had, but at the beginning of it have it like:


<body onload="initTip();MM_preload_images('some.gif', . . . .)">

rumorsai
09-06-2009, 03:51 AM
Hi DD,

I hope you guys can help me out. I wanted to use this script to present the image of what I create in substitute of the red_balloon.gif. Problem is the whenever I try to place the correct location of my new balloon image, it doesn't seem to pop up.

I do have a highly lit image with 2 mouseOver effects to serve as the link:

1. mouseOver and mouseOut = Show and Hide (lower lit .png)
2. mouseOver and mouseOut = toolTip (to show window w/ image)

I'm working out of Dreamweaver, but the way the application has you create CSS, would that be a problem, or do I just seem to be staring at code too long :confused:?

thanks
~Rai

rumorsai
09-30-2009, 12:03 AM
nevermind, i'll figure it out another way...