2010-06-18 4 views
0

단일 탐색에 2 개 이상의 이미지를 사용할 수 있습니까? 즉, 이미지 위에서 마우스를 가져 가면 6 개의 다른 이미지가 표시됩니다. 단일 내비게이션 이미지를 만들 수 있습니까? 가능한 경우 어떻게 의미합니까?CSS의 배경 위치

이 나는 ​​귀하의 질문에 바로이 가능 얻는 경우에 모든이

alt text http://img714.imageshack.us/img714/2786/mubeen.gif

+2

이 질문에 GIF 애니메이션 이미지에 이미지를 변경 제안

이해하기가 매우 어렵습니다. 정확히 무엇을 성취하려고하는지 명확히하십시오. –

+0

@phleet : 제 질문에 이미지를 추가하십시오. – Mubeen

+1

을 통해 가십시오. 아직도 이해가되지 않습니다. 그 점들이 움직이고 있습니까? 그들이 위치를 바꿀 때는 언제입니까? –

답변

1

요소에 한 개의 bg 이미지 만 설정할 수 있습니다 (현재 크로스 브라우저). 는 CSS에서

<a class="img" id="thatoneimg" href="#"></a>

그리고 다음을 : 당신이 가져가 또는 무엇이든 그것을 변경하려면, 단지 #href 세트와 함께 a -tag를 추가

a.img { 
    width: 100px; 
    height: 100px; 
} 
a#thatoneimg { 
    backround-image: url(staticimg.jpg); 
} 
a#thatoneimg:hover { 
    backround-image: url(movingimg.gif); 
}

크로스 브라우저를 작동합니다 그. IE에서 작동하려면 a 태그가 필요합니다.

편집 : Starx가 말했듯이 두 번째 이미지를 애니메이션으로 .gif로 만듭니다. 스프라이트는 사용하지 않지만 작동합니다.

+0

예. 정확합니다. 그러나 호버링 동안 두 개 이상의 이미지가 필요합니다. – Mubeen

+0

나는 그것을 지원하기 위해 내 대답을 편집했습니다. –

+0

결국 CSS 전환을 사용할 수 있습니다. http://vision-media.ca/resources/css/css-transformations-animations-and-transitions-examples – theorise

0

을 이해 생각,하지만 당신은 6 개 개의 다른 위치에서 배경 이미지를 포함하는 6 개 개의 HTML 요소를 가지고해야합니다.

+0

이미지를 탐색 할 때 같은 위치에 6 개의 다른 이미지가 필요합니다. – Mubeen

+0

@Mubeen 알 수 없습니다. 그래픽 예제를 만들 수 있습니까? –

+0

내 질문에 이미지를 추가하십시오. – Mubeen

3

정확하게 이해했다면 하나의 버튼 위로 마우스를 가져 가면서 배경 이미지의 위치를 ​​계속 변경하고 싶을 것입니다. 맞다면, 나는 배경 이미지로 정적 이미지를 만들고 가져가