<style> #link1_tooltip { position: relative; width: 150px; border: 2px solid black; padding: 5px 10px; color: black; font-weight: bold; background-color: red; } #span1_tooltip { position: relative; width: 200px; border: 2px solid blue; padding: 5px 10px; color: blue; font-weight: bold; background-color: yellow; } .fauxLink { color: blue; cursor: pointer; text-decoration: underline; } </style> <p>Using <a id="link1" href="http://www.daveclarkconsulting.com/" class="tooltip">links</a> for Easy DHTML ToolTips,<br> and using <span id="span1" class="fauxLink tooltip">spans</span> for Easy DHTML ToolTips.</p> <div id="link1_tooltip"> <p>Link tooltip content...</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> <div id="span1_tooltip"> <p>Span tooltip content...</p> <p>Ma quande lingues coalesce, li grammatica del.</p> </div> <script type="text/javascript"> /* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com Created by: Dave Clark | http://www.DaveClarkConsulting.comLicensed under: U.S. Copyright */ /* Easy DHTML ToolTips * by Dave Clark I (a.k.a., MrNobody) * Copyright (c) 2009 * All Rights Reserved Author: Dave Clark Consulting Website: http://www.DaveClarkConsulting.com Location: Terra Bella, CA, USA Right to copy, use, and distribute (for free) granted as long as this header remains intact. To use, link this JavaScript external library file at the end of your page's BODY section. Then, just give your link, span, etc., a unique id and a special class value which identifies that HTML element as having an associated tooltip. The association is made by giving the associated tooltip element an id which is a combination of the original element's id and special class with an underscore character between them. For example: You have a word or phrase which should have a tooltip displayed. You can wrap that word or phrase in SPAN tags and give the SPAN tag an id of "span1" and use "tooltip" as the special class value. Then you would define a DIV whose content is to be the tooltip. That DIV would be given an id of "span1_tooltip" in order to associate it with the SPAN. */ var MyEasyToolTips = new EasyToolTips('tooltip', 'MyEasyToolTips'); function EasyToolTips(className, usrObjName) { // Easy Tool Tips Constructor Function var strict = document.documentElement && document.documentElement.scrollHeight && document.documentElement.scrollHeight > 0; var toolid, dAttrs = (strict) ? document.documentElement : document.body; GenEasyToolTips(document.links, this); GenEasyToolTips(document.getElementsByTagName("SPAN"), this); function GenEasyToolTips(list, output) { var x, tip, len = list.length; // find out how many items in list for (x=0; x<len; ++x) { // loop on document links to find tooltips if(list[x].id // link must have an id && list[x].id > " " // which is greater than blanks && list[x].className // and a class name && list[x].className.indexOf(className) >= 0 // containing the specified class name && (tip = document.getElementById(toolid=(list[x].id+"_"+className)))) { // associated tool tip is link id + _className output[toolid] = new EasyToolTip(list[x], tip); // generate an easy tool tip entry } } output.show = function(tooltip, event) { // generic tooltip show function tooltip.style.display = "block"; // show tooltip var tx = event.clientX + 10 + dAttrs.scrollLeft; // initial tooltip x placement var ty = event.clientY + 10 + dAttrs.scrollTop; // initial tooltip y placement var dx = dAttrs.clientWidth + dAttrs.scrollLeft; // current document x max viewable var dy = dAttrs.clientHeight + dAttrs.scrollTop; // current document y max viewable if (tx+tooltip.offsetWidth > dx) tx = dx - tooltip.offsetWidth; if (ty+tooltip.offsetHeight > dy) ty = event.clientY - 5 - tooltip.offsetHeight + dAttrs.scrollTop; tooltip.style.left = tx + "px"; // final tooltip x placement tooltip.style.top = ty + "px"; // final tooltip y placement event.cancelBubble = true; // cancel event bubbling return false; // skip any other event handling } output.hide = function(tooltip, event) { // generic tooltip hide function tooltip.style.display = "none"; // hide tooltip event.cancelBubble = true; // cancel event bubbling return false; // skip any other event handling } } function EasyToolTip(owner, tooltip) { // generate an easy tool tip entry tooltip.style.display = "none"; // start tooltip off as non-display tooltip.style.position = "absolute"; // tooltip will be absolutely positioned tooltip.style.zIndex = "+2"; // tooltip will float above document content tooltip.style.left = "0px"; // start tooltip off at document left tooltip.style.top = "0px"; // start tooltip off at document top this.easytip = tooltip; // save a pointer to the tooltip if (window.Event) { // if there is a static Event object then event-time event block is passed to handler owner.onmouseover = new Function("event", "return "+usrObjName+".show("+usrObjName+"['"+toolid+"'].easytip, event)"); owner.onmouseout = new Function("event", "return "+usrObjName+".hide("+usrObjName+"['"+toolid+"'].easytip, event)"); } else { // else event-time event block is global owner.onmouseover = new Function("return "+usrObjName+".show("+usrObjName+"['"+toolid+"'].easytip, event)"); owner.onmouseout = new Function("return "+usrObjName+".hide("+usrObjName+"['"+toolid+"'].easytip, event)"); } } } </script>

 Kodu Kopyala

Hata Bildir | Tavsiye Et
 

Bu içeriğe oy verin: 1 2 3 4 5 6 7 8 9 10

Yorumlar / Yeni Yorum Yaz

Bu içeriğe yorum yazılmamış.