이미지 버튼이 마우스를 올리면 위치가 바뀝니다.

나는 그 날에 다시 보았을 때 큰 효과가 있었지만 지금은 그것에 대해 아무 것도 찾을 수 없습니다.이미지 버튼이 마우스를 올리면 위치가 바뀝니다.

개념은 하나의 이미지에 결합 된 일반 모양과 onHover 모양이 모두있는 이미지입니다. 마우스를 올리면 이미지가 전환되고 onHover 모양이 표시됩니다.

<img id="button" src="img.png" width="100" height="50"> 

onHover: 
document.getElementById("button").top = "-50";

출처

2012-10-02 Rawr

CSS 스프라이트 ...? –

나는 그 이름을 몰랐다. 나는 자바 스크립트 트릭, 아니 CSS라고 생각 : – Rawr

CSS :

#button { 
    background-image:url('img.png'); 
    background-position: 0 0; 
} 

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

출처

2012-10-02 00:04:45 AlienWebguy

이 코드를 시도 해 봤나? – Rawr

스프라이트는 일반적인 방법입니다. 나는 항상 그것을 사용한다 :) – AlienWebguy

그는 그것을 시도 했느냐? 지금은 완전히 웹 표준입니다. 사실, 버튼을 움직이지 않는 한 다른 방법으로하는 것은 미친 것입니다. –

HTML :

나는 그것이 포함 된 코드의 종류가 확실 해요

enter image description here

: 여기

은 시각적 인 예입니다

<div></div>

CSS :

<style> 
div{ 
    width:98px; 
    height:45px; 
    /*border:1px solid red;*/ 
    background-image:url('http://i.stack.imgur.com/kxznh.png'); 
    background-position: -83px -123px; 
} 
div:hover { 
    background-position: -83px -177px; 
} 
</style>

Here is a demo for it

출처

2012-10-02 00:13:34 Koerr

이미지 버튼이 마우스를 올리면 위치가 바뀝니다.

답변

관련 문제