Painting a page, How to allow the user to highlight multiple areas Options

[WillOsborn]

I've been using a hover CSS model for some time - e.g., http://www.seco-larm.com/E-941SA-600.htm, where the text under "Descriptions" highlights on mouseover.

I figured that this lent a distinctive flair to the site, one that few other sites display, and that it could be handy if a salesperson was pointing out areas of interest and wanted everyone looking at a big screen to see where he was referring. A further enhancement of this sort would be to allow the user to highlight multiple areas or to draw on top of the screen, something that I would presume can now be done in HTML5. However, since I'm using HTML4 transitional, I'd settle for persistent highlights, altho that begs the question of how to de-select...

So, has anyone tried this or seen it done in straight HTML + CSS? Or know of js hacks for it?

Thanks

[Christian J]

You might adapt this CSS trick to highlight multiple clicked areas: http://css-tricks.com/the-checkbox-hack/ . But don't hide the checkboxes --a form control like a checkbox is a familiar interface to the user, which is always good.

To do something similar onmouseover I think you must use javascript. To deselect several mouseover highlights maybe you could use a "reset" button of some kind. But since users may accidentally highlight content when moving around with the mouse on screen, I think a clickable control is a much better idea.

BTW for usability reasons you may want to use a different style for highlights than for ordinary hovered links, or users may become confused by that as well.