Hello Everyone, I am trying to get a onmouseover and onmouseout effect in a xhtml page for my navigation menu.
This code only works in Firefox, but nothing else. Can someone please tell me how to get it to work on all browsers?
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
/* <![CDATA[*/
function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}
/* ]]> */
</script>
<li><a href="index.html" onmouseover="roll_over('home', 'images/homeSelected.png')" onmouseout="roll_over('home', 'images/home.png')" ><img src="images/home.png" alt="Home" id="home" /></a></li>
<li><a href="about.html" onmouseover="roll_over('about', 'images/aboutSelected.png')" onmouseout="roll_over('about', 'images/about.png')" ><img src="images/about.png" alt="About Me" id="about" /></a></li>
<li><a href="portfolio.html" ><img src="images/portfolioSelected.png" alt="My Portfolio" id="portfolio" /></a></li>
<li><a href="contact.html" onmouseover="roll_over('contact', 'images/contactSelected.png')" onmouseout="roll_over('contact', 'images/contact.png')" ><img src="images/contact.png" alt="Contact Me" id="contact" /></a></li>
</ul>
</div>
</div>
I have tried this in chrome and IE 7 & 8 but the error persists. Safari gives me the error :TypeError: Result of expression 'document[img_name]' [undefined] is not an object."