文章的关键字获得焦点显示提示内容，关键字失去焦点隐藏提示内容

一般文章中都会有些术语或者概念较深刻的词，大家看不懂。很多人都会选择给这些关键字加个超链接，跳到另一个页面查看他的内容，从SEO的角度看有利，但这样其实很不友好。本文教大家一个方法：给超链接加个注释信息，鼠标获得焦点显示提示信息，鼠标失去焦点，隐藏该提示信息。很方便的喔~

以下是脚本内容：

<script  type="text/javascript">

//显示提示内容

function showHelpTip(e, sHtml, bHideSelects) {// find anchor elementvar el = e.target || e.srcElement;while (el.tagName != "A")el = el.parentNode;// is there already a tooltip? If so, remove itif (el._helpTip) {helpTipHandler.hideHelpTip(el);}helpTipHandler.hideSelects = Boolean(bHideSelects);// create element and insert last into the bodyhelpTipHandler.createHelpTip(el, sHtml);// position tooltiphelpTipHandler.positionToolTip(e);// add a listener to the blur event.// When blurred remove tooltip and restore anchorel.onblur = helpTipHandler.anchorBlur;el.onkeydown = helpTipHandler.anchorKeyDown;}//隐藏提示内容function hidenHelpTip(e) {// find anchor elementvar el = e.target || e.srcElement;while (el.tagName != "A")el = el.parentNode;// is there already a tooltip? If so, remove itif (el._helpTip) {helpTipHandler.hideHelpTip(el);}}var helpTipHandler = {hideSelects:false,helpTip:null,showSelects:function (bVisible) {if (!this.hideSelects) return;// only IE actually do something in herevar selects = [];if (document.all)selects = document.all.tags("SELECT");var l = selects.length;for(var i = 0; i < l; i++)selects[i].runtimeStyle.visibility = bVisible ? "" : "hidden";},create:function () {var d = document.createElement("DIV");d.className = "help-tooltip";d.onmousedown = this.helpTipMouseDown;d.onmouseup = this.helpTipMouseUp;document.body.appendChild(d);this.helpTip = d;},createHelpTip:function (el, sHtml) {if (this.helpTip == null) {this.create();}var d = this.helpTip;d.innerHTML = sHtml;d._boundAnchor = el;el._helpTip = d;return d;},// Allow clicks on A elements inside tooltiphelpTipMouseDown:function (e) {var d = this;var el = d._boundAnchor;if (!e) e = event;var t = e.target || e.srcElement;while (t.tagName != "A" && t != d)t = t.parentNode;if (t == d) return;el._onblur = el.onblur;el.onblur = null;},helpTipMouseUp:function () {var d = this;var el = d._boundAnchor;el.onblur = el._onblur;el._onblur = null;el.focus();},anchorBlur:function (e) {var el = this;helpTipHandler.hideHelpTip(el);},anchorKeyDown:function (e) {if (!e) e = window.eventif (e.keyCode == 27) {// ESChelpTipHandler.hideHelpTip(this);}},removeHelpTip:function (d) {d._boundAnchor = null;d.style.filter = "none";d.innerHTML = "";d.onmousedown = null;d.onmouseup = null;d.parentNode.removeChild(d);//d.style.display = "none";},hideHelpTip:function (el) {var d = el._helpTip;/*Mozilla (1.2+) starts a selection session when movedand this destroys the mouse events until reloadedd.style.top = -el.offsetHeight - 100 + "px";*/d.style.visibility = "hidden";//d._boundAnchor = null;el.onblur = null;el._onblur = null;el._helpTip = null;el.onkeydown = null;this.showSelects(true);},positionToolTip:function (e) {this.showSelects(false);var scroll = this.getScroll();var d = this.helpTip;// widthif (d.offsetWidth >= scroll.width)d.style.width = scroll.width - 10 + "px";elsed.style.width = "";// leftif (e.clientX > scroll.width - d.offsetWidth)d.style.left = scroll.width - d.offsetWidth + scroll.left + "px";elsed.style.left = e.clientX - 2 + scroll.left + "px";// topif (e.clientY + d.offsetHeight + 18 < scroll.height)d.style.top = e.clientY + 18 + scroll.top + "px";else if (e.clientY - d.offsetHeight > 0)d.style.top = e.clientY + scroll.top - d.offsetHeight + "px";elsed.style.top = scroll.top + 5 + "px";d.style.visibility = "visible";},// returns the scroll left and top for the browser viewport.getScroll:function () {if (document.all && typeof document.body.scrollTop != "undefined") {// IE modelvar ieBox = document.compatMode != "CSS1Compat";var cont = ieBox ? document.body : document.documentElement;return {left:cont.scrollLeft,top:cont.scrollTop,width:cont.clientWidth,height:cont.clientHeight};}else {return {left:window.pageXOffset,top:window.pageYOffset,width:window.innerWidth,height:window.innerHeight};}}};

</script>

然后为文章的超链接，调用相关的函数就可以实现了：

<a onmouseout="hidenHelpTip(event);"onmouseover="showHelpTip(event, 'Normally we would ship out PAL or NTSC version camera according to different countries. For example, we would ship out PAL camera to United Kingdom, Australia, German, France and etc; we would ship out NTSC camera to United States, Canada and etc. If you want to specify PAL or NTSC camera, you could leave us a note to “Order Instructions/Comments” when checking out.'); return false;" class="HelpLink">PAL/NTSC</a>