My example code causes the following problem in Internet Explorer (at least, in version 6): it causes an unwanted cursor change when the button is clicked.
Using my example code, here is what happens (step-by-step in chronological order): (1) the user hovers the mouse over the button, which causes the cursor to be a hand; (2) the user clicks the button; (3) the browser does its image-related activity; (4) immediately after step 3 is entirely completed (in other words, after the browser finishes loading an available image or after the browser times out from attempting to find an unavailable image), the cursor changes from a hand to an arrow if the mouse is kept still; (5) if the mouse is then moved while staying over the button, the cursor will change back to a hand.
As I said, in step 4, the cursor changes from a hand to an arrow if the mouse is kept still. I consider that to be a problem because I want the cursor to *always* be a hand when it is over the button. And, indeed, that should be the expected behavior due to the CSS code (style="cursor:pointer") in the button tag.
The problem occurs in IE6, which is the only version of IE available to me. Does the problem also occur in later versions of IE? (The problem does not occur in Firefox.)
How can I fix the problem?
When attempting to replicate the problem, make sure you use full Internet URLs (for example, "http://example.com/a.jpg") in your code. If you use relative paths or local paths, you may not be able to replicate the problem.
IE7 doesn't do this trick. it seems IE6 set focus on the new image that's why the button cursor turns into an arrow. i'd try to return the focus onto the button through image onload or just fire blur() for the new image. but is it so important? ;-))
use [code]YOUR CODE GOES HERE[/code] or burn in Hell