#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    47
    Rep Power
    4

    Make a clickable link in a certain spot?


    I'm only a rookie, so I would appreciate any help and please don't answer with to complicated replies.

    I know how to add an image and make it a link or add a link.

    However, I have this background image on my website. All the images you see are one picture.

    I want my members to be able to hover over any part of the “key hole” and be able to click and send them to my home page.

    Is this even possible to do?

    Script…

    <?php
    ob_start();
    ?>
    <!doctype html>
    <html>
    <head>
    <title>Page Title</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <style type="text/css">
    <!--
    body
    {
    background-image:url('app/web/img/login_logo.jpg'); background-position:center top;
    background-repeat:no-repeat;
    }
    .center {
    text-align: center;
    }
    -->
    </style>
    </head>

    <body>

    {APP_TPL}
    </body>
    </html>
    <?php include 'listings.php'; ?>



    Thank you, Scott
  2. #2
  3. Code Monkey V. 0.9
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Mar 2005
    Location
    A Land Down Under
    Posts
    2,111
    Rep Power
    1990
    Yes, you can do that pretty easily. Do a search for "image map" and you'll be able to find what you are looking for.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,126
    Rep Power
    4304
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    47
    Rep Power
    4
    With some adjusting to get it just right around the key hole picture, this worked for me. I hope this helps someone else.


    <body>

    <a href='http://example.com' style='display:bock; width:115px; height:215px; position:absolute; left:40px; top:15px'></a>

    </body>



    Thank you ALL above for helping me.
    Scott

IMN logo majestic logo threadwatch logo seochat tools logo