Icons for product features

[Darren B]

Checked in FF3 & Chrome, also ie8 beta, interesting its ignoring your width in ie8 aswell. Might be for some?

ps cant check your site to much, i have a 7 year old who loves scalextric

[martinkay]

Yes Firefox and Chrome don't show the alt tag the same way as IE7, as you say a "mouseover" action would be needed for that, meantime I think I will go with what I have for now till I start getting people asking me what the icons mean (there is a key in the margin too). That's a very sensible 7 year old!

[leehack]

Where you have the alt attribute like so - alt="blah blah", also include the title tag like so - title="blah blah". That will do both very easily for you then.

[NormanRouxel]

It does on mine, using the alt tag

That's IE probably.

ALT is really meant for screenreaders and browsers with images turned off. It also displays as a placemarker for the image while the page is loading.

TITLE is the taglet that always shows as a tooltip.

IE interprets ALT as TITLE if there's no TITLE but other browsers are more literal.

I've changed my post #8 to include both taglets (and also added a / to the tag close for XHTML validity).

[leehack]

I've changed my post #8 to include both taglets (and also added a / to the tag close for XHTML validity).

Probably best to get your sizes surrounded in quotes also if you are going for xhtml compliance as all parts must be quoted.

[martinkay]

Sorted, title tags and quotes all added, I've put the code on the extended information pages too so all the icons show with pop-up text in FF and Chrome now. Cheers

[NormanRouxel]

The icing on the cake might be to use dynamic tooltips as they're a lot prettier than the simple browser ones.

See http://www.dynamicdrive.com/dynamici...tmltooltip.htm for one I've used.

If you go this route, then instead of putting the description into each image it would be a lot more efficient to call some helper reoutines.

E.g.

Install the dhtmltooltip code as per above.

Just above your </head> tag add additional code:

<script type="text/javascript">
function f1(){
  ddrivetip('Feature 1 tooltip description here');
}
function f2(){
  ddrivetip('Feature 2 tooltip description here');
}
.
.
.
function fh(){
  hideddrivetip();
}
</script>

Then display your images like:

<img src="feature01.gif" width="12" height="34" alt="Feature 01" onmouseover="f1()" onmouseout="fh()" />

and for feature 2

<img src="feature02.gif" width="12" height="34" alt="Feature 02" onmouseover="f2()" onmouseout="fh()" />

You can even use HTML inside your 'Feature 1 tooltip description here' strings.

[Sean Williams]

I like this idea a lot - well done Norman and Martin for doing it.

One question - there's a delay of about one second when mouse-overing the icons, before the 'tooltip' is shown.
Is this a function of the browser and can it be overridden via the webpage code so the tip shows instantly?

I ask this because many quick-browsing customers may not hover long enough to see the tooltip and so be unaware the info is there, and it seems a shame to have to put a prompt right by the icons ....

[NormanRouxel]

I've a feeling that this is a browser defined delay and I'm not aware of any way to alter this.

Of course, using the dhtmltooltip improvement I mention in post #22 will give you instantaneous tooltips.