JavaScript Title, alt prompts (Tips) to achieve source code interpretation_javascript skills

The image tag img also has an alt attribute that can play a similar role. But obviously this kind of prompt box is too monotonous. For this reason, someone has used JavaScript to achieve a beautiful prompt box effect. This effect is commonly used in WEB games. Among them, the NetEase mailbox and Xunlei Film and Television page in the picture below use this effect. Although there are some differences in the implementation effects of each other, the overall implementation idea remains unchanged. In order to facilitate everyone to understand the implementation details and customize the effect you want, I found a good source code online and made detailed comments on it. I hope it will be helpful to everyone.

　

Commented code:

Copy code The code is as follows :

/***********************************************
　　一个JavaScript Title、alt提示（Tips）源码解读
代码注释：唐国辉
作者博客：http://webflash.cnblogs.com
***********************************************/

//定义getElementById快捷方式
function $(obj)
{
if(typeof(obj)=='object')
{
return obj;
}
else
{
return document.getElementById(obj);
}
}
//定义document.write快捷方式,代替复杂的DOM操作
function $P(str)
{
document.write(str);
}
//脚本错误屏蔽
window.onerror=function ()
{
return true;
};
/*
定义变量：
pltsPop（提示内容文字，来自对象的alt或title属性，不包含HTML）
toolTip（提示内容DOM对象，即后面定义的content变量）
pltsPoptop（上方提示标题DOM对象）
pltsPopbot（下方提示标题DOM对象）
topLeft（左上角提示标题DOM对象）
botLeft（左下方提示标题DOM对象）
topRight（右上角提示标题DOM对象）
botRight（右下方提示标题DOM对象）
*/
var pltsPop,toolTip,pltsPoptop,pltsPopbot,topLeft,botLeft,topRight,botRight;
//设置提示窗口相对提示对象的位置偏移量
var pltsoffsetX=10;
var pltsoffsetY=15;
var pltsTitle="";
//创建一个绝对定位的隐藏图层
$P('

');
//把刚创建的层对象赋值给一个变量，此语句一定要出现在层创建之后
var pltsTipLayer=$('pltsTipLayer');
//定义鼠标移到对象上时处理函数，主要提取alt或title属性值，并初始化提示框HTML及样式
function PltsMouseOver(ev)
{
//兼容不同浏览器的事件和对象获取
var Event=window.event||ev;
var o=Event.srcElement||Event.target;
//如果对象alt属性存在并且不等于空，就把它的值存到dypop属性，并清空当前alt内容
if(o.alt!=null&&o.alt!="")
{
o.dypop=o.alt;
o.alt="";
}
//如上，对具有title属性的对象作同样的判断和处理，清空title属性值是让对象默认的提示效果失效
if(o.title!=null&&o.title!="")
{
o.dypop=o.title;
o.title="";
}
pltsPop=o.dypop;
if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
{
//把上面创建的提示层显示出来，暂时移到左边很远，虽然显示但用户看不到
pltsTipLayer.style.left=-1000;
pltsTipLayer.style.display='';
/*
格式化提示信息，把其中的\n换成
，比如像下面这样定义title值，显示出来会是作者和性别各一行，因为Tom和Sex之间有 ：

Article title...

*/
var Msg=pltsPop.replace(/n/g,"
");
Msg=Msg.replace(/
//Set the final position value of the prompt box obtained by comprehensive processing to the object, where scrollTop is the height of the web page being scrolled. Because style.top is relative to the entire document rather than the browser window, scrolling and hiding must be included.
pltsTipLayer.style.left=MouseX pltsoffsetX document.documentElement.scrollLeft popLeftAdjust "px";
pltsTipLayer.style.top=MouseY pltsoffsetY document.documentElement.scrollTop popTopAdjust "px";
return true;
}
//Define event binding function
function PltsInit()
{
document.onmouseover=PltsMouseOver;
document.onmousemove=PltsMouseMove;
}
//Call the event binding function
PltsInit();

Calling method: save the above code into an external independent JS file, and then include it in the web page In this JS file, finally add the title attribute to the object that needs to be prompted, and the image can add the alt attribute. Example: Abbreviated title Or

Related links:
1, http://www.cnblogs.com/czh-liyu/archive/2007/12/30/1021146.html
2. http://boxover.swazz.org
3. http://blog.csdn.net/lanmao100/archive/2008/10/31/3191767.aspx