📂 JAVASCRIPT/Event
[ 자바스크립트 ] 마우스 포인터의 현재 위치 알아내기 🕔 2015. 8. 10. 08:37
최종 수정일 : 2016. 9. 13.
인터넷 익스플로러(IE), 파이어폭스, 크롬, 오페라에서 잘 적용됨.
사파리 5.1 버전에서는, <a> 태그의 "cursor: none" 설정이 적용되지 않음. 그 외 태그에서는 모두 실행됨.
<script type="text/javascript"> // 익스플로러의 버전 체크하기 var version_IE = "0"; var ieLower = navigator.userAgent.match( /MSIE [0-9]{1,}/ ); if ( ieLower != null ){ version_IE = ieLower.toString().replace( "MSIE " , "" ); } function get_position_of_mousePointer ( event ) { event = event || window.event; var x = 0; // 마우스 포인터의 좌측 위치 var y = 0; // 마우스 포인터의 위쪽 위치 if ( 0 < version_IE && version_IE < 7 ) { // 인터넷 익스플로러 (ie) 6 이하 버전일 경우 적용될 내용 x = event.offsetX; y = event.offsetY; } else if ( event.pageX ) { // pageX & pageY를 사용할 수 있는 브라우저일 경우 x = event.pageX; y = event.pageY; } else { // 그외 브라우저용 x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; } return { positionX : x, positionY : y }; } </script>
아래는, 마우스 포인터의 위치를 이용하는 방법들이다.
[ 자바스크립트 ] 나만의 커서 사용하기
아래의 링크 위로 마우스를 가져가면, 윈도우 창 모양의 이미지가 나타날 것이다. ( open_in_browser.png 
그 상태에서 클릭하면, 링크로 이동된다.
www.tistory.com
<a id="myLink" style="cursor: none" href="http://www.tistory.com/">www.tistory.com</a>
<div id="tag_for_link_pointer" style="display: none; position: absolute; left: 0; top: 0">
<img src="open_in_browser.png" />
</div>
<script>
var linkTag = document.getElementById( "myLink" );
var blankTag = document.getElementById( "tag_for_link_pointer" );
var pos = "";
function showPointer (event ){
if ( typeof pos == "string" ){
pos = get_position_of_mousePointer( event )
blankTag.style.left = ( pos.positionX+15 ) + "px"; // '+15'는 커서가 감춰지지 않는 IE 8 이하 때문.
blankTag.style.top = pos.positionY + "px";
}
blankTag.style.display="block";
}
if ( linkTag.addEventListener ) {
linkTag.addEventListener( "mouseover", showPointer, false );
linkTag.addEventListener( "mouseout", function(){ blankTag.style.display="none" }, false );
}
else if ( linkTag.attachEvent ) {
linkTag.attachEvent( "onmouseover", showPointer );
linkTag.attachEvent( "onmouseout", function(){ blankTag.style.display="none" } );
}
</script>
[ 자바스크립트 ] 태그의 title 속성 ─ style 설정하기
위에 있는 내용들 위로, 마우스 포인터를 가져가 보시오~*
<!DOCTYPE html> <html> <head> <title> 테스트용 </title>
<style type="text/css">
/* 스타일 관련 사이트 : CSS3 Button Generator */
.hide {
border-style: none;
background: none;
position: absolute;
left: -100px;
top: 0px;
}
.show {
position: absolute;
margin: 0px; padding: 4px 8px 2px 8px;
border: 1px solid gray;
background-color: white;
font-size: 12px;
color: #5d5d5d;
text-decoration: none;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 3px 3px 1px gray;
-webkit-box-shadow: 3px 3px 1px gray;
-moz-box-shadow: 3px 3px 1px gray;
}
.ie_lower {
height: 20px;
position: absolute;
padding: 0px;
background-color: #bbbbbb;
border: 1px solid #aeaeae;
border-width: 0px 1px 1px 0px;
}
</style>
</head> <body>
<abbr title="the day before yesterday">desterday</abbr> <p> 타이틀 속성이 없는 태그. </p> <a href="http://www.tistory.com/" title="티스토리" target="_blank">www.tistory.com</a> <br /> <img src="snoopy.png" alt="우드스탁을 안고 있는 스누피" title="스누피와 우드스탁" /> <br /> <div id="tag_for_title_attribute" class="hide"></div>
<script type="text/javascript">
var version_IE = "0";
var ieLower = navigator.userAgent.match( /MSIE [0-9]{1,}/ );
if ( ieLower != null ){ version_IE = ieLower.toString().replace( "MSIE " , "" ); }
function get_position_of_mousePointer ( event ) {
event = event || window.event;
var x = 0;
var y = 0;
if ( 0 < version_IE && version_IE < 7 ) {
x = event.offsetX;
y = event.offsetY;
}
else if ( event.pageX ) {
x = event.pageX;
y = event.pageY;
}
else {
x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return { positionX : x, positionY : y };
}
</script>
<script type="text/javascript">
(function () {
var allTag = document.body.getElementsByTagName( "*" );
var blankTag = document.getElementById( "tag_for_title_attribute" );
var values_of_titleAttr = function() {
var array = [];
for ( var x = 0; x < allTag.length; x++ ) {
var tag = allTag [ x ];
array[ x ] = tag.title;
}
return array;
} ();
var newTag = document.createElement( "p" );
newTag.style.position = "relative";
newTag.style.left = "-3px";
newTag.style.top = "-3px";
function set_tag_for_titleAttr ( event ) {
event = event || window.event;
var target = event.target || event.srcElement;
var title = target.title;
if ( title != "" ) {
var mousePointer = get_position_of_mousePointer( event );
var positionX = mousePointer.positionX;
var positionY = mousePointer.positionY;
target.removeAttribute( "title" );
var tagName = target.tagName.toLowerCase();
if ( 0 < version_IE && version_IE < 9 ) {
if ( version_IE < 8 && ( tagName == "img" || tagName == "area" ) ) target.title = title;
else {
newTag.innerHTML = title;
newTag.className = "show";
blankTag.className = "ie_lower";
blankTag.style.left = positionX + "px";
blankTag.style.top = positionY + "px";
blankTag.appendChild( newTag );
}
}
else {
blankTag.innerHTML = title;
blankTag.className = "show";
blankTag.style.left = positionX + "px";
blankTag.style.top = positionY + "px";
}
}
}
function return_original_value () {
blankTag.innerHTML = "";
blankTag.className = "hide";
var array = values_of_titleAttr;
for ( var x = 0; x < array.length; x++ ) {
var tag = allTag[ x ];
if ( array[ x ] == "" || tag.title != "" ) continue;
tag.title = array[ x ];
}
}
if ( window.addEventListener ) {
window.addEventListener( "mouseover", set_tag_for_titleAttr, false );
window.addEventListener( "mouseout", return_original_value, false );
}
else if ( window.attachEvent ) {
document.body.attachEvent( "onmouseover", set_tag_for_titleAttr );
document.body.attachEvent( "onmouseout", return_original_value );
}
}) ();
</script>
</body> </html>
자세한 설명은, 이 블로그에 있는 아래 글을 참고하시오~*
☞ [ 자바스크립트 ] 태그의 title 속성
ie의 버전별로 스타일을 설정하고 싶다면, 아래 글을 참고하시오~*
☞ [ 자바스크립트 ] IE 버전 체크용 함수
이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*
'JAVASCRIPT > Event' 카테고리의 다른 글
| [ 자바스크립트 ] target (0) | 2016.12.14 |
|---|---|
| [ 자바스크립트 ] onfocusin & onfocusout (0) | 2016.11.30 |