Jump to content
xisto Community

Recommended Posts

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

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

<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 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

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.

Share this post


Link to post
Share on other sites

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

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.
:unsure:

<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

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.