Welcome Guest ( Log In | Register)



 
Reply to this topicStart new topic
> Pop Up
kvarnerexpress
post 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
Go to the top of the page
 
+Quote Post
Saint_Michael
post 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
T17 GFX Crew



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.
Go to the top of the page
 
+Quote Post
electriic ink
post Jul 9 2005, 06:49 AM
Post #3


Incest is a game the whole family can play.
Group Icon

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.
Go to the top of the page
 
+Quote Post
leiaah
post 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.
smile.gif

CODE

<img border="0" src="back.gif" alt="THIS PICTURE LOOKS NICE" width="271" height="257">
Go to the top of the page
 
+Quote Post
beeseven
post 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>
Go to the top of the page
 
+Quote Post
alexia
post 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
Go to the top of the page
 
+Quote Post
galexcd
post 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
Go to the top of the page
 
+Quote Post
reatum
post 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.
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic