kvarnerexpress 0 Report post Posted July 9, 2005 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 Share this post Link to post Share on other sites
Saint_Michael 3 Report post Posted July 9, 2005 oh thats easy use a roll over effect script here is the codingits in two parts buts usefulpart one insert this in between the <head> tags <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 <div id="dhtmltooltip"></div><script type="text/javascript">/************************************************ Cool DHTML tooltip script- Š Dynamic Drive DHTML code library (http://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 tooltipvar offsetypoint=20 //Customize y offset of tooltipvar ie=document.allvar ns6=document.getElementById && !document.allvar enabletip=falseif (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=thecolortipobj.innerHTML=thetextenabletip=truereturn 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 windowvar rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000//if the horizontal distance isn't enough to accomodate the width of the context menuif (rightedge<tipobj.offsetWidth)//move the horizontal position of the menu to the left by it's widthtipobj.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 positionedtipobj.style.left=curX+offsetxpoint+"px"//same concept with the vertical positionif (bottomedge<tipobj.offsetHeight)tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"elsetipobj.style.top=curY+offsetypoint+"px"tipobj.style.visibility="visible"}}function hideddrivetip(){if (ns6||ie){enabletip=falsetipobj.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 linkonMouseover="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. Share this post Link to post Share on other sites
electriic ink 1 Report post Posted July 9, 2005 You don't need all of that. What your asking can be solved very simply. Just use the following 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. Share this post Link to post Share on other sites
leiaah 0 Report post Posted July 9, 2005 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. <img border="0" src="back.gif" alt="THIS PICTURE LOOKS NICE" width="271" height="257"> Share this post Link to post Share on other sites
beeseven 0 Report post Posted July 10, 2005 For a popup you just have to put this: <a href="#" onmouseover="alert(' definition ')">Word to define</a> Share this post Link to post Share on other sites
alexia 0 Report post Posted July 26, 2005 Nice Tutorial and nice ScriptsThanks allBut i tell u dont use popup because Some Kind of firewalls Block Popup pages like ZoneAlarm and Some browsers Dont support PopupLike : IE6 + SP2 _full Share this post Link to post Share on other sites
galexcd 0 Report post Posted October 1, 2005 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 166060[/snapback] 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 Share this post Link to post Share on other sites
reatum 0 Report post Posted October 3, 2005 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 191025[/snapback] 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. Share this post Link to post Share on other sites
AlisCa 0 Report post Posted October 15, 2008 Damn! It's seems a spam. But! Did you ever been here?! hide.http://www.lyberty.com/ Try this 8-) Some pictures of our forum admin... Why did I tell you that sercet info? Dont know. Share this post Link to post Share on other sites
