Modern Way of Doing Image Maps?

Hi All

I’ve searched on the forums but the posts went back to 2007 so I thought I’d just post to get the latest answer to my question.

I’ve been asked to create a footer which contains three logo’s. These logos will link to the site of the company.

In the old days we would have an image map, but I just wanted to ask what the latest method would be?

Thanks in advance for any help



Unless the images are overlapping irregular shapes then just place each logo in an anchor as required and push into position.

You can make overlapping sprites if needed but I rarely see the need for anything more complex.

We need to see an example of your logos etc to give more precise information:)

Thanks for the advice, I was hoping for specific css coding advice if possible.

I cannot show you the site because its on a private server, but I’ve quickly mocked up an image to show you what I’m hoping to achieve. Each of the three logos will be a separate link.

I’m actually just leaving the office now, I’ll be back on the computer at about 9 o clock.

Thank you again for taking the time to answer my question

Something roughly like this should do then.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#footer {
    border:1px solid #000;
#footer p {
    border:1px solid #000;
p.logo1 {float:left;}
p.logo3 {float:right;}
#footer p.logo2 {margin:auto;}
#footer a {
#footer a:hover {background:red;}
<div id="footer">
    <p class="logo1"><a href="#">Logo1 goes here </a></p>
    <p class="logo3"><a href="#">Logo3 goes here </a></p>
    <p class="logo2"><a href="#">Logo2 goes here </a></p>

Thank you so much Paul, just come back into the office and this has been great to return to.

I really appreciate that. I will use this and keep this page as a reference. There seems to be no system on this forum for thanking you?