I'm attempting to change a div tag's id value using onmouseover/onmouseout from another div element.

Currently my simple javascript/html code is
<a onmouseover="document.getElementById('main-clock').id='main-clock-jurassic'" onmouseout="document.getElementById('main-clock-jurassic').id='main-clock'" href="#"><div id="main-jurassic">&nbsp;</div></a>

<div id="main-clock">

The div id tag i'm trying to change is main-clock.
WIth the code above, I'm able to effectively change the id tag of main-clock to main-clock-jurassic, and back again to main-clock. This works with Opera, Firefox and IE7, however, I'm buffled as to why it doesn't work in IE6.

Can any one kindly offer some guidance? I've tried searching for a solution to no avail and it is with last result that I consult you guys on this forum.

Any help wld be greatly appreciated.