|
|
|
|
![]() ![]() |
Jul 9 2005, 01:07 AM
Post
#1
|
|
|
Super Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Members Posts: 407 Joined: 13-December 04 Member No.: 2,696 |
I need to make a website for this English paper I'm doing and instead of having footnote definitions for certain words, I want a little window with the definition to pop up when the reader holds their cursor over that word. Is this possible and if so, how do I do it?
kvarnerexpress |
|
|
|
Jul 9 2005, 01:21 AM
Post
#2
|
|
|
$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: [HOSTED] Posts: 6,447 Joined: 21-September 04 From: 9r33|\| 399$ 4|\|D 5P4/\/\ Member No.: 1,218 ![]() |
oh thats easy use a roll over effect script here is the coding
its in two parts buts useful part one insert this in between the <head> tags QUOTE <style type="text/css"> #dhtmltooltip{ position: absolute; width: 150px; border: 2px solid black; padding: 2px; background-color: lightyellow; visibility: hidden; z-index: 100; /*Remove below line to remove shadow. Below line should always appear last within this CSS*/ filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); } </style> next add this to the body of QUOTE <div id="dhtmltooltip"></div> <script type="text/javascript"> /*********************************************** * Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ 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> then finally add this to the word just make it a dead link QUOTE onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)"; onMouseout="hideddrivetip()" but best suggestion os go to http://www.dynamicdrive.com/ and look at tool tips it should help out. |
|
|
|
Jul 9 2005, 06:49 AM
Post
#3
|
|
|
Incest is a game the whole family can play. ![]() Group: [MODERATOR] Posts: 1,217 Joined: 11-February 05 From: Heaven Member No.: 3,709 |
You don't need all of that. What your asking can be solved very simply. Just use the following code:
CODE <a href="#" title="Word definition">Word you want to define</a> That's it. Nothing else. Now when the user puts there mouse over the word, a little piece of text comes up with the word's definition. |
|
|
|
Jul 9 2005, 03:48 PM
Post
#4
|
|
|
Super Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Members Posts: 436 Joined: 21-January 05 From: Koronadal City, Philippines Member No.: 3,358 |
I agree with cmatcmextra. It works the same as the alt property of an image where a mouse over on an object displays its alternate text.
CODE <img border="0" src="back.gif" alt="THIS PICTURE LOOKS NICE" width="271" height="257"> |
|
|
|
Jul 10 2005, 03:48 PM
Post
#5
|
|
|
Privileged Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Members Posts: 629 Joined: 26-February 05 Member No.: 3,995 |
For a popup you just have to put this:
CODE <a href="#" onmouseover="alert(' definition ')">Word to define</a>
|
|
|
|
Jul 26 2005, 07:37 PM
Post
#6
|
|
|
Super Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Members Posts: 310 Joined: 9-February 05 From: Italian Member No.: 3,677 |
Nice Tutorial and nice Scripts
Thanks all But i tell u dont use popup because Some Kind of firewalls Block Popup pages like ZoneAlarm and Some browsers Dont support Popup Like : IE6 + SP2 _full |
|
|
|
Oct 1 2005, 08:14 PM
Post
#7
|
|
|
Define:EVIL PROGRAMMER (ē'vəl prō'grăm'ər)- n. An organism that converts caffeine into evil software. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: [HOSTED] Posts: 1,020 Joined: 25-September 05 From: L.A. Member No.: 12,251 |
QUOTE(alexia @ Jul 26 2005, 11:37 AM) Nice Tutorial and nice Scripts Thanks all But i tell u dont use popup because Some Kind of firewalls Block Popup pages like ZoneAlarm and Some browsers Dont support Popup Like : IE6 + SP2 _full Yes, a div layer popup, would look the best... (javascript alerts really get annoying, epsecially if the user is scrolling down, and happens to roll over your link. Then they have to move thier mouse all the way to the "ok" button to contine... like i said: very annoying |
|
|
|
Oct 3 2005, 08:11 PM
Post
#8
|
|
|
Member [Level 1] ![]() ![]() ![]() ![]() Group: Members Posts: 63 Joined: 3-October 05 Member No.: 12,515 |
QUOTE(qwertyiscool @ Oct 1 2005, 03:14 PM) Yes, a div layer popup, would look the best... (javascript alerts really get annoying, epsecially if the user is scrolling down, and happens to roll over your link. Then they have to move thier mouse all the way to the "ok" button to contine... like i said: very annoying matt kruse has a really cool div layer popup script made up at http://www.mattkruse.com/javascript/popupwindow/ it can popup divs or windows depending upon browser capabilities. Hope this helps. |
|
|
|
![]() ![]() |