自定义alt提示实例

 

  要求制作一个图片的alt提示，前段显示商品名称+商品的促销信息（红色显示样式）

<style>

#toolTipLayer{position:absolute; visibility: hidden;z-index: 1000; margin:0 auto;}

</style>

<script language="javascript">

var ns4 = document.layers;

var ns6 = document.getElementById && !document.all;

var ie4 = document.all;

offsetX = 15;

offsetY = 0;

var toolTipSTYLE="";

var strlong="";

function initToolTips()

{

  if(ns4||ns6||ie4)

  {

    if(ns4) toolTipSTYLE = document.toolTipLayer;

    else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;

    else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;

    if(ns4) document.captureEvents(Event.MOUSEMOVE);

    else

    {

      toolTipSTYLE.visibility = "visible";

      toolTipSTYLE.display = "none";

    }

    document.onmousemove = moveToMouseLoc;

  }  

}

function toolTip(msg,prm, fg, bg)

{

  if(toolTip.arguments.length < 1) // hide

  {

    if(ns4) toolTipSTYLE.visibility = "hidden";

    else toolTipSTYLE.display = "none";

  }

  else // show

  {

    if(!fg) fg = "";

    if(!bg) bg = "#FFFFFF";

    var fm="#f00000";

    if(msg.length>14){

    strlong='width="175px"' ;

    }else{

    strlong="";

    }

    var content =

    '<table border="1px"'+strlong+' cellspacing="0" cellpadding="1" bgcolor="' + fg + '"><td>' +

    '<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + bg + 

    '"><td align="center"><font face="sans-serif" color="' + fg +

    '" style="font-size:12px">&nbsp\;' + msg +

    '&nbsp\;</font><font face="sans-serif" color="' + fm +

    '" style="font-size:12px">&nbsp\;' + prm +

    '&nbsp\;</font></td></table></td></table>';

    if(ns4)

    {

      toolTipSTYLE.document.write(content);

      toolTipSTYLE.document.close();

      toolTipSTYLE.visibility = "visible";

    }

    if(ns6)

    {

      document.getElementById("toolTipLayer").innerHTML = content;

      toolTipSTYLE.display='block'

    }

    if(ie4)

    {

      document.all("toolTipLayer").innerHTML=content;

      toolTipSTYLE.display='block'

    }

  }

}

function moveToMouseLoc(e)

{

    e= e || window.event; 

var mousePos = mouseCoords(e);   

    x = mousePos.x ;

    y = mousePos.y;    

  toolTipSTYLE.left = x+offsetX + "px";

  toolTipSTYLE.top = y +"px";

  return true;

}

 

function mouseCoords(e) 

{ 

if(e.pageX || e.pageY){ 

return {x:e.pageX, y:e.pageY}; 

}

return { 

x:e.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft, 

y:e.clientY + document.documentElement.scrollTop - document.documentElement.clientTop 

}; 

} 

</script>

。。。。。

 

 

<a href="<%=basePath %>product/<bean:write name = "prodcuts"  property="itemcode" />.html"  

            onMouseOver="toolTip('<bean:write name = "prodcuts"  property="itemname" />','<bean:write name = "prodcuts"  property="comments" />', '', '')" 

            onMouseOut="toolTip()" >

            <img src="<%=basePath %>goodspic/200g/<bean:write name = "prodcuts"  property="filename4" />" />

            </a>

 

 

 <div id="toolTipLayer" ></div>

<script language="JavaScript">

<!--

initToolTips(); 

//--></script>

。。。。