Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS image map rollover – not displaying full image

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #23944
    nightjar
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.