Word bubbles

[Guest]

Does anyone know how to make it so when you hover over a word on the website,
a little box will pop up with more info. For example, when the user moves
their mouse over the word "Dementia," a little blurb would show up with the
definition and then go away when you move your mouse away.

Thanks in advance for your help!

 

[Steve Easton]

One way is with a span tag and title:

<span title="Definition of Dementia.">Dementia</span>



--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
........................with a computer

 

[Murray]

<p>Here is some text with the word <span title="I am a word bubble that will
appear when you mouse over "Dementia" style="cursor:help;">Dementia</span>
that you might want to read.</p>

Use the title attribute.

 

[p c]

In the link tag add title="text you want to be displayed" like this

<a href="URL" title="text you want to be displayed">link label</a>

Wehn view it in a browser: When the cursor hovers over a link, depending
on the browser and/or graphical user interface, some informative text
about the link is shown:

* It pops up, not in a regular window, but in a special hover box,
which disappears when the cursor is moved away (sometimes it disappears
anyway after a few seconds, and reappears when the cursor is moved away
and back). IE and Mozilla Firefox show the title, Opera also shows the URL.

* In addition, the URL may be shown in the status bar.

...PC

 

[Uncle Joe]

Very interesting. This facility is not affected by popup blockers?

 

[Guest]

Thank you, I appreciate your quick response!
I'm still having a problem with making it so it doesn't have to "go
anywhere." I don't want the users to have to click on it, I just want the
definition to "pop up." Is there a way to do that?

 

[p c]

No. the title tag is a standard HTML atribute... The hover rectangle
(not a bubble) is not Window (popup).

You can slos get the bulbile effect with javacstipt and popups. The
buble looks like rectangle but is a popup Window w/o toolbars, etc.

...pc

 

[Murray]

What I show below does exactly what you want. Did you try it?

 

[Guest]

Yes, I tried it and the code appeared on the page view. I'll keep playing
with it though as I'm not too familiar with HTML and I'm sure I'm just not
spacing something right or a small thing like that. I'll let you know if I
can't get it to work, thanks!

 

[Murray]

Yes, I tried it and the code appeared on the page view.

This usually means you didn't enter it exactly as I wrote it. Can you show
me the code you tried, please?

 

[Guest]

Thank you for your quick response. Unfourtunatley, I'm at my "real job"
today and don't have FP loaded at work and I'm heading out of town right when
I got off for the weekend. I will be back in town on Sunday and would love
to send you the code then. Thanks for your help!
Paulene

 

[Murray]

That'll be fine. Just copy that code and paste it into a reply here,
please.

 

[Paul S. Wolf]

Did you enter the text Murray suggested in code view or in the page view?

This must be entered in the code view:

<p>Here is some text with the word <span title="I am a word
bubble that will appear when you mouse over Dementia"
style="cursor:help;"> Dementia</span> that you might want to
read.</p>

If you enter the HTML codes such as <p>, <span title="...> , </p>,
etc. in the page view, FrontPage will assume you want them to appear as
text in the page. If you enter it in code view, it will realize they
are HTML codes.

Murray: Doesn't your example have unbalanced " marks?

You wrote:

<span title="I am a word bubble that will appear when you mouse over
"Dementia" style="cursor:help;">Dementia</span>

Won't the " before Dementia will end the title= attribute? Shouldn't it
read as I typed it above, or as follows?

<span title="I am a word bubble that will appear when you mouse over
&quot;Dementia&quot;" style="cursor:help;">Dementia</span>

 

[Murray]

This must be entered in the code view:

Paul - this is exactly right. Thanks!

Murray: Doesn't your example have unbalanced " marks?

Sure does. Your correction is the umm correct correction!