맛집 여행 캠핑 일상 생활

CSS CUSTOM 마우스 커서 이미지 사용하기 본문

HTML.CSS

CSS CUSTOM 마우스 커서 이미지 사용하기

영은파더♥ 2016. 8. 5. 14:56

CSS CUSTOM 마우스 커서 이미지 사용하기


사용자가 만든 이미지를 마우스 커서로 이용하는 방법이다.

첨부한 커서 이미지로 바꿔보았다.

http://www.cursor.cc/ 여기 가면 직접 커서 이미지를 만들수도 있다.

<style type="text/css">

canvas { cursor: url(../cursor/eraser.cur), auto; }

</style>


<script type="text/javascript">

$('#MyCanvas').css({'cursor':'url(../cursor/eraser.cur), auto'});

</script>


<canvas id="MyCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>

스크립트안에 코드는 jQuery 로 바꾸는 방법이다.


===== 예제 ( 아래 공간에 마우스를 움직여서 확인)


=====


erase.cur


Trackback : | Comments :