Image alt="name" box help

@jlsheetsJan 22.2003

This is going to be an odd request but I know there is a way to change the color of the alt box and text color in the alt box of an image.

You know how when you have an image and if it’s named via the alt=”name” when you put your mouse on it there is a box. How do I change the background color and text font and color of that box?

Is it Javascript DHTML? If anyone knows the coding for it I’d greatly appreciate it.

to post a comment

Full-stack Developer

20 Comments(s) _↴

@jpmoriartyJan 22.2003 — #i think the default colours and so on can only be changed with access to the system. However, i do know that there is javascript and DHTML you can use to do your own, should you wish. THe example i've found is from a mate of mine's site - if you hover over the links on the left hand side (some of them anyway) then there are boxes that pop up, and also have html commands (like<b>) inside them. Fairly nifty.

If you're competent then you should be able to hack away at his code to see what he's done and replicate it on your site. that's what i tried to do (before i got bored and decided against it!)

The site is [URL=http://www.henrybevan.co.uk]henry bevan's site[/URL] - if there are simpler ways of doing it then i'd sure be interested, but this is the only one i've seen.

@CharlesJan 22.2003 — #[font=georgia]By the way, that little box that shows up in MSIE displaying the value of the ALT attribute is a non-standard and incorrect feature. The little box is called a "tool tip" and it's supposed to be associated with the TITLE attribute. Of the ALT attribute, however, it is written:[i]From http://www.w3.org/TR/html4/struct/objects.html#adef-alt[/i]

Several non-textual elements (IMG, AREA, APPLET, and INPUT) let authors specify alternate text to serve as content when the element cannot be rendered normally. Specifying alternate text assists users without graphic display terminals, users whose browsers don't support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc.

The alt attribute must be specified for the IMG and AREA elements. It is optional for the INPUT and APPLET elements.[/quote]In other words the value of the ALT attribute only gets displayed when the image is not displayed.[/font]

@jpmoriartyJan 22.2003 — #i dont want to sound argumentative, but one of the things that annoys me about the rule-abiding people who post to this board, is their inability to even accept things that are incorrect.

For example, In other words the value of the ALT attribute only gets displayed when the image is not displayed.[/QUOTE] . This is incorrect. in internet explorer, if you put something in the alt tags and hover your mouse over the image, the alt text is displayed.

Now, I can accept that this might be against W3C (and possible other people) regulations. I expect that all browsers might not do this. And yes, it probably is incorrect. That still doesnt change the fact, however, that if you are using IE and you hover over an image, if there is text in the ALT tags it will be displayed.

I think people's willingness to attempt to conform to the various rules and regulations that are out there will be greatly decreased by people blatantly trying to either ignore or deny that these features exist! By all means advise that they're not standard, and that it's bad programming practice to make use of them: but to come out and say that ALT tags only display when the image isnt, is incorrect.

@CharlesJan 22.2003 — #[font=georgia]The ALT attribute is an accessibility feature. People with visual disabilities rely upon its proper use when the use the web. To intentionally mis-use it when authoring a web page is cruel and unforgivable.[/font]

@jpmoriartyJan 22.2003 — #humm, we're getting there.

As long as he uses the ALT to specify alternative text for those without graphic display terminals, users whose browsers don't support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc. then he is not misusing the ALT tag. If he wants to make it a differnet colour when it displays in IE, then he can do that fine (if indeed he can, as was the original question), providing that doing so doesnt interfere with the group listed above.

You're assuming that just because he wants to change the background colour of the tooltip, he is intentionally mis-using

the alt tag, which is a non-sequitur.

@Robert_WellockJan 22.2003 — #If you put another slant on the issue; some browsers like Micro$oft incorrectly display the "alternative text" as defined via the alt attribute in a similar fashion to a tool tip, when images are enabled.

Which goes against the proposed Technical Recommendations, and Web Accessibility Guidelines, some of which Micro$oft helped develop and hence defeating the primary purpose of that attribute.

Hence colouring the attribute could be considered either a browser specific solution, or an example of proprietary code manipulation, which is best avoided, or could be consider bad coding practice, since it is not very interoperable in nature

?.

@StefanJan 22.2003 — #[i]Originally posted by jlsheets [/i]

This is going to be an odd request but I know there is a way to change the color of the alt box and text color in the alt box of an image.
[/QUOTE]

Just as have been stated before ALT is NOT for tooltips (even if some browsers incorrectly show them instead of title if title is missing). Don't abuse ALT for tooltips.

Now once ee have got past that, Ill answer your original question, how to get TOOLTIPS with custom colors and backgrounds.

It's easiest done with CSS. Eg this is a way to do it

<style type="text/css">

a span {display:none; color:green; background:#ccc;}

a:hover span {display:block; position:absolute; width:200px;}

</style>

</head>

<body>

<p>

<a href="link to fullsize image"><img scr="thumbnail.png" alt="description of image" title=""><span>the text in here will be displayed as a tooltip when you hover the link/image</span></a>

</p>

Note: the title="" is needed due to IE's irritating habit of incorrectly showing ALT as TITLE, if no TITLE is specified.

@jpmoriartyJan 22.2003 — #stefan,

that's doing nothing for me - does it work in the ever buggy ie?

@VladdyJan 22.2003 — #For custom formating of tooltips you need javascript implementation. Here is mine: www.vladdy.net/webdesign/tooltips.html

@StefanJan 23.2003 — #[i]Originally posted by jpmoriarty [/i]

[B]stefan,

that's doing nothing for me - does it work in the ever buggy ie? [/B][/QUOTE]

Didn't test that code, but in general CSS popups works in IE 5.5x+

@StefanJan 23.2003 — #[i]Originally posted by Vladdy [/i]

[B]For custom formating of tooltips you need javascript implementation. [/B][/QUOTE]

Um no...

http://hem.bredband.net/stehus/logd/downloads.html

No JS for popups on that page.

BTW, where on earth did you pick up that nonexsistant attribute "tooltip"?

@VladdyJan 23.2003 — #[i]Originally posted by Stefan [/i]

[B]Um no...[B][/QUOTE]

If you want them to appear at the location of cursor as the default ones do - yes.

@StefanJan 23.2003 — #[i]Originally posted by Vladdy [/i]

[B]If you want them to appear at the location of cursor as the default ones do - yes. [/B][/QUOTE]

When did that become a requirement?

And that still doesn't make it ok to make up an attribute out of the blue and add it to your pages.

@VladdyJan 23.2003 — #XHTML = [b]Extensible[/b] HyperText Markup Language. So, how is not not ok to add my own attribute, huh? As far as tooltips appearing next to a cursor it is not a requirement, but a rather convinient feature.

@StefanJan 24.2003 — #[i]Originally posted by Vladdy [/i]

[B]XHTML = [b]Extensible[/b] HyperText Markup Language. So, how is not not ok to add my own attribute, huh?[/QUOTE]

Yes, you are ALLOWED to add your own attributes INCLUDING the nessecary DTD for it.

But you are NOT doing that. You are using a stock

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

There is NO tooltip attribute in XHTML 1.1

Further, you are also sending your XHTML page as mimetype text/html.

That means that you are dropping the [b]Extensible[/b] and are making a document that should follow the quidelines for XHTML "masquerading" as HTML (and that means no made up elements and attributes).

@VladdyJan 24.2003 — #[i]Originally posted by Stefan [/i]

[B]Yes, you are ALLOWED to add your own attributes INCLUDING the nessecary DTD for it.

But you are NOT doing that. You are using a stock

[/B][/QUOTE]
I'm all for following the standards, but there are some things that are just not worth worrying about. It does work and that what counts.

@StefanJan 24.2003 — #[i]Originally posted by Vladdy [/i]

It does work and that what counts. [/QUOTE]

You are relying on browser errorcorrection, which is a very poor way to code a webpage. That is definitly not "following standards".

Also, the only reason the page works at all is becuse it's looking at it as if it was HTML, not the fancy XHTML you think you are using.

Just try changing that .html to .xhtml and open your page locally in a gecko browser, and you will see just how broken your page REALLY is.

People that doesn't know nor care about what they are doing should probably stick to HTML 4.01 Transitional.

@VladdyJan 24.2003 — #What I'm using is the fact (call it error correction if you like) that browsers add every atribute they encounter to the element attributes array.

If I try to follow the standard to a letter MS IE will choke. The way it is, the code works in both Gecko and IE5+ and it does so because I do know what I'm doing.

When MS gets their act together I can add DTD and serve it as xhtml.

@jlsheetsauthorJan 27.2003 — #Um ok.... let me just say this; HUH?!

Ok so I need to put title="text" not use alt, ok. But now will it pop up that little box when you put your mouse over the graphic?

I appreciate being told I was coding that wrong.

Everything else y'all went on to confused the shit out of me.

Im a basic html'er, just barely barely learning any other kind of coding.

I do know how to use html and make sure its correct for XML, but Im sure I have some errors in that as well... either way I dont use XML i cant write XML, so I need just a really basic way to change the color of the box and only if it still pops up when I use title instead of alt.

@StefanJan 27.2003 — #[i]Originally posted by jlsheets [/i]

Ok so I need to put title="text" not use alt, ok. But now will it pop up that little box when you put your mouse over the graphic?
[/QUOTE]

Yes.

But to style it with custom colors you will need to do more. (Also you will be overriding the users preference, since the popup colors normally should take on the default popup look of the users Operative System Theme)

If you still want to do it, the best way is probably to do it with CSS, as I showed earlier in the thread.

A tutorial page for it can be found here

http://www.meyerweb.com/eric/css/edge/popups/demo.html