# 10 다운로드, 이미지맵

KH/HTML

# 10 다운로드, 이미지맵

오늘의 진 2022. 9. 8. 14:38

링크 target

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
 
  <title> 링크의 target 속성 활용 </title>
 </head>
 <body>
  
<h3>링크의 target 속성 활용</h3>
<hr>

<ul>
<li><a href ="http://www.w3.org" target ="_blank">W3C(새 윈도우,_blank)</a>
<li><a href ="http://www.etnews.com" target ="_self">전자신문(현재윈도우,_self)</a>
<li><a href ="http://www.naver.com" target ="_parent">네이버(부모 윈도우,_parent)</a>
<li><a href ="http://www.mk.co.kr" target ="_top">매일경제신문(브라우저 윈도우,_top)</a>


</ul>

 </body>
</html>

parent와 top은 프레임 구조일때만 의미를 갖는다. 평소에는 _self와 동일한 형태를 보인다.

다운로드 링크 만들기

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
 
  <title> 파일 다운로드 </title>
 </head>
 <body>
  
<h3>다운은 여기서 받아 ~</h3>
<hr>
<ul>
<li><a href ="../images/Elvis.png" download> 엘비스 이미지 다운로드</a>
<li><a href ="../images/chapter9.pdf" download> chapter9.pdf 다운로드</a>
<li><a href ="th_3_5.html" download> html 파일 다운로드</a>
<li><a href ="../images/test.hwp" download> 한글파일 다운로드</a>
<li><a href ="../images/TEMP.zip" download> zip 파일 다운로드</a>

</ul>

 </body>
</html>

컴퓨터에 다음의 것들을 실행시킬 파일이 있다면 실행시켜주고 실행시킬 수 없다면 다운로드 하는 형태(폼)을 띄워준다.

파일을 다운로드하거나 혹은 현재 상태에서 실행시켜준다.

이미지의 원하는 부분에 링크달기

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
 
  <title>use map test </title>
 </head>
 <body leftmargin="100" topmargin="10" bgcolor ="#cccc66">
  <br><br><br><br><br><br><br><br>

<img src ="../images/menu1.gif" width ="360" height ="50" border="0" usemap ="#menu">

<map name ="menu">

<!--사각형 형태의 이미지 맵 부분-->
<AREA shape ="rect" coords ="0,0,120,50" href ="http://www.daum.net" alt="네임 엥커 예제">


<!--원형 형태의 이미지 맵 부분-->
<AREA shape ="circle" coords ="180,25,25" href ="http://www.google.com" alt="구글">

<!--다각형 형태의 이미지 맵 부분-->
<AREA shape ="poly" coords ="240,0,360,25,300,50" href ="http://www.nate.com" alt="네이트">

</map>



 </body>
</html>

rect coords "좌 상측 좌표 우 하측 좌표 "
shepe "원의 중심 좌표, 원의 반지름"
"poly" 각 점의 좌표들

http://maschek.hu/imagemap/imgmap/ >> 쉽게 좌표를 볼수있게 도와주는 사이트

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
 
  <title> MY TITLE </title>
 </head>
<body leftmargin="100" topmargin="10" bgcolor ="pink">
  <br><br><br><br><br><br><br><br>

  <img src ="../dog/dog2.jpg" width ="620" height ="826" border="0" usemap ="#menu">


<map name ="menu">

<!--사각형 형태의 이미지 맵 부분-->
<AREA shape ="rect" coords ="288,400,354,470" href ="http://www.daum.net" alt="네임 엥커 예제">


<!--원형 형태의 이미지 맵 부분-->
<AREA shape ="circle" coords ="230,288,70" href ="http://www.google.com" alt="구글">

<!--다각형 형태의 이미지 맵 부분-->
<AREA shape ="poly" coords ="202,477,425,477,310,611" href ="http://www.nate.com" alt="네이트">

</map>


 </body>
</html>