none
求解,关于JS在IE下不正常显示,未找到错误,求解! RRS feed

  • 问题

  •  

    主要功能:实现鼠标放上去在当前鼠标位置显示一张图片及标题文字.

     

    效果演示:http://www.7wind.net/wytx/new/newtx/013.asp

     

    但这个只能在table中显示,如果在div中多层嵌套后就出现问题,经测试,好像只能最多出现在一个DIV层中,不能DIV再有DIV层.

     

    而现在,我需要的这个效果是在DIV多层中实现,请教,如何修改这段JS?

     

     

    Code Snippet

    <html>
    <head>
    <title>test</title>
    <style type="text/css">
    <!--
    body{font-size:9pt;color:#9999CC;background-color:#00CC00;}
    -->
    </style>
    </head>
    <body>
    <div style="margin:0 auto;width:820px; height:600px; background-color:#999999;">
    <div style="float:left; width:400px; height:85px; overflow:hidden;">
      <p>测试一下效果</p>
    </div>
    <div id="test" style="float:left; width:400px; height:85px; overflow:hidden;margin:0 auto">
    <script language="javascript" type="text/javascript">
    <!--

    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; 
    var tipWidth= 160;
    var offX= 12; // how far from mouse to show tip
    var offY= 12;
    var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
    var tipFontSize= "8pt";
    var tipFontColor= "#000000";
    var tipBgColor= "#DDECFF";
    var origBgColor= tipBgColor; // in case no bgColor set in array
    var tipBorderColor= "#000080";
    var tipBorderWidth= 3;
    var tipBorderStyle= "ridge";
    var tipPadding= 4;

    // preload images that are to appear in tooltip, (width,height)
    var img1 = new Image(140,105); img1.src = "image/001s.jpg";
    var img2 = new Image(140,105); img2.src = "image/006s.jpg";

    // tooltip content goes here
    var messages = new Array();
    // multi-dimensional arrays containing
    // image, text, bgColor to be sent to tooltip
    messages[0] = new Array('image/001s.jpg','链接一的说明文字',"#FFFFFF");
    messages[1] = new Array('image/006s.jpg','链接二的说明文字',"#DDECFF");
    messages[2] = new Array('','','');

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

    // 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 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;
     if (ns4) {
      if (messages[num][2]) tipBgColor = messages[num][2];
      else tipBgColor = origBgColor;
      var tip = '<table bgcolor="' + tipBorderColor + '" width="' + tipWidth + '" cellspacing="0" cellpadding="' + tipBorderWidth + '" border="0"><tr><td><table bgcolor="' + tipBgColor + '" width="100%" cellspacing="0" cellpadding="' + tipPadding + '" border="0"><tr><td>'+ startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + tipFontColor + ';">' + 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:' + tipFontColor + ';">' + messages[num][1] + '</span>' + endStr;
      tipcss.backgroundColor = messages[num][2];
       tooltip.innerHTML = tip;
     }
     if (!tipFollowMouse) positionTip(evt);
     else t1=setTimeout("tipcss.visibility='visible'",100);
    }

    var mouseX, mouseY;
    function trackMouse(evt) {
     mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft;
     mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.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 + document.body.scrollLeft;
      mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.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: document.body.clientWidth+document.body.scrollLeft;
     var winHt = (ns4||ns5)? window.innerHeight+window.pageYOffset: document.body.clientHeight+document.body.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)? mouseY-(tpHt+offY): mouseY-(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;
    // tipcss.visibility = "hidden";
     t2=setTimeout("tipcss.visibility='hidden'",100);
     tipOn = false;
    }
    //-->
    </script>
    <a href="#" onMouseOver="doTooltip(event,0)" onMouseOut="hideTip()">链接一</a><br>
    <a href="#" onMouseOver="doTooltip(event,1)" onMouseOut="hideTip()">链接二</a>
    <div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>
    </div>
    </div>
    </body>

    </html>

     

     

     

    2009年1月8日 4:25

答案

全部回复

  • 求个JS效果

    可以在有超链接的地方提示显示为一张图片的效果,这个效果通用IE,Firefox,越精简越好,只要在鼠标移向超链接就在当前位置显示指定的图片。
    2009年1月10日 5:06
  • Hi , try this :

    http://www.walterzorn.com/tooltip/tooltip_e.htm
    2009年1月10日 9:42