이미지 호버에서 변경되지만 유지됩니다.

Question

대화식지도를 만들고 마우스를 올려 놓았을 때 색상이 바뀌고 다른 이미지로 연결되는 버튼이 표시되기를 원합니다.

이

a.button 
{ 
position: inherit; 
display:block; 
background:transparent url('images/button.png') bottom; 
background-repeat: no-repeat; 
} 

a.button:hover 
{ 
position: inherit; 
background-image: url('images/button_hover.png'); 
background-repeat: no-repeat; 
} 

#one 
{ 
position: fixed; 
left:225px; 
top:702px; 
} 

HTML :

<div id="map"><img src="images/map.png"/></div> 

     <a href="http://matthewligotti.com" class="button"/> 
       <img src="images/button.png" id="one"/> 
     </a> 

    </div> 

그래서 나는 이미지가 연결하고 마우스를 원하는 나는이 작품을 만들기에 큰 문제가 있습니다

은 ... 나의 현재 CSS는 엉망 각 버튼에 대해 동일한 두 개의 이미지가 유일한 변화는 당신을 데려 오는 링크가 될 것입니다. 어떻게해야합니까?

Answer 1

이미지를 편집 할 수있는 경우 이미지를 서로 겹쳐서 하나의 .png로 결합 할 수 있습니다. 새로운 더블 이미지의 상단 또는 하단을 전환 할

a.button 
{ 
display:block; 
height:100px; 
width:200px; 
background-image:url('1.jpg'); 
background-position:0 0; 
background-repeat: no-repeat; 
} 

a.button:hover 
{ 
background-position:0 -100px; 
} 

및

<a href="http://matthewligotti.com" class="button"/></a> 
<a href="http://matthewligotti.com" class="button"/></a> 

가 표시되는 : 버튼을 버튼 X 200 픽셀 100 픽셀이라면 그런 다음, 당신이 뭔가를 할 수 있습니다.

그게 무슨 뜻입니까?