SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to do CSS image mapping

    I am trying to reverse engineer, with minimal CSS skills myself, an image map that uses CSS rollover effects.

    I have a map of California with 4 rollover areas which change color on rollover.
    I can do the rollover etc fine, but I can not understand how the below code.
    I think the code "TRIMS" the box area to the edges of the California map image.

    Can someone tell me what the code elements mean, and most importantly, how they are defined (i.e. Photoshop etc.)?


    #california1 .s1{height:.3em;left:14em;top:12.7em;width:.2em}
    #california1 .s2{height:.5em;left:13.8em;top:12.6em;width:.2em}
    #california1 .s3{height:.7em;left:13.7em;top:12.5em;width:.1em}
    #california1 .s4{height:.8em;left:13.6em;top:12.4em;width:.1em}
    ...

    Thank you, Penn

  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)
    I would not use ems as in the code below. Unless you have a map that enlarges with text size. Here is the basic idea of how to do what you want. The code pretty much speaks for itself. { visibility: inherit; } Irregular Shaped Anchor With CSS

  3. #3
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, but what exactly does the example code do? That would be helpful to know.
    And do I use Photoshop to measure to pixels or ems?

    Penn

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by penn31 View Post
    And do I use Photoshop to measure to pixels or ems?
    You can't measure ems, because it depends on the font size, and that will depend on the browser and computer setup of the person looking at your site.

  5. #5
    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)
    Quote Originally Posted by penn31 View Post
    OK, but what exactly does the example code do? That would be helpful to know.
    And do I use Photoshop to measure to pixels or ems?

    Penn
    Sihhh... the code is the framework for what you are attempting to do. Photoshop creates images nothing more. Is that helpful enough for you?

  6. #6
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I still don't get how to write similar code myself. I know the purpose of code and PS, but how do you write this code?

    There are multiple instances (s1, s2, etc.) of boxes (length, width) and location (top, left), but where are these in space, and how are the units measured?

    You see the code they are pretty exact:{height:.5em;left:13.8em;top:12.6em;width:.2em}

    Thanks again! Penn

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The code absolutely places into position some small rectangular areas so that you can create the illusion of an irregular shape. CSS can only define rectangles so if you have an odd shaped rollover area the only way to do it is is to use smaller rectangles and place them absolutely into position where needed.

    Ems are a unit of measurement and will be based on the font size of the parent. If the parent has a computed font-size of 16px then 1em will equal 16px (5 em would equal 80px and .5em would equal 8px).

    Using your code we can see that the elements can be placed outside an initial rectangle to create a non rectangular area that can be hovered over to create a rollover effect.

    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">
    #california1 {
        font-size:16px;/* 1 em will = 16px*/
        position:relative;/* the absolute elements will be placed in relation to this*/
        width:13.7em; /* 13.7 x 16 = 219px */
        height:14em;
        background:#fcf;
    }
    #california1 a,#california1 span {
        position:absolute;
        background:#fcf;
    }
    #california1 .s1 {height:.3em;left:14em;top:12.7em;width:.2em}
    #california1 .s2 {height:.5em;left:13.8em;top:12.6em;width:.2em}
    #california1 .s3 {height:.7em;left:13.7em;top:12.5em;width:.1em}
    #california1 .s4 {height:.8em;left:13.6em;top:12.4em;width:.1em}
    #california1 a {
        color:#000;
        text-decoration:none;
        width:100%;
        height:100%;
    }
    #california1 a:hover,#california1 a:hover span {background:#000}
    </style>
    </head>
    <body>
    <div id="california1">
        <a href="#">
            <span class="s1"></span>
            <span class="s2"></span>
            <span class="s3"></span>
            <span class="s4"></span>
        </a> 
    </div>
    </body>
    </html>
    If you look at Erics demo you should see how rectangular shapes are used to make the circle effect.

    It's a labour intensive way to do this but is the only choice for a css solution if you want tightly hugging edges.

    There are jquery solutions that will turn an image map into rollovers automatically and will automate the process but you still have to create the initial image map co-ordinates of course.

  8. #8
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I get it now! XD
    Many thanks Eric and Paul for the great assistance!


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
  •