|
|
|
|
![]() ![]() |
Jul 15 2005, 01:59 PM
Post
#1
|
|
|
Member [ Level 1 ] Group: Members Posts: 32 Joined: 4-May 05 Member No.: 4,707 |
Here is a little tutorial to make those small yellow-background boxes (tootltips) that pop-up for some links that describe them when you hover the mouse over them, it uses DHTML, CSS, HTML, and Javascript, so it gives us a much more wide range than my previous tutorials that just where on HTML.
OK, so here we go... Put this right under <body> CODE <div id="dhtmltooltip"></div> <script type="text/javascript"> var offsetxpoint=-60 //Customize x offset of tooltip var offsetypoint=20 //Customize y offset of tooltip var ie=document.all var ns6=document.getElementById && !document.all var enabletip=false if (ie||ns6) var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : "" function ietruebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function ddrivetip(thetext, thecolor, thewidth){ if (ns6||ie){ if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px" if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor tipobj.innerHTML=thetext enabletip=true return false } } function positiontip(e){ if (enabletip){ var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft; var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop; //Find out how close the mouse is to the corner of the window var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20 var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20 var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000 //if the horizontal distance isn't enough to accomodate the width of the context menu if (rightedge<tipobj.offsetWidth) //move the horizontal position of the menu to the left by it's width tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px" else if (curX<leftedge) tipobj.style.left="5px" else //position the horizontal position of the menu where the mouse is positioned tipobj.style.left=curX+offsetxpoint+"px" //same concept with the vertical position if (bottomedge<tipobj.offsetHeight) tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px" else tipobj.style.top=curY+offsetypoint+"px" tipobj.style.visibility="visible" } } function hideddrivetip(){ if (ns6||ie){ enabletip=false tipobj.style.visibility="hidden" tipobj.style.left="-1000px" tipobj.style.backgroundColor='' tipobj.style.width='' } } document.onmousemove=positiontip </script> Put this with your CSS <style> tag, or .css file. CODE #dhtmltooltip { position: absolute; width: 150px; border: 1px solid #C1C1C1; padding: 2px; background-color: #EFEFEF; color: #000000; visibility: hidden; z-index: 100; filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); } And put this in your link CODE onMouseover="ddrivetip('Your tooltip text','black', 300)"; onMouseout="hideddrivetip()" A link example would be CODE <a href="http://www.trap17.com/forums/saint-michaels-html-tips-tricks-4-t24328.html"onMouseover="ddrivetip('Your text here','red', 300)";
onMouseout="hideddrivetip()">Text Here</a> |
|
|
|
Jul 15 2005, 11:56 PM
Post
#2
|
|
|
Member [ Level 1 ] Group: Members Posts: 41 Joined: 13-July 05 Member No.: 7,065 |
I personally tried this tutorial and it was very straight forward. I was able to get the results and find that it can easily be customized to suit your needs through the CSS <style> tag. I also would like to point out that when I opened it in Internet Explorer, it was initially blocked with Internet Explorer saying that it was restricting the file from showing active content that could access your computer. However, I'm not sure if other browsers block it. Either way, it was a great tutorial and very helpful.
|
|
|
|
Jul 16 2005, 12:47 PM
Post
#3
|
|
|
Member [ Level 1 ] Group: Members Posts: 32 Joined: 4-May 05 Member No.: 4,707 |
QUOTE(AzNxSuperNova @ Jul 15 2005, 11:56 PM) I personally tried this tutorial and it was very straight forward. I was able to get the results and find that it can easily be customized to suit your needs through the CSS <style> tag. I also would like to point out that when I opened it in Internet Explorer, it was initially blocked with Internet Explorer saying that it was restricting the file from showing active content that could access your computer. However, I'm not sure if other browsers block it. Either way, it was a great tutorial and very helpful. Yeah, Internet Explorer does that with Javascript for me too, so that is why I only use FireFox now, thanks for the feedbakc. |
|
|
|
Jul 17 2005, 06:32 PM
Post
#4
|
|
|
Premium Member Group: Members Posts: 227 Joined: 25-April 05 Member No.: 4,369 |
very nice tutorial
|
|
|
|
Aug 5 2005, 12:06 AM
Post
#5
|
|
|
Newbie [ Level 2 ] Group: Members Posts: 22 Joined: 4-August 05 Member No.: 7,640 |
Nice tutorial. I like it a lok, easy to understand and helpful!
|
|
|
|
Aug 5 2005, 02:06 AM
Post
#6
|
|
|
Hedonist at large Group: Members Posts: 610 Joined: 30-July 05 From: another realm Member No.: 7,524 |
Great tutorial. I'm going to use this in my site. Thanks a lot.
|
|
|
|
Mar 6 2008, 09:07 AM
Post
#7
|
|
|
Newbie [ Level 1 ] Group: Members Posts: 0 Joined: 1-November 07 Member No.: 25,869 |
thanks
Creating Tooltips This is really nice, I have tried this for the image but its doesn't work? -reply by sudhir |
|
|
|
Mar 17 2008, 10:36 PM
Post
#8
|
|
|
Newbie [ Level 2 ] Group: Members Posts: 12 Joined: 17-March 08 Member No.: 29,182 |
WoW i thought that was only possible for ads well TY dose it work with images and can you change the color of them
|
|
|
|
![]() ![]() |
Similar Topics
|
Lo-Fi Version | Time is now: 5th December 2008 - 12:03 AM |