Changing image src attribute reliably in Internet Explorer

I just spent quite a bit of time debugging this silly problem on Insightory.com, where the document control buttons were not working under Internet Explorer. Since it might be useful to somebody else, I’m going to document the solution here.

The problem was that the document browsing control buttons, which look like the following:


<img src="/blog/browse_controls.png" />

They were implemented by doing something similar to this:


<a href="javascript:void(null);" onClick="javascript:openNextPage();" class="nextpage"><img src="/images/nextpagebutton.gif" alt="Next page" /></a>

And then inside the openNextPage function, I swap the image by changing the src attribute of the image tag. Pretty standard, and works perfectly under Firefox.

Long story short, the javascript:void(null); bit is what is breaking Internet Explorer (IE6 on this case). Changing the XHTML code to look like the following fixes the problem completely for me:


<a href="javascript:openNextPage();" class="nextpage"><img src="/images/nextpagebutton.gif" alt="Next page" /></a>

I found out the culprit by (obviously) searching Google for a long time, and then finding this thread on WebDeveloper.com.

Leave a Comment