How to create simple header image transitions ?

I have a header image and I have few sub-sites ( home, contact, about us, where to find us )
I want 4 different images to change as I click on those links
home – img1.jpg
contact – img2.jpg
aboutus – img3.jpg
where – img4.jpg
the problem is in the css :

Code (text):

/* header photo */

.headerphoto {

   margin: 0 auto;

   width: 770px;

   height: 200px;

   padding: 15px 10px 10px 10px;

   background: #FFF url(headerphoto.jpg) no-repeat center;  

}

Could someone tell me what is the…
How to create simple header image transitions ?

See original post by Luka VidoviÄ?