create image map with css? - css

Question

i create image map with css but don't work.
i have a image in background and i want to create a image map for background picture .but when my mouse hover an link background image not change.
this is my html code.
<section id="centersectioncontact" class="colortext">
<ul id="cantact">
<li id="linkin">Link in </li>
<li id="twiter"> twiter</li>
</ul>
</section>
and this is my css code.
#centersectioncontact {
position: absolute;
top: 14%;
left: 31%;
width: 426px;
height: 426px;
bottom: 25%;
right: 25%;
z-index: 2;
}
ul#cantact
{
list-style:none;
background:url(../Images/contact.png) no-repeat 0 0 ;
position:relative;
width:426px;
height:420px;
margin:0;
padding:0;
opacity:0.5;
}
ul#cantact li{
position: absolute;
border: 1px solid #000;
}
}
ul#cantact a{
display: block;
height: 100%;
text-indent: -9000px;
}
#linkin {
width: 215px;
height: 140px;
top: 0px;
left: 0px;
}
#twiter
{
width: 215px;
height: 140px;
top: 0px;
left: 215px;
}
ul#cantact li a:hover {
background:url(../Images/contact.png) no-repeat 0 0;
}
ul#cantact li#linkin a:hover {
background-position: 0 -426px;
}
ul#cantact li#twiter a:hover{
background-position: 0 -426px;}
.colortext{
margin-top: 7px;
margin-left: 16px;
top: 2%;
left: 2%;
color: #FFFFFF;
text-align: left;
font-size: xx-large;
z-index: 10000000;
}

Answer 1

there is a couple of contradictions in your css code. One of these and an extra '}' cause the problem:
from
ul#cantact li{
position: absolute;
border: 1px solid #000;
}
}
delete the extra "}"
and you should remove also:
ul#cantact li#linkin a:hover {
background-position: 0 -426px;
}
ul#cantact li#twiter a:hover{
background-position: 0 -426px;
}
In the code you have already defined background-position as 0 0 in
ul#cantact li a:hover {
background:url(../Images/contact.png) no-repeat 0 0;
}
And besides, with the -426px horizontal setting the img won't reveal on the screen.