본문 바로가기

javascript

이미지에 예쁜 툴팁을 넣어보자

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=euc-kr">
<TITLE> Jasko Sample Script </TITLE>
</head>

<body style="overflow:hidden">

<!---- [1단계] 아래의 방법으로 원하는 위치에 복사 해 넣으세요 ------------------>

<div id="message" style="position:absolute; z-index:1; border-width:1px; border-style:none;"></div>

<script language="JavaScript">
<!--

function msgposit(){
message.style.posLeft = event.x + 20 + document.body.scrollLeft // 숫자 20은 커서와 풍선도움말의 가로 간격
message.style.posTop = event.y - 20 + document.body.scrollTop// 숫자 -20은 커서와 풍선도움말의 세로 간격
}

function msgset(str,str2){
var text
text ='<table border="0" cellpadding="6" cellspacing="0" bgcolor="#FDFFF2" style="font-size:9pt; border-width:1; border-color:black; border-style:solid;">'
text += '<tr><td><p><b>' + str + '<br><br></b>' + str2 + '</td></tr></table>'
message.innerHTML=text
}

function msghide(){
message.innerHTML=''
}

//-->
</script>

<p align="center">

<!---- [2단계] 아래의 방법으로 이미지 태그에  3가지 이벤트 핸들러를 복사 해 넣으세요 ------------------>

<img src="../../img1.jpg"  onmousemove="msgposit()" onmouseout="msghide()" onmouseover="msgset('JASKO','자바스크립트 소스뱅크')">

<!------------------------- 여기까지 ---------------------------------->

</body>

</html>