Search code examples
javascriptxhtmlsafarionmouseoveronmouseout

onmouseover issues with Safari

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."

Solution

  • I would try changing your function to look like this:

     function roll_over(img_name, img_src) 
    { 
        document.getElementById(img_name).src = img_src; 
    }

    That way it is directly selecting your <img> using your passed id.