Javascript Image roll Over

i am trying to build image roll over in javascript were there is 2 buttons and 1 pic when the user press button number 1 开发者_StackOverflow中文版the color of the button change and and the second button stay the same and the pic change and the hyperlink for it change also when i pres button 2 the color of the button change and the color of button 1 return to the original color and the image change and also the hyperlink

please i need help if anyone could help me and i need it as a java script

---

<div id=Image1><a href="url1"><img src=image1.jpg></a></div>
<div id=Image2 style="visibility: hidden; position: absolute; left: -1000px; top: -1000px;"><a href="url2"><img src=image2.jpg></a></div>

<input type=button id=Button1 onclick="JavaScript: changeImage( 1 );">
<input type=button id=Button2 style="background-color: red;" onclick="JavaScript: changeImage( 2 );">

<script language="JavaScript">
  function changeImage( n )
  {
    var div1 = document.getElementById( "Image1" );
    var div2 = document.getElementById( "Image1" );

    var btn1 = document.getElementById( "Button1" );
    var btn2 = document.getElementById( "Button2" );

    if( n == 1 )
    {
      div1.style.visibility = "visible";
      div1.style.position = "relative";
      div1.style.top = div1.style.left = "";

      div2.style.visibility = "hidden";
      div2.style.position = "absolute";
      div2.style.top = div1.style.left = "-1000px";

      btn1.style.backgroundColor = "";
      btn2.style.backgroundColor = "red";
    }
    else
    {
      div1.style.visibility = "hidden";
      div1.style.position = "absolute";
      div1.style.top = div1.style.left = "-1000px";

      div2.style.visibility = "visible";
      div2.style.position = "relative";
      div2.style.top = div1.style.left = "";

      btn1.style.backgroundColor = "red";
      btn2.style.backgroundColor = "";
    }
  }
</script>