Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Mouse over code for simple text?
3 views
Skip to first unread message
Jen Gailt
Nov 2, 2011, 2:52:50 PM11/2/11
to
I want to add a simple mouseover code to some stuff on my web page.
For example if they see the word: Mouse
it would have an underline, like it was a link, so people would put the mouse
over it, then text would pop up above their cursor, saying "Mouse over code",
explaining what it was.
Is it simple to do that?
For example if they see the word: Mouse
it would have an underline, like it was a link, so people would put the mouse
over it, then text would pop up above their cursor, saying "Mouse over code",
explaining what it was.
Is it simple to do that?
Winston
Nov 3, 2011, 12:59:17 PM11/3/11
to
browser-independently you want it to work, read up on the following:
* the HTML tags <abbr> and <acronym>
* the intrinsic events onmouseover / onmouseout (requires Javascript)
* the style sheet pseudo-class ":hover" (requires CSS).
HTH,
-WBE
GeekGranny
Nov 4, 2011, 1:36:31 AM11/4/11
to
w...@ubeblock.psr.com.invalid (Winston) wrote :
I'm not sure what they call what I want to do. Like a text tool tip?
Say the word BBB is on my web page, and it's underlined like a link, and
someone doesn't know what BBB means, so they hold the mouse over it and a
text box pops up that says Better Business Bureau.
Something like that doesn't seem like it would be super hard to do, right?
Say the word BBB is on my web page, and it's underlined like a link, and
someone doesn't know what BBB means, so they hold the mouse over it and a
text box pops up that says Better Business Bureau.
Something like that doesn't seem like it would be super hard to do, right?
GeekGranny
Nov 4, 2011, 1:39:17 AM11/4/11
to
w...@ubeblock.psr.com.invalid (Winston) wrote :
I tried the acronym tag and it works. Thanks!
<acronym title="as soon as possible"><u>ASAP</u></acronym>
<acronym title="as soon as possible"><u>ASAP</u></acronym>
GeekGranny
Nov 4, 2011, 1:47:23 AM11/4/11
to
GeekGranny <GeekG...@geek.bnm> wrote :
ACK! I take that back. I tried it and it worked in CoffeeCup HTML Editor but
NOT in Seamonkey after I uploaded it!
NOT in Seamonkey after I uploaded it!
Winston
Nov 5, 2011, 12:20:59 PM11/5/11
to
Jen Gailt <J...@no-spam.pst> originally asked:
of tags. That's one reason why you see web sites that say things like
"optimized for [some particular browser]". For example, Netscape 6
supported both <abbr> and <acronym>; MSIE for Mac supported <acronym> but
not <abbr>; and MSIE 6 for Microsoft Windows didn't support either.
Cascading Style Sheets, by comparison, are supported by pretty much all
the newer graphical browsers, and while implementations of that vary, too,
common things like the example below should work the same in all of them.
CSS has several ways of simulating <abbr>. This example uses a fixed
offset, and so doesn't work so well if the abbreviation is too close to the
edge of the screen, but may give you an idea of how style rules can be used
to create various effects:
----------
<head>
<style type="text/css"><!--
.abbrlabel { position:relative; display:inline }
.abbrlabel div { position:absolute; top:17px; display:none }
.abbrlabel:hover div { display:block }
--></style>
</head>
<body>
Here's an abbreviation:
<div class="abbrlabel">CONUS<div>Continental United States</div></div>.
</body>
----------
That technique may not work on tiny-screen cellphone browsers, browsers for
the blind, etc.
HTH,
-WBE
>>>> I want to add a simple mouseover code to some stuff on my web page.
>>>> For example if they see the word: Mouse
>>>> it would have an underline, like it was a link, so people would put the
>>>> mouse over it, then text would pop up above their cursor, saying "Mouse
>>>> over code", explaining what it was.
>>>> Is it simple to do that?
I replied:
>>>> For example if they see the word: Mouse
>>>> it would have an underline, like it was a link, so people would put the
>>>> mouse over it, then text would pop up above their cursor, saying "Mouse
>>>> over code", explaining what it was.
>>>> Is it simple to do that?
>>> Depending on exactly what effect you want and how widely /
>>> browser-independently you want it to work, read up on the following:
>>> * the HTML tags <abbr> and <acronym>
>>> * the intrinsic events onmouseover / onmouseout (requires Javascript)
>>> * the style sheet pseudo-class ":hover" (requires CSS).
GeekGranny <GeekG...@geek.bnm> replied:
>>> browser-independently you want it to work, read up on the following:
>>> * the HTML tags <abbr> and <acronym>
>>> * the intrinsic events onmouseover / onmouseout (requires Javascript)
>>> * the style sheet pseudo-class ":hover" (requires CSS).
>> I tried the acronym tag and it works. Thanks!
>> <acronym title="as soon as possible"><u>ASAP</u></acronym>
but then later added:
>> <acronym title="as soon as possible"><u>ASAP</u></acronym>
> ACK! I take that back. I tried it and it worked in CoffeeCup HTML Editor
> but NOT in Seamonkey after I uploaded it!
Don't be too surprised. Different browsers implemented different sets
> but NOT in Seamonkey after I uploaded it!
of tags. That's one reason why you see web sites that say things like
"optimized for [some particular browser]". For example, Netscape 6
supported both <abbr> and <acronym>; MSIE for Mac supported <acronym> but
not <abbr>; and MSIE 6 for Microsoft Windows didn't support either.
Cascading Style Sheets, by comparison, are supported by pretty much all
the newer graphical browsers, and while implementations of that vary, too,
common things like the example below should work the same in all of them.
CSS has several ways of simulating <abbr>. This example uses a fixed
offset, and so doesn't work so well if the abbreviation is too close to the
edge of the screen, but may give you an idea of how style rules can be used
to create various effects:
----------
<head>
<style type="text/css"><!--
.abbrlabel { position:relative; display:inline }
.abbrlabel div { position:absolute; top:17px; display:none }
.abbrlabel:hover div { display:block }
--></style>
</head>
<body>
Here's an abbreviation:
<div class="abbrlabel">CONUS<div>Continental United States</div></div>.
</body>
----------
That technique may not work on tiny-screen cellphone browsers, browsers for
the blind, etc.
HTH,
-WBE
Adrienne Boswell
Nov 5, 2011, 7:57:15 PM11/5/11
to
Jen Gailt <J...@no-spam.pst> wrote
You can use the title attribute and CSS, or you could use the title
attribute and the u element (if you are using HMTL5 and the text is NOT a
link - you would also probably want to include some kind of type
convention document on the site).
Using title and CSS:
<span class="underline" title="This text has a hover behavior">Mouse
</span>
Using title and U:
<u title="This text has a hover behavior">Mouse</u>
--
Adrienne Boswell
Arbpen Web Site Design Services - http://www.cavalcade-of-coding.info/
The Good Plate - Fresh Gourmet Recipes - http://the-good-plate.com/
Please respond to the group so others can share
attribute and the u element (if you are using HMTL5 and the text is NOT a
link - you would also probably want to include some kind of type
convention document on the site).
Using title and CSS:
<span class="underline" title="This text has a hover behavior">Mouse
</span>
Using title and U:
<u title="This text has a hover behavior">Mouse</u>
--
Adrienne Boswell
Arbpen Web Site Design Services - http://www.cavalcade-of-coding.info/
The Good Plate - Fresh Gourmet Recipes - http://the-good-plate.com/
Please respond to the group so others can share
Winston
Nov 6, 2011, 8:22:14 PM11/6/11
to
Jen Gailt <J...@no-spam.pst> originally posted
> You can use the title attribute ...
...
(I've rarely had occasion to use it myself.)
Jen, yes, try this instead.
-WBE
>> I want to add a simple mouseover code to some stuff on my web page.
>> For example if they see the word: Mouse
>> it would have an underline, like it was a link, so people would put
>> the mouse over it, then text would pop up above their cursor, saying
>> "Mouse over code", explaining what it was.
>> Is it simple to do that?
to which Adrienne Boswell <arb...@yahoo.com> replied:
>> For example if they see the word: Mouse
>> it would have an underline, like it was a link, so people would put
>> the mouse over it, then text would pop up above their cursor, saying
>> "Mouse over code", explaining what it was.
>> Is it simple to do that?
> You can use the title attribute ...
...
> <span class="underline" title="This text has a hover behavior">Mouse
> </span>
...
> </span>
> <u title="This text has a hover behavior">Mouse</u>
Color me embarassed that I forgot about the title attribute. :-/
(I've rarely had occasion to use it myself.)
Jen, yes, try this instead.
-WBE
Hot-Text
Mar 16, 2012, 9:11:32 AM3/16/12
to
"Jen Gailt" <J...@no-spam.pst> wrote in message news:Xns9F918309354...@74.209.136.91...
<a href="" title="simple as a mouse over">mouse</a>
0 new messages