Clickable image footer, html

I have a 2000*300px image I am planning to use as a footer. There are four sections in the middle, and each needs to be clickable - they should be links. I'm using an image map right now.

I have a footer at the bottom of the site. It has a width of 100% and a height of 300px. What I need to do is centre the image in the middle of the div, with any overflow hidden. It must remain clickable - that's why I can't just resize the image.

So!

How can I centre the element within the footer div, with overflow hidden?
Alternatively, how can I dynamically resize the footer image but still have it clickable?
Alternatively, how can I implement the same effect - a continuous-appearing image with clickable sections as a footer?

Solution

If it is ok to allow the image to be cut off on the sides, then you can center the image by setting the image position to center in the CSS.

.footer {background: transparent url(path/to/image) no-repeat bottom center;}

To get the have other clickable elements just nest new divs or paragraphs or links in footer div.

It would look something like this.

<div class="footer">
    <a>Clickable Content</a>
    <a>Clickable Content</a>
    <a>Clickable Content</a>
    <a>Clickable Content</a>
</div>

Then you can set the height and width for each of those. Then set the link. Or use divs and set the links inside of them.

.footer a {height: 300px; width: 25%;}