What is the best way to include the icon in the target region of clickable text?

Question

I am currently using the following javascript to create an expanding menu:

http://demo.raibledesigns.com/struts-menu/scripts/menuExpandable.js.src

Currently, only the hyperlink text is clickable. What is the best way to have the icon next to the text respond to the click?

Answer 1

The icons should be be:

• inline elements within the anchor tag
• background images for the anchor tag

You can do all of that in CSS and/or markup, keeping the javascript nice and simple.

The third alternative would be to bind the icon element to the hyperlink's event handler method, but the end result is less optimal and it requires the most work.

Answer 2

HTML

<a id="icon" href="blah">blah</a>

CSS

#icon {
    background: transparent url(img.gif) no-repeat right center;
    padding-right: 10px;
}