Home/ Questions/Q 1075899
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T21:20:12+00:00

I am trying to get a onmouseover and onmouseout effect in a xhtml page

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0