세이박스

'포인터'에 해당되는 글 1건

  1. 자바스크립트 마우스 따라 다니는 이미지

자바스크립트 마우스 따라 다니는 이미지

웹프로그램
이미지 위에 마우스를 올려 놓으면 이뿐 아이콘이 나타 나며 마우스가 돌아 다닐때 같이 따라 다니도록 하며 이미지 영역을 마우스가 벗어나면 따라다니던 마우스가 사라지게 하는 효과

사용자 삽입 이미지
<div id=cs style="visibility:hidden;position:absolute;left:10;top:10;width:125;height:35;background-Image:url('http://amsimg.daum-img.net/www2/0Cbw/cJcd/samsung_bs_12535_0415_.jpg');"></div>
<script>
document.onmousemove=function () {
 cs.style.pixelLeft=event.x+10;
 cs.style.pixelTop=event.y+5;
}
function Show_icon(divid) {
  cs.style.visibility = "visible";
}
function Hide_icon(divid) {
  cs.style.visibility = "hidden";
}
</script>
<img src="http://photo-media.daum-img.net/200904/15/mediadaum/20090415114211.511.jpg"  onmouseover="Show_icon()" onmouseout="Hide_icon()">


위소스에서 width, height 는 따라 다니는 이미지의 크기를 지정 합니다.
event.x+10, event.y+10  에서 + 값을 증가 할수록  만큼 따라 다니는 이미지가 마우스 커서에서 멀어집니다.

위 글은 세이박스에서 작성한 글입니다.