3 replies to this topic

[theherbman]

I have small esthetical problem I would like to change. If you put the mouse over an image a little box comes up with the name of the image on it. Is it possible to change the shape and colour of the box. At the moment it is white and oblong. If it is how do you do it.

Regards Mel

[MrPhil]

You're seeing what's called a "tool tip". The text in it is produced by the title="some text" attribute in an <img> (or any other element) tag. If you have no title= attribute, but are using Internet Explorer 6, you will see the alt="descriptive text" misused as the tool tip. By the way, it's not very useful to have just the file name in the alt= or title= text... you should have useful descriptive text, such as alt="Picture of a sunset over Tahiti beach" or title="Click here to place order".

So, what can you do to alter the appearance of the tool tip? Unfortunately, I haven't been able to find anything in HTML or CSS that affects its appearance. About all you can do from your end is to suppress the tool tip with a title="" attribute. For individual browsers, there may be plug-ins or settings to format a tool tip differently, but what you do on your site won't have any effect on some visitor's browser.

If you don't mind making major changes to osC's code, there are ways to build your own tool tips in CSS. See http://hungred.com/how-to/tutorial-simple-cross-browser-tooltip-css/ for an example. You basically build your own pop-up using CSS when you hover over a span. No alt= or title= attributes are used, which is a handicap as far as search engines or visually-impaired users are concerned. However, as you can see in the site's example, you can format your "tool tip" however you want to.

[theherbman]

I already have a text in the box that discribes the image. It just looks a bit "naff" and hard to the eye a bright white oblong box with black writting. Still know doubt a solution will come along. Will look at the site you posted.

Thanks
Regards Mel

Edited by theherbman, 17 February 2010, 17:00.

[MrPhil]

theherbman, on 17 February 2010, 16:53, said:

I already have a text in the box that discribes the image. It just looks a bit "naff" and hard to the eye a bright white oblong box with black writting. Still know doubt a solution will come along. Will look at the site you posted.

Yeah, black-on-white seems to be a common setting on most browsers. As I said, I don't know of anything in HTML or CSS to make for a different appearance, as driven by the website, rather than on a browser-by-browser settings basis. The site I posted doesn't use the title= attribute, but pops up a custom bit of HTML/CSS upon mouseover.

Sorry about not getting back sooner, but the forum just let me see your response today.