W3C validation fails - fixing it breaks javascript

[squibs]

I'm using a simple javascript routing for button rollovers. The rollover images get preloaded:

image1 = new Image();
image1.src = "/images/image1blue.jpg";

And the buttons are implemented like this:

   <a href="/index.php" onmouseover="image1.src='/images/image1blue_2x1.jpg';"
   onmouseout="image1.src='/images/image1black.jpg';">
   <img name="image1" src="/images/image1black.jpg" /></a>

Unfortunately this will not validate for xhtml strict as the name tag is unknown. If I change to

<img id="image1"....

the code breaks in internet explorer. Can anybody tell me how to get around this? It is important that the code validates.

 

[trollacious]

Using the ID attribute, try this:

onmouseover="document.getElementById('image1').src='/images/image1blue_2x1.jpg';"

Lee

 

[kaht]

Or better yet, instead of putting an <img> tag inside your <a> tag, define the image as the background-image of the <a> using css - and then use the :hover pseudoclass to perform the onmouseover and onmouseout actions. There's no need to use javascript for this because it's a built-in functionality for anchors on pretty much every modern browser.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

 

[squibs]

Thanks for the replies. For some reason the css idea never occurred to me!