Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 11-11-2011, 03:30 PM   PM User | #1
BSquared18
New Coder

 
Join Date: May 2007
Posts: 22
Thanks: 6
Thanked 0 Times in 0 Posts
BSquared18 is an unknown quantity at this point
How to Do a Text Rollover Callout with HTML

Hello,

On a web page, I want to simulate the "Comment" feature in MS Word, where the text has a yellow background, and when the mouse is moved over the text, the comment pops up in a box.

The closest I've been able to come is the following:


<A HREF="" TITLE="Technically, a comma
belongs here, but because
the second clause is short,
the comma isn't necessary
and disturbs the flow."><span style="background-color: yellow">a woman and</span></A>


But there are two problems: The target ("a woman and") is underlined, and if the target is clicked on, the user is sent somewhere else.

Any suggestions on how to get the effect I want without the underlining and without it being a link to somewhere else?

I'd like to keep it simple if possible, using HTML alone.

Thanks!
Bill
BSquared18 is offline   Reply With Quote
Old 11-11-2011, 03:47 PM   PM User | #2
BubikolRamios
Senior Coder

 
Join Date: Dec 2005
Location: Slovenia
Posts: 1,876
Thanks: 114
Thanked 76 Times in 76 Posts
BubikolRamios is on a distinguished road
It si underlined & links you omewhere coz that is default for <a> tag. Pick any other tag instead.
That is you could erase everything regarding A and move title into span.
__________________
Found a flower or bug and don't know what it is ?
agrozoo.net galery
if you don't spot search button at once, there is search form:
agrozoo.net galery search
BubikolRamios is offline   Reply With Quote
Old 11-11-2011, 04:01 PM   PM User | #3
BSquared18
New Coder

 
Join Date: May 2007
Posts: 22
Thanks: 6
Thanked 0 Times in 0 Posts
BSquared18 is an unknown quantity at this point
Hi,

I tried playing around in your suggestion but don't get it.

Could you please show what the code would look like?

Thanks,
Bill
BSquared18 is offline   Reply With Quote
Old 11-11-2011, 04:05 PM   PM User | #4
teedoff
Senior Coder

 
Join Date: Aug 2010
Location: High Point, NC
Posts: 3,325
Thanks: 5
Thanked 363 Times in 360 Posts
teedoff is on a distinguished road
You could just add a style rule to remove the underline...


text-decoration: none;
__________________
Teed
teedoff is offline   Reply With Quote
Old 11-11-2011, 04:08 PM   PM User | #5
BubikolRamios
Senior Coder

 
Join Date: Dec 2005
Location: Slovenia
Posts: 1,876
Thanks: 114
Thanked 76 Times in 76 Posts
BubikolRamios is on a distinguished road
Code:
<span style="background-color: yellow" TITLE="Technically, a comma
belongs here, but because
the second clause is short,
the comma isn't necessary
and disturbs the flow.">a woman and</span>
__________________
Found a flower or bug and don't know what it is ?
agrozoo.net galery
if you don't spot search button at once, there is search form:
agrozoo.net galery search
BubikolRamios is offline   Reply With Quote
Users who have thanked BubikolRamios for this post:
BSquared18 (11-11-2011)
Old 11-11-2011, 04:12 PM   PM User | #6
BSquared18
New Coder

 
Join Date: May 2007
Posts: 22
Thanks: 6
Thanked 0 Times in 0 Posts
BSquared18 is an unknown quantity at this point
Thanks, BubikolRamios.

That did the trick!

Bill
BSquared18 is offline   Reply With Quote
Reply

Bookmarks

Tags
callout, html, rollover

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 12:20 PM.


Advertisement
Log in to turn off these ads.