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:
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): http://www.eosidea.com/images/cs_ar.gif
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:
#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:
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):
http://www.eosidea.com/images/cs_ar.gif
Any help would be greatly appreciated!
Diego