javascript - 특정부위 마우스 오버시 설명을 보여주는 소스

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>이미지 맵을 이용해서 마우스 오버시 설명을 보여주는 소스</title>
<SCRIPT LANGUAGE="javascript">

Image1 = new Image(265,406)
Image1.src = "c:\down_file\ep.gif"

Image2 = new Image(265,406)
Image2.src = "ep2.gif"

Image3 = new Image(265,406)
Image3.src = "ep3.gif" 

</SCRIPT>
<SCRIPT LANGUAGE="javascript">

function zoomin() {
document.emp.src = Image3.src; return true;
}

function zoomout() {
document.emp.src = Image2.src; return true;
}

function original() {
document.emp.src = Image1.src; return true; 
}

</SCRIPT> 

<script language="JavaScript"> 
<!-- 
 
function helpOn() { 
        helpDiv.style.display = "block";   
        //helpDiv.style.display = "";   // ??? ?? ???? block?? ?????.
} 
 
function helpOff() { 
        helpDiv.style.display = "none"; 
} 
 
//--> 
</script> 
</head>

<body>
이미지 맵을 응용한 설명이 가능한 레이어를 보였다가 숨기는 기능이 있습니다.<br>
<br>

링컨 얼굴위에 마우스를 올리면 설명용 레이어가 나옵니다.<br>

응용을 하면 설명대신 다른 이미지를 보여줄수도 있습니다.<br>


<IMG NAME="emp" SRC="http://workpicturecom.cafe24.com/site/cafepicture/AT2.jpg" USEMAP="#ep" width="406" height="265"> 
<MAP NAME="ep">
  <AREA SHAPE="rect" boder=1 COORDS="117, 70, 160, 119" HREF="http://workpicturecom.cafe24.com/site/cafepicture/AT4.jpg" onMouseOver = "helpOn()" OnMouseOut = "helpOff()" target="_blank">
  <xAREA SHAPE="rect" ALT="Enlarged right side" COORDS="212,68,250,120" HREF="ep3.gif" onMouseOver="menu2()" onMouseOut="original()">
  <AREA SHAPE="rect" nohref coords="0, 0, 0, 0">
</MAP>

<div id="helpDiv" class="help" style="width:250px; height:200px; position:absolute; left:170px; top:120px; z-index:30;"> 
<table bgcolor="e8e8e8" border=1><tr><td>
링컨 얼굴에  마우스가 올라온 경우입니다.
설명을 여기에 넣으면 됩니다.</td>
        </tr>


</table></div> 


</body>
</html>
특정부위 마우스 오버시 설명을 보여주는 소스

단축키

Articles
