1. 뉴스레터에 들어갈 이미지 파일 업로드
이미지를 티스토리 블로그에 업로드했다면 이미지 우클릭 -> 이미지 주소 복사
(뉴스레터에 넣을 이미지 수만큼 업로드)
2. 이미지 세부 영역에 하이퍼링크 추가를 해야 한다면 세부 영역 좌표 확인
https://www.maschek.hu/imagemap/ 접속 후 OR from the Internet: 부분에 1번 과정을 통해 얻은 이미지 주소를 넣은 후
accept -> 이미지가 나타나면 마우스 클릭으로 세부 영역 설정 -> 좌표 값 복사
3. 뉴스레터용 HTML 기본 양식 준비
1번 과정을 통해 얻은 이미지 주소를 img src 값에 넣고, 2번 과정을 통해 얻은 세부 영역 좌표를 coords 값에 넣는다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1차 ○○○ 5월 뉴스레터</title>
</head>
<body leftmargin="0" topmargin="0">
<div style="width:800px; margin: 0 auto;">
<!-- img src 값에 뉴스레터1, 2 이미지 전체 경로 넣기 -->
<img src="http://test.co.kr/uploads/2025/05/뉴스레터1.jpg" usemap="#001" border="0" alt="1차 ○○○ 5월 뉴스레터1" style="width: 100%; border: 0px; vertical-align: top;">
<img src="http://test.co.kr/uploads/2025/05/뉴스레터2.jpg" usemap="#002" border="0" alt="1차 ○○○ 5월 뉴스레터2" style="width: 100%; border: 0px; vertical-align: top;">
<!-- 뉴스레터1 이미지 세부 영역에 하이퍼링크 추가 -->
<map name="001">
<!-- coords 값에 뉴스레터1 이미지 세부 영역 좌(x1), 상(y1), 우(x2), 하(y2) 좌표 넣기, href 값에 하이퍼링크 연결할 주소 넣기 -->
<area shape="rect" coords="10,10,110,110" href="https://www.testpage1.co.kr/" alt="1차 ○○○ 5월 뉴스레터1 영역1" target="_blank" border="0" style="border: none;"/>
<area shape="rect" coords="20,20,120,120" href="https://www.testpage2.co.kr/" alt="1차 ○○○ 5월 뉴스레터1 영역2" target="_blank" border="0" style="border: none;"/>
</map>
<!-- 뉴스레터2 이미지 세부 영역에 하이퍼링크 추가 -->
<map name="002">
<!-- coords 값에 뉴스레터2 이미지 세부 영역 좌(x1), 상(y1), 우(x2), 하(y2) 좌표 넣기, href 값에 하이퍼링크 연결할 주소 넣기 -->
<area shape="rect" coords="30,30,130,130" href="https://www.testpage3.co.kr/" alt="1차 ○○○ 5월 뉴스레터2 영역1" target="_blank" border="0" style="border: none;"/>
<area shape="rect" coords="40,40,140,140" href="https://www.testpage4.co.kr/" alt="1차 ○○○ 5월 뉴스레터2 영역2" target="_blank" border="0" style="border: none;"/>
<area shape="rect" coords="50,50,150,150" href="https://www.testpage5.co.kr/" alt="1차 ○○○ 5월 뉴스레터2 영역3" target="_blank" border="0" style="border: none;"/>
<area shape="rect" coords="60,60,160,160" href="https://www.testpage6.co.kr/" alt="1차 ○○○ 5월 뉴스레터2 영역4" target="_blank" border="0" style="border: none;"/>
</map>
</div>
</body>
</html>'HTML > 참고자료' 카테고리의 다른 글
| [HTML] 상대 경로 & 절대 경로 (0) | 2025.02.23 |
|---|---|
| [HTML] 태그 종류 (1) | 2024.12.25 |
| [HTML] form 태그 속성 (0) | 2024.12.12 |