자바 스크립트를 사용하여 마우스를 올리면 배경 이미지 위치가 변경됩니다.

Question

10 개의 링크가 있습니다. 활성, 마우스 오버 및 비활성 링크 이미지로 구성된 단일 링크에 별도의 스프라이트 시트를 사용하고 있습니다. 나는 자바 스크립트에서 background-postion을 어떻게 바꿀 수 있는지 알고 싶다. 나는 CSS에서 이것을하는 방법을 알고 있지만 10 개의 다른 링크를 위해 나는 모든 링크에 대해 동일한 코드를 사용할 수 있기 때문에 자바 스크립트가 더 나은 옵션이라고 생각한다. 제안을 기다리는 중입니다.

Answer 1

당신은 착각을합니다. 초기 선언이 더 많이 필요한 경우에도 렌더링이 가장 빠른 CSS에서 수행되어야합니다. CSS가 최적화되어 있는지 확인하십시오.

.links{ 
background:transparent url(sprite.png) 0 0; 
} 

#link1{ 
background-position: 0 0; 
} 
#link1:hover{ 
background-position: 0 -50px; 
} 

#link2{ 
background-position: 100px 0; 
} 
#link2:hover{ 
background-position: 100px -50px; 
} 

그리고 HTML :

<a class="links" id="link1" href="#">link 1</a> 
<a class="links" id="link2" href="#">link 2</a> 

당신이 정말로, 정말로 자바 스크립트를 수행하려는 경우

, 당신은 스타일() 메소드를 찾고 있습니다. See W3Schools on style() and backgroundPosition

Answer 2

최상의 방법은 여러 이미지의 경우에도 CSS를 사용하는 것입니다.

크기 조정은 (10 개) 링크의 스프라이트에 대해 동일한 경우, 이미지의 불가지론 규칙을 만들 수 있습니다 그냥 배경 이미지

a.someclass:hover{ 
    background-position:Xpx Ypx; 
} 

는 재배치와 someclass (또는 무엇이든을 적용 당신은 그것을 당신의 모든 링크에라고 부른다) ...