And for the picture tag IMG also has an ALT attribute that can play a similar role. But obviously this kind of cue box is too monotonous, for this reason someone uses JavaScript to achieve a beautiful hint box effect, this effect is commonly used in the web game, which the next picture of NetEase Mailbox and Thunder movie page used to this effect, although some differences in the realization of the effect, but the overall realization of the idea is unchanged. In order to facilitate everyone to understand the details of implementation to facilitate the customization of their desired effect, I found a good source of the Internet, and its detailed comments, I hope to help.
/***********************************************
A JavaScript Title, Alt tip (TIPS) Source code interpretation
Code comments: Tang
Author Blog: http://webflash.cnblogs.com
***********************************************/
Define getElementById Shortcuts
function $ (obj)
{
if (typeof (obj) = ' object ')
{
return obj;
}
Else
{
return document.getElementById (obj);
}
}
Define document.write shortcuts, instead of complex DOM operations
function $P (str)
{
document.write (str);
}
Script Error Masking
Window.onerror=function ()
{
return true;
};
/*
To define a variable:
Pltspop (Prompt content text, alt or Title attribute from object, no HTML included)
ToolTip (Prompts the content Dom object, that is, a content variable defined later)
Pltspoptop (Tip title Dom object above)
Pltspopbot (Tip title DOM object below)
TopLeft (Tip of Caption Dom object in upper left corner)
Botleft (hint title DOM object below left)
TopRight (prompt title DOM object in upper right corner)
Botright (hint title DOM object below right)
*/
var pltspop,tooltip,pltspoptop,pltspopbot,topleft,botleft,topright,botright;
Sets the position offset of the prompt window relative to the prompt object
var pltsoffsetx=10;
var pltsoffsety=15;
var pltstitle= "";
Create a hidden layer that is absolutely positioned
$P (' <div id=\ "pltstiplayer\" style= "Display:none; position:absolute; z-index:10001" mce_style= "display:none; Position:absolute; z-index:10001 "></div>");
Assign the Layer object that you just created to a variable, which must be present after the layer is created
var pltstiplayer=$ (' Pltstiplayer ');
Defines a handler function to move the mouse over an object, mainly extracting the ALT or Title attribute value, and initializing the hint box HTML and style
function Pltsmouseover (EV)
{
Event and object acquisition compatible with different browsers
var event=window.event| | Ev
var o=event.srcelement| | Event.target;
If the object Alt attribute exists and is not equal to NULL, its value is saved to the Dypop property and the current alt content is emptied
if (o.alt!=null&&o.alt!= "")
{
O.dypop=o.alt;
O.alt= "";
}
As above, to the object with the title attribute to make the same judgment and processing, empty the Title property value is to let the object default hint effect is invalid
if (o.title!=null&&o.title!= "")
{
O.dypop=o.title;
O.title= "";
}
Pltspop=o.dypop;
if (pltspop!=null&&pltspop!= "" &&typeof (pltspop)!= "undefined")
{
Display the hint layer created above, temporarily move to the left very far, although the display but the user can not see
pltstiplayer.style.left=-1000;
Pltstiplayer.style.display= ';
/*
Format the hint to change the \ n to <br/>, such as defining the title value like the following, which is displayed as a line between the author and the gender, because there is a \ n between Tom and sex:
<div title= "Author:tom
Sex:male ">article title...</div>
*/
var msg=pltspop.replace (/\n/g, "<br/>");
Msg=msg.replace (/\0x13/g, "<br/>");
Define a regular expression check to see if the content contains something like this "{hint title}", and {} and {{} are excluded, if not, by default "Introduction" as the tip of the title
var re=/\{(. [ ^\{]*) \}/ig;
if (!re.test (MSG))
{
pltstitle= "<label style=" \ "mce_style=" \ "" Color: #000 \ "> Introduction </label>";
}
Else
{
re=/\{(. [ ^\{]*) \} (. *)/ig;
Extract content from {}
Pltstitle=msg.replace (Re, "$") + "";
Replace {content}, including {}, with NULL to get the content of the final hint body
re=/\{(. [ ^\{]*) \}/ig;
Msg=msg.replace (Re, "");
}
Define the contents of the Cue box HTML and style and place the relevant content in the corresponding variable
var content= "<dl id=\" tooltip\ "style=" \ "mce_style=" ""-moz-opacity:0.85;opacity:0.85; Filter:alpha (opacity=85);p adding:2px;background: #fff; \ "><dd id=\" pltspoptop\ "class=\" toolTipTitle\ "style=" "\" mce_style= "\" "Line-height:20px;\" ><p id=\ "topleft\" class=\ "left\" ><b><label style= "\" Mce_ Style= "\" "Color: #ffffff \" >↖</label> "+pltstitle+" </b></p><p id=\ "topright\" right \ "style=" \ "mce_style=" \ "" Display:none\ "><b>" +pltstitle+ "<label style=" \ "mce_style=" \ "COLOR: #ffffff \ ">↗</label ></b></p></dd><dd class=\" tooltipmsg\ ">" +msg+ "</dd><dd id=\ "pltspopbot\" style= "\" mce_style= "\" "Display:none\" class=\ "tooltiptitle\" ><p "id=\" botleft\ "class=\" ><b><label style= "\" mce_style= "\" "Color: #ffffff \" >↙</label > "+pltstitle+" </b></p ><p id=\ "botright\" class=\ "right\" style= "\" mce_style= "\" "Display:none\" ><b> "+pltstitle+" < Label StylE= "\" mce_style= "\" "Color: #ffffff \" >↘</label></b></p></dd></dl> ";
Pltstiplayer.innerhtml=content;
tooltip=$ ("ToolTip");
pltspoptop=$ ("Pltspoptop");
pltspopbot=$ ("Pltspopbot");
topleft=$ ("TopLeft");
botleft=$ ("Botleft");
topright=$ ("TopRight");
botright=$ ("Botright");
Sets the width of the Tip box, which is the smallest value in both the size of the balloon and the size of the browser's visible window, which automatically adjusts the balloon size to a new width when the browser window is smaller than the balloon itself.
Tooltip.style.width=math.min (pltstiplayer.clientwidth,document.documentelement.clientwidth/2.2) + "px";
}
Else
{
Pltstiplayer.innerhtml= ';
Pltstiplayer.style.display= ' None ';
}
}
Defines the handler function when the mouse moves over an object, triggering an event every pixel moving
function Pltsmousemove (EV)
{
if (pltstiplayer.innerhtml== ')
return true;
var event=window.event| | Ev
Gets the current x, y coordinate of the cursor
var Mousex=event.clientx;
var Mousey=event.clienty;
Get Prompt Box Width height
var popheight=pltstiplayer.clientheight;
var popwidth=pltstiplayer.clientwidth;
If the current cursor y-coordinate + balloon y-axis offset + Tip box height > Current window visibility height, the general Processing window to be prompted under the object, such as the footer has a link need to be prompted when the case is, consider using the title below
if (mousey+pltsoffsety+popheight>document.documentelement.clientheight)
{
The prompt box appears to need an extra value when you want to prompt the object Poptopadjust as the basis for the final positioning of the cue box
poptopadjust=-popheight-pltsoffsety*1.5;
Pltspoptop.style.display= "None";
Pltspopbot.style.display= "";
}
Else
{
poptopadjust=0;
Pltspoptop.style.display= "";
Pltspopbot.style.display= "None";
}
Decide whether to use the left or right title
if (mousex+pltsoffsetx+popwidth>document.documentelement.clientwidth)
{
popleftadjust=-popwidth-pltsoffsetx*2;
Topleft.style.display= "None";
Botleft.style.display= "None";
The following two headings are shown, in fact, finally see only a position on the title, because TopRight is pltspoptop child elements, if Pltspoptop does not show, topright display is also invisible, botleft the same
Topright.style.display= "";
Botright.style.display= "";
}
Else
{
popleftadjust=0;
Topleft.style.display= "";
Botleft.style.display= "";
Topright.style.display= "None";
Botright.style.display= "None";
}
Set the final position value of the resulting prompt box to the object, where ScrollTop is the height of the page being rolled, because the style.top is relative to the entire document rather than the browser window, so to calculate the scroll hidden height, scrollleft the same
pltstiplayer.style.left=mousex+pltsoffsetx+document.documentelement.scrollleft+popleftadjust+ "px";
pltstiplayer.style.top=mousey+pltsoffsety+document.documentelement.scrolltop+poptopadjust+ "px";
return true;
}
Defining event-binding functions
function Pltsinit ()
{
Document.onmouseover=pltsmouseover;
Document.onmousemove=pltsmousemove;
}
Calling the event-binding function
Pltsinit ();
Call method: Put the above code into an external stand-alone JS file, and then include this JS file in the page page, and finally give the object to be prompted to add title attributes, the picture can be added alt attribute on it. Example: <a href= "#" title= "{full title} full title text" > abbreviated title </a> or
