How to achieve an effect?

Discussion in 'HTML' started by Dung Ping, Feb 21, 2006.

  1. Dung Ping

    Dung Ping Guest

    Hello,

    I like to achieve following on my web page:

    When the visitor moves the cursor to a word on the page, a small square
    will appear besides it. In the square the visitor will be able to see
    explanation about the word. The size of the square depends on how
    many words in it. This is exactly like what happens on MS Windows.
    When moving the cursor to an icon, information about it will appear in
    a square besides it.

    With the html, this effect may be achieved with the title attribute
    within img tag. But I like it to happen when the cursor moves over
    text.

    Thanks.
     
    Dung Ping, Feb 21, 2006
    #1
    1. Advertising

  2. Dung Ping wrote:

    > Hello,


    Good morning.

    > I like to achieve following on my web page:
    >
    > When the visitor moves the cursor to a word on the page, a small
    > square will appear besides it. In the square the visitor will be able
    > to see explanation about the word. The size of the square depends
    > on how many words in it. This is exactly like what happens on MS
    > Windows. When moving the cursor to an icon, information about it will
    > appear in a square besides it.
    >
    > With the html, this effect may be achieved with the title attribute
    > within img tag. But I like it to happen when the cursor moves over
    > text.


    Will this suffice? If you want more than a hundred characters, you'll
    have to resort to some JavaScript trickery, which of course won't work
    for those with it disabled or unavailable.

    CSS:
    ..tip { border-bottom: 1px dotted; }

    HTML:
    <p>A long, long time ago in a
    <span class="tip" title="A galaxy is very large and you can't get to the
    other side before supper">galaxy</span>
    far, far away ...</p>

    --
    -bts
    -Warning: I brake for lawn deer
     
    Beauregard T. Shagnasty, Feb 21, 2006
    #2
    1. Advertising

  3. Dung Ping

    Guest

    Beauregard T. Shagnasty wrote:
    > Dung Ping wrote:
    >
    > > Hello,

    >
    > Good morning.
    >
    > > I like to achieve following on my web page:
    > >
    > > When the visitor moves the cursor to a word on the page, a small
    > > square will appear besides it. In the square the visitor will be able
    > > to see explanation about the word. The size of the square depends
    > > on how many words in it. This is exactly like what happens on MS
    > > Windows. When moving the cursor to an icon, information about it will
    > > appear in a square besides it.
    > >
    > > With the html, this effect may be achieved with the title attribute
    > > within img tag. But I like it to happen when the cursor moves over
    > > text.

    >
    > Will this suffice? If you want more than a hundred characters, you'll
    > have to resort to some JavaScript trickery, which of course won't work
    > for those with it disabled or unavailable.
    >
    > CSS:
    > .tip { border-bottom: 1px dotted; }
    >
    > HTML:
    > <p>A long, long time ago in a
    > <span class="tip" title="A galaxy is very large and you can't get to the
    > other side before supper">galaxy</span>
    > far, far away ...</p>
    >
    > --
    > -bts
    > -Warning: I brake for lawn deer


    Thanks a lot. It works well. By the way, can the font in the
    rectangle be changed, such as color or size?

    Thanks again.
     
    , Feb 21, 2006
    #3
  4. Dung Ping

    Jim Moe Guest

    Dung Ping wrote:
    >
    > With the html, this effect may be achieved with the title attribute
    > within img tag. But I like it to happen when the cursor moves over
    > text.
    >

    See the <dfn> element.

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
     
    Jim Moe, Feb 21, 2006
    #4
  5. wrote:

    > Thanks a lot. It works well. By the way, can the font in the
    > rectangle be changed, such as color or size?


    The rectangle is normally referred to as a "tooltip" and is controlled
    by the browser and the operating system. No way to change it that I know
    about.

    --
    -bts
    -Warning: I brake for lawn deer
     
    Beauregard T. Shagnasty, Feb 21, 2006
    #5
  6. Dung Ping

    Dung Ping Guest

    Beauregard T. Shagnasty wrote:
    > wrote:
    >
    > > Thanks a lot. It works well. By the way, can the font in the
    > > rectangle be changed, such as color or size?

    >
    > The rectangle is normally referred to as a "tooltip" and is controlled
    > by the browser and the operating system. No way to change it that I know
    > about.
    >
    > --
    > -bts
    > -Warning: I brake for lawn deer


    I want to apologize for the confusion that I may have caused by using
    two different email names on this thread.

    Thank all for help.
     
    Dung Ping, Feb 22, 2006
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. J
    Replies:
    1
    Views:
    310
    Kevin Spencer
    Aug 20, 2003
  2. Eric
    Replies:
    4
    Views:
    2,706
  3. Wee Bubba

    Can I achieve this with a Repeater?

    Wee Bubba, May 18, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    295
    Wee Bubba
    May 18, 2004
  4. fuli open

    How to achieve this effect?

    fuli open, Apr 28, 2007, in forum: HTML
    Replies:
    4
    Views:
    332
    dorayme
    Apr 29, 2007
  5. R.A.M.
    Replies:
    3
    Views:
    558
    Bergamot
    Nov 11, 2007
Loading...

Share This Page