Grow your CSS skills. Land your dream job.

CSS image map rollover – not displaying full image

  • # January 12, 2009 at 2:11 pm

    Dear friends,
    I’m tryng to build an image map rollover effect using CSS only. However, I stumbled into an apparently unresolvable problem: the rollover effect and the links are fine, but only a portion of the rollover image is being displayed. This is my css:

    Code:
    #menu_nomi { padding: 0px;
    #menu_nomi { padding: 0px;
    background: url(images/chi_siamo_nav.gif) no-repeat;
    width: 196px;
    height: 92px;
    margin: 0px auto;
    position: relative;
    }
    #menu_nomi li {padding: 0px;
    display: block;
    margin:0px;
    }
    #menu_nomi a {display: block;
    text-indent: 0px;
    text-decoration: none;
    }
    #cs_ar {position:absolute;
    left:103px;
    top:13px;
    width: 18px;
    height: 18px;
    }
    #cs_ar a{
    left:0px;
    top:0px;
    width: 18px;
    height: 18px;
    display: block;
    list-style-type: none;
    }
    #cs_ar a:hover{
    width: 196px;
    height: 92px;
    background-image:url(images/cs_ar.gif);
    background-repeat: no-repeat;
    background-position: -103px -13px;
    }
    #cs_ar span a:hover{
    top: 0px
    left: 0px
    width: 196px;
    height: 92px;
    background-image:url(cs_ar.gif);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    border: 1px solid #000000;
    }
    #cs_di {position:absolute;
    left:123px;
    top:13px;
    width: 18px;
    height: 18px;
    }
    #cs_di a{
    left:0px;
    top:0px;
    width: 18px;
    height: 18px;
    display: block;
    list-style-type: none;
    }
    #cs_di a:hover{
    width: 196px;
    height: 92px;
    background-image:url(images/cs_di.gif);
    background-repeat: no-repeat;
    background-position: -123px -13px;
    }
    #cs_dn {position:absolute;
    left:143px;
    top:13px;
    width: 18px;
    height: 18px;
    }
    #cs_dn a{
    left:0px;
    top:0px;
    width: 18px;
    height: 18px;
    display: block;
    list-style-type: none;
    }
    #cs_dn a:hover{
    width: 196px;
    height: 92px;
    background-image:url(images/cs_dn.gif);
    background-repeat: no-repeat;
    background-position: -143px -13px;
    }
    #cs_ed {position:absolute;
    left:163px;
    top:13px;
    width: 18px;
    height: 18px;
    }
    #cs_ed a{
    left:0px;
    top:0px;
    width: 18px;
    height: 18px;
    display: block;
    list-style-type: none;
    }
    #cs_ed a:hover{
    width: 196px;
    height: 92px;
    background-image:url(images/cs_ed.gif);
    background-repeat: no-repeat;
    background-position: -163px -13px;
    }
    #cs_el {position:absolute;
    left:143px;
    top:33px;
    width: 18px;
    height: 18px;
    }
    #cs_el a{
    left:0px;
    top:0px;
    width: 18px;
    height: 18px;
    display: block;
    list-style-type: none;
    }
    #cs_el a:hover{
    width: 196px;
    height: 92px;
    background-image:url(images/cs_el.gif);
    background-repeat: no-repeat;
    background-position: -143px -33px;
    }
    #cs_gi {position:absolute;
    left:163px;
    top:33px;
    width: 18px;
    height: 18px;
    }
    #cs_gi a{
    left:0px;
    top:0px;
    width: 18px;
    height: 18px;
    display: block;
    list-style-type: none;
    }
    #cs_gi a:hover{
    width: 196px;
    height: 92px;
    background-image:url(images/cs_gi.gif);
    background-repeat: no-repeat;
    background-position: -163px -33px;
    }
    #cs_gn {position:absolute;
    left:129px;
    top:49px;
    width: 18px;
    height: 18px;
    }
    #cs_gn a{
    left:0px;
    top:0px;
    width: 18px;
    height: 18px;
    display: block;
    list-style-type: none;
    }
    #cs_gn a:hover{
    width: 196px;
    height: 92px;
    background-image:url(images/cs_gn.gif);
    background-repeat: no-repeat;
    background-position: -129px -49px;
    }
    #cs_si {position:absolute;
    left:163px;
    top:53px;
    width: 18px;
    height: 18px;
    }
    #cs_si a{
    left:0px;
    top:0px;
    width: 18px;
    height: 18px;
    display: block;
    list-style-type: none;
    }
    #cs_si a:hover{
    width: 196px;
    height: 92px;
    background-image:url(images/cs_si.gif);
    background-repeat: no-repeat;
    background-position: -163px -53px;
    }
    #cs_so {position:absolute;
    left:163px;
    top:73px;
    width: 18px;
    height: 18px;
    }
    #cs_so a{
    left:0px;
    top:0px;
    width: 18px;
    height: 18px;
    display: block;
    list-style-type: none;
    }
    #cs_so a:hover{
    width: 196px;
    height: 92px;
    background-image:url(images/cs_so.gif);
    background-repeat: no-repeat;
    background-position: -163px -73px;
    }

    And this is the html:

    Code:

    When I pass with the mouse over one of the 9 buttons, the button image changes (and that’s right), but I can’t see another portion of the rollover image that should appear on the upper left corner. It is somehow "masked" by something… And I haven’t found how to make it appear – I know there must be something related to the width and height of the li ids, but when I tried to enlarge them I made that missing part of the image appear, but the activation of the buttons is worse than ever – the rollover effect can be seen only if I move the cursor completely out of the image and back again.

    You can see a working exemple here. While this is one of the rollover images that should appear in full (please note the name on the upper left corner):
    [img]http://www.eosidea.com/images/cs_ar.gif[/img]

    Any help would be greatly appreciated!

    Diego

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".