How to change an image on mouse over of another image
===

I am building a website for a friend/client's pizza shop. It's local and he wants to have the basic features and not much if any maintenance. Thus I am building it in static html and css.

The problem I have run into is that when I attempt to make his menu appear one section at a time by having the onmouseover event change the image's src tag it never actually changes. 

The way I have it set up is a 3 by 3 grid of menu titles, each 200 by 67 pixels. On each of them I have the do onmouseover="displaymenu(~)" with ~ being a number 1 through 9 depending on the button. The function simply calls a switch and on each case changes the src of an image below the others that displays the appropriate section of the menu.

I have the function set up like this:

    function displaymenu(x){
    switch(x){
    case 1:
    document.getElementById("menuimage").src=images/AppetizersMenu.jpg;
    break;
    case 2:
    same as 1 except a different src, same for 3-9.

The image I am attempting to change has the id menuimage. This code is placed in the <head> section of my document. I can't seem to get the thing working, and have searched for a solution. If javascript isn't the way to go, let me know and I'll do what you think is. 
Thanks a ton, -Elliot S