자기개발/티스토리 제작

HTML <img> Tag 이미지맵

안박 2022. 10. 5. 21:27

https://www.w3schools.com/tags/tag_img.asp

 

HTML img tag

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

"rect" : 사각형, 좌표로 위치 지정하는 coords

"circle": 원

 

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

 

좌표잡기는 그림판 활용https://t1.daumcdn.net/cfile/tistory/99E313445AC1DB1922" width="500" height="500"

 

보기 > 격자 > 이미지 속성

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="다가치사람다움">
  <meta name="Keywords" content="라면맛있게끓이기">
  <meta name="Description" content="해물라면, 라면과 같이 먹기 좋은 음식">
  <title>짬뽕해물라면 vs 치즈폭탄라면</title>
 </head> 
 <body>
  <h1> 짬뽕해물라면 vs 치즈폭탄라면
  <h3> 바쁜 일상에 최고의 패스트 푸드 라면, 시중에 판매되는 다양한 라면을 번갈아 먹는 것도 일미지만 라면을 내 마음대로 멋지게 업그레이드한다면 금상첨화!
  <p>  <b>짬뽕해물라면</b>
  <h5> 말그대로 각종 다양한 제철 해물, 없을땐 냉동해물을 넣어 끓인 라면이다. 해물 손질을 잘하고, <b>라면이 끓고 있을 때 넣어야</b> 쪼그라들지 않는다는 점!!
  
  </p>
 <img src="https://img-cf.kurly.com/shop/data/goodsview/20191011/gv20000064219_1.jpg" width="700" height="500" alt="Workplace" usemap="#fish" >
<map name="fish">
  <area shape="circle" coords="400,320,100" alt="해물" href="https://www.coupang.com/np/search?component=&q=%EB%83%89%EB%8F%99%ED%95%B4%EB%AC%BC&channel=user">
</map>
 

  <p> <h3> <b>치즈폭탄라면</b></p>
  <h5>  <b>슬라이스 치즈</b>는 끌이면서 퐁당 넣어준 뒤 휘휘 젓고, <b>모짜렐라 치즈</b>는 불 끄기 1분 전에 넣은 뒤 그 위에 파송송 올리면 비쥬얼 어택! 
 


 <img src="https://t1.daumcdn.net/cfile/tistory/99E313445AC1DB1922" width="700" height="500"" usemap="#workmap">
<map name="workmap">
  <area shape="rect" coords="150,150,750,600" alt="치즈" href="https://www.coupang.com/np/search?component=&q=%EC%B9%98%EC%A6%88&channel=user">
  
</map>

 
 </body>
</html>

그리하여 만든페이지는 

https://tistory2.daumcdn.net/tistory/4934129/skin/images/korean%20noodle.html.bak