Provide Customers Help

I believe helpful information should be provided wherever possible for your customer. Older versions of this site used up to six techniques for providing help for the customer. I have listed examples for five. The sixth is "pop-down" help only available to IE4+ but it causes problems for NN4+ that are too lengthy to address here. Anyway, some are available with IE and NN. Using these five techniques will not cause problems on unsupported browsers. This site uses only the "Title" help. 

Technique#1
Available to virtually all browsers. It uses the "ALT" property of an IMG tag. It is considered good coding practice to use this property. This is valuable for two reasons. If the customer disables pictures or stops download the customer will see the text you enter for the ALT property. Secondly, it is useful as it displays as pop-up help(those little yellow help boxes) when customer moves mouse over image. In NN the pop-up will only occur if there is a picture.

<img HREF="yourpic.gif" WIDTH="80" HEIGHT="40" ALT="your message goes here">

Demonstrate Code => your message goes here No picture intentionally.

Technique#2
Available to IE3+ and NN2+. It is the "onMouseOver" event for a link. This allows you to replace the normal "http://somesite.com/somepage.html" you see on the statusbar to a useful message. You could also take other actions like change link color. Unfortunately with only this technique the statusbar does not get reset when the customer moves off the link. Please note the "return true" is required for NN browsers. This is no longer used here.

<a HREF="displayhelpX.htm" onMouseOver="window.status='This is a bad link! DO NOT CLICK!';return true"> Move mouse over here, read statusbar </a>

Move mouse over here, read statusbar

Technique#3
Available in IE3+ and NN2+. It uses the "onMouseOut" event. This does not work on my site because I use technique #5(NN6 works). Therefore I would use onMouseOut for other functions(like changing color).

<a HREF="displayhelpY.htm" onMouseOut="window.status='Walter Moore.Ca provides valuable help';return true"> Move mouse over here, then move away </a>

Move mouse over here, then move away

Technique#4
Available to IE4+ and NN6+. It uses the new "TITLE" property. It allows you to have those little yellow help boxes anywhere the customer moves. Not just links. Try moving mouse over these words. Has no effect on other browsers. If you are only going to use one of these techniques this is the one I recommend. It is the way it should be. Since over 75% of people are using the versions required for this I strongly recommend it. As of 2002-01-07 I have changed to use techniques 4 and 5 only. Techniques 1,2,3 are only for older browsers. I don't know about you but I want help right in front of me, not down on some statusbar.

<a HREF="displayhelpZ.htm" TITLE="DO NOT CLICK THIS LINK! Bad link"> Move over here for yellow help box </a>

Move over here for yellow help box

Technique#5
Available in IE3+ and NN2+. It uses "window.defaultStatus" to set a default statusbar message when customer is not over a link.  A disadvantage of using this is that "onMouseOut" message will not appear. A big advantage is that you only have to define your default message once. This is used at this site. With this I don't have to define an onmouseout event to reset the statusbar everytime. NN6 does not support this feature any more(to bad).

<script type="text/javascript"> <!-- function setdefault(){ window.defaultStatus="Walter Moore.Ca provides complete solutions"; return true; } // --> </script>

Move over, then away, read statusbar.

Put it all together
This demo shows techniques#1-4. You may notice in this demo that defaultStatus is displayed and not the onMouseOut message when you move off a link. This will happen if you tried technique#5 demo above.

<a HREF="displayhelp.htm" TITLE="DO NOT CLICK THIS LINK! Bad link" onMouseOver="window.status='This link is a bad link! DO NOT CLICK IT.';return true" onMouseOut="window.status='Walter Moore.Ca provides valuable help';return true"> <img href="yourpic.gif" WIDTH="120" HEIGHT="40" ALT="your message goes here"> Read Statusbar and look for pop-up help </a>

your message goes here

Read Statusbar and look for pop-up help

Anyway, I hope this helps those that want it.