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"><a href="">Link in</a> </li>
    <li id="twiter"><a href=""> twiter</a></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;
    }
Était-ce utile?

La solution

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.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top