Sean Bradshaw

Ideal: Stop supporting IE.

Barring that as possible, IE does support an equivalent to pageX(Y):

ev.clientX + document.documentElement.scrollLeft would match it, so you have:

ev.pageX == (ev.clientX + document.documentElement.scrollLeft)
ev.pageY == (ev.clientY + document.documentElement.scrollTop)

So here's an easy function that returns an object.

function mouseCoords(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } else { return { x:ev.clientX + document.documentElement.scrollLeft, y:ev.clientY + document.documentElement.scrollTop }; } }

I don't think the <input type="button"> tag is what you're looking for. There are a few options that would be more fitting. <input type="image" src="image.gif"> functions as a button but shows an image. Or even the HTML4 spec using the <button></button> tags then you can put an <img> tag or any other text content in there as well.

Really with Javascript events this is a user interface issue. Why do you want to use an input tag, is it because you need to send some data from that button to the next page? Or do you want the cursor to stay as an arrow rather than change to a hand like a normal link? Without it changing to a hand and without a hover effect of some sort, the user may not even realize it is a clickable link.

So I'd recommend something like this:

<a href="#" onclick="document.form[0].submit();"><img src="image.gif"></a>

Well at least if you don't mind having your event logic inside your HTML page. To make that even more noticeable as an actionable link, you could add onmouseover="this.src='image-hover.gif';" onmouseout="image.gif" to the image tag to make it a little more dynamic.
[ June 19, 2008: Message edited by: Sean Bradshaw ]