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

    Join Date
    Oct 2012
    Posts
    3
    Rep Power
    0

    Question Add an image map to existing style sheet?


    Hello, I would like to know how to turn one of my header images into a clickable image map.

    Here is the existing code on the external style sheet:


    /* ==|== DEFAULT GLOBALS ======================================================= */

    html, body { height: 100%; }

    body { background: #222 url('../img/backdrop.jpg') no-repeat center top fixed; }

    header {
    height: 85px;
    background-image: url('../img/header_bg.jpg');
    }

    header #logo:hover {
    filter: alpha(opacity = 70);
    opacity: 0.70;
    }

    #container {
    background: #fff url('../img/container_bg.jpg') repeat-y right top;
    border-bottom: none;
    -moz-box-shadow: 0px 0px 10px #333; /* FF3.5 - 3.6 */
    -webkit-box-shadow: 0px 0px 10px #333; /* Saf3.0+, Chrome */
    box-shadow: 0px 0px 10px #333; /* Opera 10.5, IE9, FF4+, Chrome 10+ */ border-top: none;
    color: #222;
    }


    Basically, I want to add some hotlinked icons to the header image named "header_bg.jpg"

    The image map generators found online don't seem to work for what I want to do here. Any help is greatly appreciated!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    710
    Rep Power
    441
    Image maps aren't created with CSS. CSS has nothing to do with links, or whether something is clickable, it only helps you with what things look like.

    It would help to see the current page, or at least a screenshot of the image and what areas you want clickable. And you should probably ask in another section of the forum.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    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
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    3
    Rep Power
    0
    So I just found out that new members can't post links or embed images.

    I have an image that is basically a rectangle. what I have done is added 3 graphic icons to the right side of the image. Those 3 graphic icons need to be linked to 2 other sections of the site, and also link to another website. hope this makes sense!

    So the _head.php include file points to the style.css for the page's header image banner that I would like to add links on:

    The code on the _head.php include is:

    Code:
    <div id="container" class="container_12">
        <header>
          <a href="<?php echo base_url(); ?>"><img src="<?php echo base_url(); ?>img/header_logo.png" id="logo" class="grid_3" style></a>


    And the style.css code:

    Code:
    header {
    	height: 85px;
      background-image: url('../img/header_bg.jpg');
    }


    I have made a zillion HTML image maps thru the years, but not in the kind of scenario above. Obviously not a CSS or PHP guru, so any help is appreciated!
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    3
    Rep Power
    0
    thanks ; and thanks for the links....not sure if applicable to my situation, please see my latest posting on this

    Originally Posted by Kravvitz
    Welcome to DevShed Forums, lc317.
    Last edited by Kravvitz; October 11th, 2012 at 06:03 PM. Reason: fixed the quote tags
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    As you found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.

    There is also a policy that prevents users from posting attachments until they have 30 posts and have been a member for 30 days, so if needed http://imageshack.us/ can be used to host images.

    By the way, older versions of some browsers have trouble with HTML5 elements. Which versions of IE are you intending to support?
    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).

IMN logo majestic logo threadwatch logo seochat tools logo