Incorrect coordinates using input image in form

Posted Monday, October 9, 2006

Filed under: ,

Images can be used as form buttons, using
<input type="image" src="image.png" />
When a user clicks on the image, the click position is captured and sent along with the rest of the form, but in some cases Firefox gets it wrong.

Indeed, when the image is contained in an absolutely positionned block, Firefox incorrectly calculates the click position relative to the image container (or something like that). Values can end up beyond the actual image size, which can be a bit surprising and greatly mess up your application.

This regression has been fixed in Firefox 1.6+ releases, but hasn't been deployed yet.

For the moment, two possible fixes are available if this is critical for you.

  1. Avoid using absolutely positionned images as input buttons
  2. Provide an alternate way of reaching the information (select, regular buttons, etc)

Better yet, avoid image maps or build them using CSS (one such technique is fully detailed in Andy Budd's book, CSS mastery.

One final note: image maps should be avoided at all costs, since they rely on an input method that simply isn't always available (think handhelds, screen readers, etc) and tend to hide information from the user (since the user has no way of knowing what will happen when he or she clicks on any area inside the image).

Additionally, unordered lists and selects are much easier to code and use than image maps (and you can even pretty them up with CSS).

Comments disabled because of spammers.

No comments yet

Technorati Profile