Cool Mouseover

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts
  • Bruce Hewitt
    Major

    • Jun 2006
    • 335

    Cool Mouseover

    Hi Guys.
    Got a cool mouseover technique.
    1. upload your images to ftp
    2. Open page html and click the beginning of body tab and insert the following:
    <script type="text/javascript">

    var dom = (document.getElementById) ? true : false;
    var ns5 = (!document.all && dom || window.opera) ? true: false;
    var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
    var ie4 = (document.all && !dom) ? true : false;
    var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;

    var origWidth, origHeight;

    // 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('untitled5.bmp','Stunning 3 piece – R 699',"#FFFFFF");
    messages[1] = new Array('untitled13.bmp', 'Full piece in blue – R 1 095.',"#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%"><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
    // 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.backgroundColor = tipBgColor;
    tipcss.borderColor = tipBorderColor;
    tipcss.borderWidth = tipBorderWidth+"px";
    tipcss.padding = tipPadding+"px";
    tipcss.borderStyle = tipBorderStyle;
    }
    if (tooltip&&tipFollowMouse) {
    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 (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 = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
    mouseY = (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 = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
    mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
    }
    // tooltip width and height
    var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
    var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
    // document area in view (subtract scrollbar width for ns)
    var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
    var winHt = (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 = mouseX-(tpWd+offX)+"px";
    else tipcss.left = mouseX+offX+"px";
    if ((mouseY+offY+tpHt)>winHt)
    tipcss.top = winHt-(tpHt+offY)+"px";
    else tipcss.top = 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>
    NOTE: replace red text with your file names and text with your own text
    3. Click HTML tab twice, double click on logo in design and enter the following:
    <a href="#" onmouseover="doTooltip(event,1)" onmouseout="hideTip()">Link 2</a>
    NOTE: the events match the messages in the first script and you can have as many as you wish. You can use this as a text box as well
    Bruce Hewitt
    YOU ONLY LIVE ONCE...
    IT MIGHT AS WELL BE TODAY!

    http://www.panzoomproperties.com
    http://www.thebabydolls.biz
    bruce@webbrok.com
  • Bruce Hewitt
    Major

    • Jun 2006
    • 335

    #2
    Re: Cool Mouseover

    Sorry.
    For a demo click on:
    Bruce Hewitt
    YOU ONLY LIVE ONCE...
    IT MIGHT AS WELL BE TODAY!

    http://www.panzoomproperties.com
    http://www.thebabydolls.biz
    bruce@webbrok.com

    Comment

    • Collectors-info
      General

      • Feb 2006
      • 8703

      #3
      Re: Cool Mouseover

      Like it! Was messing around with one myself & used some of BV's logo makers styles. http://www.collectors-info.com/testi...lish-hint.html Mouse over the [?] links.
      But will give your one a go.

      Thanks
      Regards Chris.

      Collectables, Collecting, collectors-info.com

      www.chrismorris.co.uk

      House build project

      Comment

      • Aliens Anonymous
        Special Status

        • Jan 2006
        • 1144

        #4
        Re: Cool Mouseover

        Originally posted by Bruce Hewitt View Post
        Sorry.
        For a demo click on:
        http://www.test.webbrok.com
        It is only common courtesy when using scripts like these or any other scripts to leave the authors name and site and the copy right in this case

        /*
        Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
        Copyright 2002 by Sharon Paine
        Visit http://www.dynamicdrive.com for this script
        */

        Please replace before using.

        Comment

        • Bruce Hewitt
          Major

          • Jun 2006
          • 335

          #5
          Re: Cool Mouseover

          So sorry aliens.

          Copy and pasted from my word doc where some of the unneccessary script has been removed.

          Thanks for pointing that out.
          Bruce Hewitt
          YOU ONLY LIVE ONCE...
          IT MIGHT AS WELL BE TODAY!

          http://www.panzoomproperties.com
          http://www.thebabydolls.biz
          bruce@webbrok.com

          Comment

          Working...
          X