Modern Way of Doing Image Maps?

HTML & CSS
1

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

Didcot84

2

Css

3

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:)

4

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

5

Something roughly like this should do then.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#footer {
    width:800px;
    margin:auto;
    border:1px solid #000;
    overflow:hidden;
    text-align:center;
    padding:10px;
}
#footer p {
    margin:0;
    width:100px;
    border:1px solid #000;
}
p.logo1 {float:left;}
p.logo3 {float:right;}
#footer p.logo2 {margin:auto;}
#footer a {
    display:block;
    background:#fcf;
    text-decoration:none;
    color:#000;
    text-align:center;
}
#footer a:hover {background:red;}
</style>
</head>
<body>
<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>
</div>
</body>
</html>
6

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?