Changing image background with multiple rollovers

Hi there! There is probably a very basic solution to this with CSS but I'm having trouble finding one. I have some basic HTML/CSS experience but this turned out to be too complicated for me.

I want the frontpage of my portfolio site to be just this simple image below - each corner will have a link to the different sections of the site (so, left section is photos, bottom section is blog, etc).

Upon rollover of each corner I want the default background image to shift to the relevant background image - e.g. rolling over the left corner would give you this:

Upon mouseout of the left corner you would get the default background image again. Clicking the left corner would take you to bjornfloki.com/photo. I need the same function for each of the four corners, revealing different background images for each corner.

Here is the background image I had thought to use:

http://bjornfloki.com/befb-logo-final-links.png

Any ideas how I could achieve this?

Thanks!