메뉴 건너뛰기

조회 수 8695 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
<!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> 




  1. 활용예제 : 체크박스 전체선택 전체해제 /라디오버튼

    Date2014.03.01 Views7020
    Read More
  2. 현재시간 기준 날짜 계산

    Date2016.09.21 Views6103
    Read More
  3. 현재 날짜, 시간 ( Month + 1 에 대해서 )

    Date2021.03.25 Views218
    Read More
  4. 핸드폰 번호 일부 마스킹크 작업 (정규식 이용)

    Date2015.06.19 Views10741
    Read More
  5. 해상도에 따라 배경 바꾸기

    Date2014.03.01 Views6083
    Read More
  6. 함수의 arguments 를 이름(key)으로 접근하기

    Date2016.09.21 Views5976
    Read More
  7. 한글 짜르기

    Date2019.01.16 Views1179
    Read More
  8. 한글 또는 영문만이 존재하는지 체크

    Date2019.01.16 Views1163
    Read More
  9. 풍선도움말

    Date2019.01.16 Views1167
    Read More
  10. 폼안에 태그명, 함수명 같을때 오류

    Date2021.03.26 Views214
    Read More
  11. 페이지 이동

    Date2021.03.26 Views190
    Read More
  12. 페이지 로드 할때 컨트롤에 포커스 주기

    Date2015.02.03 Views8500
    Read More
  13. 패스워드, 확인패스워드가 맞는지 체크

    Date2023.01.12 Views129
    Read More
  14. 팝업창 차단 "허용 메시지"

    Date2018.09.28 Views1738
    Read More
  15. 팝업창 맨위로 올라오게 하기

    Date2021.03.26 Views867
    Read More
  16. 팝업창 가운데 띄우기

    Date2016.12.23 Views6705
    Read More
  17. 특정부위 마우스 오버시 설명을 보여주는 소스

    Date2014.03.17 Views8695
    Read More
  18. 특정 부분 인쇄 자바스크립트

    Date2019.01.16 Views1588
    Read More
  19. 특정 HTML DOM 엘레멘트로 스크롤 이동하기

    Date2016.09.09 Views7075
    Read More
  20. 텍스트박스(input type = "text") 숫자 증가, 감소 시키기 - 쇼핑몰 주문 수량

    Date2015.06.19 Views12281
    Read More
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved