/    Sign up×
Community /Pin to ProfileBookmark

Putting little text boxes over images…

Copy linkTweet thisAlerts:
Nov 24.2002

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.

to post a comment
HTML

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@gil_davisNov 24.2002 — 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:

[font=courier]<img src="..." TITLE="Medieval Castles">[/font]
Copy linkTweet thisAlerts:
@StefanNov 24.2002 — 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>
Copy linkTweet thisAlerts:
@kes3authorNov 25.2002 — 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
    Copy linkTweet thisAlerts:
    @CharlesNov 25.2002 — [font=georgia]But[/font] [font=monospace]<img name="bookcase_r1_c1" src="Images/ bookcase_r1_c1.gif" width="63" height="200" border="0" alt="Castles of Count Leslie">[/font][font=georgia] 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/global.html#adef-title)[/font]
    Copy linkTweet thisAlerts:
    @kes3authorNov 25.2002 — 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.
    Copy linkTweet thisAlerts:
    @StefanNov 26.2002 — [i]Originally posted by kes3 [/i]

    [B]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. [/B][/QUOTE]

    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" ...
    Copy linkTweet thisAlerts:
    @Klyve1Nov 27.2002 — I've not checked this but if you use ALT and TITLE which is shown on mouseover?
    Copy linkTweet thisAlerts:
    @Beach_BumNov 27.2002 — if you use both - even IE can get it right - it shows title.
    Copy linkTweet thisAlerts:
    @Klyve1Nov 27.2002 — 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.
    Copy linkTweet thisAlerts:
    @StefanNov 28.2002 — [i]Originally posted by Klyve1 [/i]

    I do know that Mozilla doesn't like ALT tags for images - they don't work.
    [/QUOTE]
    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. [/QUOTE]

    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 ?
    Copy linkTweet thisAlerts:
    @Klyve1Nov 28.2002 — Thanks Stefan, that tip is going to come in very handy.
    ×

    Success!

    Help @kes3 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.24,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...