dcsimg
www.webdeveloper.com
Results 1 to 12 of 12

Thread: Putting little text boxes over images...

  1. #1
    Join Date
    Nov 2002
    Location
    Sydney, Australia
    Posts
    3

    Question Putting little text boxes over images...

    What's the quickest/easiest way to place text boxes over an image which is also a link to another page; so that people can see the boxes when they pass the Mouse over that area where the link "hand" is seen, and upon removing the Mouse, the text box disappears.

    For example, I have a sliced picture of a set of library books. I have made each slice into a link to another page in the website. If I move my Mouse over (say) the first slice of the image, I want to see that it is going to take me to a page called "Medieval Castles"; then I click on the link and I am there, and the box has disappeared until I return to the page where the sliced image is.

    I would appreciate a reply in plain language, so that my feeble brain can totally understand what I must do to achieve this task. Thank you, Kes.

  2. #2
    Join Date
    Nov 2002
    Posts
    4,473
    I don't think you really mean "textboxes". Usually people call those little helper things "tool tips".

    Although browsers support the "ALT" attribute of an image in different ways, many of them will display the "ALT" text when the mouse is over the image. In modern W3C compliant browsers (NS 6+, IE 5+, Mozilla), the "TITLE" attribute is used to display text on mouseover, and this is what the attribute was introduced to do.

    For example:

    <img src="..." TITLE="Medieval Castles">

  3. #3
    Join Date
    Nov 2002
    Posts
    984
    To get the image clickable you also need to add an <a>, ie something like

    <a href="..."><img src="..." alt="text to be shown when the image is not there" title="Medieval Castles"></a>

  4. #4
    Join Date
    Nov 2002
    Location
    Sydney, Australia
    Posts
    3

    Putting little text boxes over images...

    I wanted to thank you both for replying so promptly to my question. Even though I couldn't work out how to do it, I am grateful that you took the time to assist me. Because I really wanted to know the answer, I emailed a teacher of Dreamweaver/Fireworks Programmes with whom I did a course in 1999. He very graciously replied immediately with the following information - which I applied, and IT WORKED! If you use Dreamweaver/Fireworks, it is just so simple to do this:

    1. select the sliced (or unsliced) image in the document;
    2. choose the Properties panel
    3. type your alternate text into the "Alt" field on the right of the panel. Save the page and check it in the Browser.

    For the HTML buffs, use the following code:

    <img name="bookcase_r1_c1" (or whatever you want to call it)src="Images/bookcase_r1_c1.gif"(space)width="63" height="200" border="0"(space) alt="Castles of Count Leslie"(type your own text in the Alt box)>

    The parenthesis is mine of course. It should work in most HTML programmes.

    (PS: the website is here, if you are interested - check out the Library Room for the above text boxes: http://www.clanleslie.org)
    Good luck - Cheers, Kerry

  5. #5
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    But <img name="bookcase_r1_c1" src="Images/ bookcase_r1_c1.gif" width="63" height="200" border="0" alt="Castles of Count Leslie"> is wrong, as Stefan and gil have been trying to explain. It's typical of users of Dreamweaver to not understand that HTML needs to work on different kinds of browsers, including Braille and audio. The ALT text specifies a text to be displayed when the image cannot be and is required. (http://www.w3.org/TR/html4/struct/objects.html#adef-alt) The TITLE attribute is what you want. It's only Microsoft that confuses the two. Which is to say, if you persist then your page fail not only on Braille and audio browsers, but also on Graphical ones. Use the TITLE attribute for tool tips. (http://www.w3.org/TR/html4/struct/gl...tml#adef-title)

  6. #6
    Join Date
    Nov 2002
    Location
    Sydney, Australia
    Posts
    3

    Regarding Titles...

    Thank you Charles for that information. In Dreamweaver, I always entitle my pages - however, since reading about "Titles" in HTML, I guess I can be more specific in my description in future. Best regards to you.

  7. #7
    Join Date
    Nov 2002
    Posts
    984

    Re: Regarding Titles...

    Originally posted by kes3
    Thank you Charles for that information. In Dreamweaver, I always entitle my pages - however, since reading about "Titles" in HTML, I guess I can be more specific in my description in future. Best regards to you.
    You are a bit confused.
    In HTML there is both the entity <title> and an attribute title="".

    <title> is for naming your entire page.

    The attribute title="" will give you a popup
    <img title="this is a popup" ...

  8. #8
    Join Date
    Nov 2002
    Location
    Hove, UK
    Posts
    160
    I've not checked this but if you use ALT and TITLE which is shown on mouseover?

  9. #9
    Join Date
    Nov 2002
    Posts
    421
    if you use both - even IE can get it right - it shows title.

  10. #10
    Join Date
    Nov 2002
    Location
    Hove, UK
    Posts
    160
    Thanks, I'll be trying this out tomorrow!
    I do know that Mozilla doesn't like ALT tags for images - they don't work. I've not tried TITLE for images but for links they work fine in Mozilla.

  11. #11
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by Klyve1
    I do know that Mozilla doesn't like ALT tags for images - they don't work.
    On the contrary, in Mozilla ALT works just as it should. It shows up INSTEAD of the image when the image is not shown for whatever reason, just as the HTML spec sais it should.

    It is a BUG in IE that it uses it AS TITLE when the real TITLE is missing.

    Only TITLE should appear as a popup when you mouse over an image.

    I've not tried TITLE for images but for links they work fine in Mozilla.
    You will find that also the implementation of TITLE is superior in Mozilla. You can place it on almost ANY tag in HTML, <p> <span> <div> etc etc just as the SPEC say you should be able to do.
    This means you can put tooltip popups on basicly ANYTHING on your page.
    Sadly, no other browser I know of gets that right

  12. #12
    Join Date
    Nov 2002
    Location
    Hove, UK
    Posts
    160
    Thanks Stefan, that tip is going to come in very handy.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles