Using onMouseOver to show a definition box

D

Diane Alsing

I have a page that has words that needs some clarity. Instead of having them
link to a document with definitions, I would like when the user put his/her
mouse over the word/link to have the definition come up in a little box. I
thought I was close with the following code, but it's not right. Any help
would be greatly appreciated.

<head>
<style>
#var { position: relative;
top: 10px;
left: 5%;
background-color: orange;
visibility: hidden
}
</style>
</head>
<body>
This is a test for a <a href="#var"
onMouseOver="document.all.var.style.visibility='visible'"
onMouseOut="document.all.var.style.visibility='hidden'">
define var</a>

<div id="var">
This is the definition of VAR
</div>
</body>


Regards,
Diane
 
D

Diane Alsing

Sorry - this code actually works - i just choose a poor variable name (var) -
I was testing with Value at Risk - figures ;-(
 
M

Murray

You may find this to be a better method, Diane (depending on how you want
the definition placed) -

<style>
#foo { /* position: relative;
top: 10px;
left: 5%; */ don't need position
background-color: orange;
display: none;
}
</style>
</head>

<body>
This is a test for a <a href="#blah"
onMouseOver="document.getElementById('foo').style.display='block'"
onMouseOut="document.getElementById('foo').style.display='none'">define
VAR.</a>

<div id="foo">
This is the definition of VAR
</div>
 
J

Jim Cheshire \(JIMCO\)

Diane said:
I have a page that has words that needs some clarity. Instead of
having them link to a document with definitions, I would like when
the user put his/her mouse over the word/link to have the definition
come up in a little box. I thought I was close with the following
code, but it's not right. Any help would be greatly appreciated.
Click to expand...

Diane,

overLib is a free component that you can use for this, and it's VERY easy to
use... and pretty cool. I think Murray posted this link originally (correct
me if I'm wrong someone) and here it is:

http://www.bosrup.com/web/overlib/

I'm in the process of writing a review for a very cool 3D animation tool,
and because some of the terminology may not be familiar to a FrontPage user,
I'm using it for pop-up definitions and it's working out quite nicely.

--
Jim Cheshire
JIMCO
http://www.jimcoaddins.com

Now offering templates ranging from
affordable standard templates to
powerful e-commerce applications!
 
D

Diane Alsing

Thanks guys - I appreciate the help!!!!!

Diane Alsing said:
Sorry - this code actually works - i just choose a poor variable name (var) -
I was testing with Value at Risk - figures ;-(
Click to expand...
 
M

Murray

Good question.

Then you would need to do this, I think -

<style>
.foo { position: relative;
top: 10px;
left: 5%;
background-color: orange;
display: none;
}
</style>
</head>

<body>
This is a test for a <a href="javascript:;"
onMouseOver="document.getElementById('var1').style.display='block'"
onMouseOut="document.getElementById('var1').style.display='none'">define
VAR1.</a>
<span id="var1" class="foo">This is the definition of VAR1</span>

This is a test for <a href="javascript:;"
onMouseOver="document.getElementById('var2').style.display='block'"
onMouseOut="document.getElementById('var2').style.display='none'">define
VAR2.</a>
<span id="var2" class="foo">This is the definition of VAR2</span>

etc.

But in this case, the motion introduced by the display style toggling from
none to block might be distracting.
 
D

Diane Alsing

Yeah - that was it. Very frustrating being new to this ;-) Thanks again for
the help!

diane
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Wrong Email Client is called 4
Frontpage 2000, browser trouble 5
Entity name must immediately follow the '&' in the entity referenc 0
Aligning trouble 4
Conveyor Belt slideshow dhtml script 0
How to make scroll bar permanently visible, Word 365 0
onmouseover 0
onmouseout, onmouseover not firing for div in a div 9

Top