Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Image w/ description tooltip help

  1. #1
    Join Date
    Feb 2006
    Location
    London
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image w/ description tooltip help

    1) Script Title: Image w/ description tooltip

    2) Script URL (on DD):http://www.dynamicdrive.com/dynamici...agetooltip.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?

  2. #2
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    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:

    Code:
    <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.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  3. #3
    Join Date
    Feb 2006
    Location
    London
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by jonnyray; 03-24-2007 at 06:40 PM.

  4. #4
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    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?
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  5. #5
    Join Date
    Feb 2006
    Location
    London
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by jonnyray; 03-26-2007 at 06:32 PM.

  6. #6
    Join Date
    Feb 2006
    Location
    London
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by jonnyray; 03-26-2007 at 06:32 PM.

  7. #7
    Join Date
    Feb 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #8
    Join Date
    Feb 2006
    Location
    London
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #9
    Join Date
    Mar 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Found an issue with this code that may make a difference

    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

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by seventhfury View Post
    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:

    Code:
    window.onload = initTip;
    Then in your body tag, let's say it looked something like so:

    Code:
    <body onload="MM_preload_images('some.gif', . . . .)">
    Keep the onload event that you had, but at the beginning of it have it like:

    Code:
    <body onload="initTip();MM_preload_images('some.gif', . . . .)">
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •