반응형
- html 파일 두개 필요
1. 팝업될 창의 html 파일
// 팝업될 창
<body>
<img src="wdqwd.jpg" alt="workplace" usemap="#workmap">
<map name="workmap">
<area shape="circle" coords="162,154,35" href="0616.html" alt="computer" onclick="window.close();">
</map>
</body>
이미지 파일을 넣어주고 img 태그의 usemap명과 map태그의 name명을 맞춰준다.
area태그의 coords 는 이미지의 좌표다.
*이미지 좌표 구하기
더보기 클릭
- circle 구하는 방법은 원의 중심에 마우스를 올리면 x y 표가 뜨는데 그것을 적고,
- 그 중심점에서 반지름 크기를 마지막에 적는다.
- 코드는 위 코드블럭 참고 (coords="중심점(x, y), 반지름 크기) = (coords="a,b,c)
2. 팝업될 창을 불러오는 html 파일
<script>
window.open("winpopup.html", "pop1", "width=300, height=400,
left=300, top=50");
</script>
width=300, height=400 는 팝업창의 가로 세로 크기
left=300은 웹화면 왼쪽에서 오른쪽으로 300 떨어지고,
top=50은 웹창 가장 위쪽(주소표시줄 더 위쪽 창의 최상단)에서 50px 아래쪽으로 내려온다.
더보기 클릭 - 위 코드의 widht, height, left, top 을 그림으로 설명.
※height를 보면 팝업 창의 X 표시가 있는 곳부터가 아닌 내용이 들어가는 부분 부터 height를 잡는다.
*이미지 좌표 찾는 법 (포토샵) - 그림판도 가능함, 설명은 포토샵으로 함.
*rect 를 사용할때 찾는 법
반응형
'참고 > JAVASCRIPT' 카테고리의 다른 글
| 복습 - setInterval (0) | 2020.06.03 |
|---|---|
| setInterval / clearInterval (0) | 2020.06.02 |
| JSON - Javascript Object Notation (0) | 2020.05.26 |
| 콜백함수와 DOM 제어 (0) | 2020.05.22 |
| 로또 lotto (0) | 2020.05.22 |
댓글