SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    Didcot84

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Css

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,341
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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. #4
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Attached Images Attached Images

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,341
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Something roughly like this should do then.

    Code:
    <!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. #6
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •