How to achieve this effect?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
When moving the cursor to an underlined word in some pages, a large
rectangle will appear at its right upper corner or somewhere around,
displaying relevant information.  When the cursor moves away, the
rectangle disappears.  This is a convenient and useful effect, and I
like to learn the skills.

If anyone knows where to go, such as online tutorial or books, please
share the information with me.  Thanks.

fuli open

Re: How to achieve this effect?

fuli open wrote:
Quoted text here. Click to load it

You didn't supply a URL where you saw this effect so I'll guess it's a
"tool tip", typically done with the title attribute, but there are other
ways to show pop-up text, such as

You can use the title attribute on pretty much any element - links,
images, table cells, whole paragraphs, etc.

Just use pop-up text with caution. If the info is important, make sure
people who don't use a mouse can still get to it.


Re: How to achieve this effect?

fuli open wrote:
Quoted text here. Click to load it
  If the text is underlined, it is likely the <acronym> tag. Without an
URL, though, I'm only guessing.
  As Bergamot noted you add the "title" attribute to get the flyout.

jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Re: How to achieve this effect?

Scripsit fuli open:

Quoted text here. Click to load it

I'm sure that if you had tried hard, you could have described this more
descriptively than "this effect" at your Subject line. Remember that people
decide mostly on the basis of the Subject line whether they bother reading a
message at all, so by using vague Subject lines, you're excluding the busy
experts from your audience.

In fact, it's not convenient, and it's not useful at all when authors _rely_
on it.

To start with, in the most common method of creating such popup texts, the
font size is stupidly small and the text vanishes after a few seconds,
though you can get it back by using the mouse again - and by the time you
locate the position where you were reading, it vanishes again.

Quoted text here. Click to load it

The brief tutorial is "Don't".

When you have designed and implemented a page where all the relevant
information is available without such tricks, either as normal content or
via normal links, and you would like to enhance it by making some of the
information _more comfortably_ available to some users, you can ask for the
Advanced Tutorial. But then you have to pay: to post a URL and an
explanation of what texts should appear as mouseover tooltips and where.

Jukka K. Korpela ("Yucca")

Re: How to achieve this effect?

Quoted text here. Click to load it

Are we to conclude then that you have a little time on your hands
at the moment then? <g>


Site Timeline