마우스 커서가 움지는 위치를 따라 다니는 이미지 기능을 앞전에 올렸는데 문제점이 스크롤을 내려 버리면 좌표값이 이상해지는 문제를 발견해서 스크롤시엔 스크롤에의한 이동된 좌표값을 추가하도록 했습니다.

사용자 삽입 이미지


<div id=cs style="visibility:hidden;position:absolute;left:10;top:10;width:125;height:35;">
<img src="http://amsimg.daum-img.net/www2/0Cbw/cJcd/samsung_bs_12535_0415_.jpg">
</div>
<script>
function Move1(e) {
 document.cs.left=e.pageX + 10;
 document.cs.top=e.pageY + 10;
}
function Move2(){
 cs.style.left=event.clientX + document.body.scrollLeft;
 cs.style.top=event.clientY + document.body.scrollTop;
}
if (document.layers) {
 document.captureEvents(Event.MOUSEMOVE);
 document.onmousemove=Move1;
}
if (document.all) {document.onmousemove=Move2;}
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()">
블로그 이미지

세이박스

세이박스는 세상의 모든 이야기를 담는 소통박스 입니다.

댓글을 달아 주세요

마우스 커서 모양을 변경하고자 할때 cursor:에 모양을 지정해주면 되니다.

style="cursor:hand"

style="cursor:wait"

style="cursor:help"

style="cursor:move"

style="cursor:crosshair"

style="cursor:n-resize"

style="cursor:e-resize"

style="cursor:s-resize"

style="cursor:w-resize"

style="cursor:se-resize"

style="cursor:sw-resize"

style="cursor:ne-resize"

style="cursor:nw-resize"  
블로그 이미지

세이박스

세이박스는 세상의 모든 이야기를 담는 소통박스 입니다.

댓글을 달아 주세요

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

사용자 삽입 이미지
<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  에서 + 값을 증가 할수록  만큼 따라 다니는 이미지가 마우스 커서에서 멀어집니다.

위 글은 세이박스에서 작성한 글입니다.
블로그 이미지

세이박스

세이박스는 세상의 모든 이야기를 담는 소통박스 입니다.

댓글을 달아 주세요