Change site background image on Button Rollover

[oldriv]

Hiya,

My site layout is:
[Main Image] - single JPEG
[1][2][3][4] - four individual JPEG (Buttons)

I am hoping to achieve the following:
Button [1] is rolled-over {
-[Main Image] changes // MainImage1
-Site background changes // BGImage1 }

Button [2] is rolled-over {
-[Main Image] changes // MainImag2
-Site background changes // BGImage2 }

.. and so on

I'd appreciate if anyone could point me in the right direction? I've found lots of tutorials for basic roll-over buttons, but not the extra function. Any advice much appreciated.

 

[feherke]

Hi

function ch(what)
{
  document.getElementById('mainimage').src='MainImage'+what+'.jpg'
  document.body.style.backgroundImage='url(BGImage'+what+'.jpg)'
}
</script>

<img src="" id="mainimage">
<img src="1.jpg" onmouseover="ch(1)">
<img src="2.jpg" onmouseover="ch(2)">
<img src="3.jpg" onmouseover="ch(3)">
<img src="4.jpg" onmouseover="ch(4)">

Feherke.

http://rootshell.be/~feherke/