<!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>
