Pop Up

free web hosting
Open Discussion > CONTRIBUTE > Computers > Programming Languages > HTML, XML etc..

Pop Up

kvarnerexpress
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

Reply

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

 

 

 


Reply

electriic ink
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.

Reply

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

Reply

beeseven
For a popup you just have to put this:
CODE
<a href="#" onmouseover="alert(' definition ')">Word to define</a>

Reply

alexia
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

Reply

galexcd
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

Reply

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

Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.

Similar Topics
Looking for pop

*RANDOM STUFF*





*SIMILAR VIDEOS*
Searching Video's for pop

*MORE FROM TRAP17.COM*
advertisement



Pop Up



 

 

 

 

ADD REPLY / Got an Opinion! a humble request :-) RAPID SEARCH! Free Hosting [X]
Express your Opinions, Thoughts or Contribute your information that might help someone here.
Ask your Doubts & Queries to get answers.. "Together, We enlight each other!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE