[css] 마우스 커서 이미지 바꾸기 - 브라우저별 이미지 확장자 유의

https://jsfiddle.net/Kimara/nnj7L0xc/

 

 

Custom Cursors

커서 모양을 이미지로 바꿀 수 있다.

 

모바일용 브라우저, 오페라 에서는 적용 X

익스 6이상 O

 

body, html {cursor: url(smiley.gif), url(myBall.cur), auto}
a {cursor: url(smiley.gif), url(myBall.cur), auto}

 

첫번째 이미지(smiley.gif)가 없거나 가져오지 못했을 때, 두번째 이미지(myBall.cur)가 적용되고, 

이것도 실패하면 마지막에 설정된 값(auto)이 적용된다. 

이미지를 가져오지 못할 경우에 적용될, 마지막 설정(키워드 값)은 반드시 해줘야 한다. 

브라우저 호환성을 위해서 url을 먼저 나열한 후, 키워드 값을 입력하도록 한다.

 

이미지의 크기는 "128 ×128"px 까지 허용되지만, "32 x 32"px 가 적당하다.

 

반투명한 이미지는 윈도우xp 이전 버전에서는 적용되지 않는다. 

익스플로러에서는 gif나 jpg, png 등은 적용되지 않으며, cur 와 ani 파일만 적용된다. 

반면, 파이어폭스에서는 ani 파일이 적용되지 않는다.

 

이미지의 위치(좌표)를 지정할 수도 있으나, 파이어폭스에서만 가능한 듯 하다. 

왼쪽 위치를 가리키는 x좌표가 먼저 오고, 그 다음에 위쪽 위치인 y좌표가 온다. 

cursor: url(foo.png) 4 12, pointer;

 

 

+) 추가

 

cur 파일은 포토샵에서 사용하지 않는 확장자이므로

추가 확장프로그램을 설치해 주거나 타 사이트에서 제작 및 변환할 수 있다.

 

1. 이미지 확장자 변환 사이트

https://convertio.co/kr/png-cur/

PNG CUR 변환 (온라인 무료) — Convertio

2. cur 파일 제작 가능한 사이트

-> 1번 사이트에서 변환 후 사이즈 & 커서 위치 조정을 이 사이트에서 해준다.

https://www.cursor.cc/

Cursor Editor