自定义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"> \;' + msg +
? ? ' \;</font><font face="sans-serif" color="' + fm +
? ? '" style="font-size:12px"> \;' + prm +
? ? ' \;</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>
。。。。