可点击的图像页脚，HTML

Question

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?

Answer 1

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%;}

Answer 2

You can try this:

CSS CODE

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

HTML CODE

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

Also can use this:

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