이미지를 삽입하고 이미지 안에 있는 물건에 대한 정보(링크)를 표시하고 싶을 때,
image-map이라는 사이트를 이용하면 유용하다.
내가 가리킨 곳의 위치와 코드를 제공
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- map - 이미지 한장에다가 우리가 원하는 위치에 원하는 마크를 해놓을 수 있다. -->
<!-- image-map 사이트를 이용해 특정 위치 지정이 가능하다. -->
<!-- href에 원하는 사이트 url을 삽입 -->
<img src="./img/ikea.png" usemap="#image-map" />
<map name="image-map">
<area
target="_self"
alt=""
title=""
href="https://www.ikea.com/kr/ko/p/upplyst-led-wall-lamp-cloud-white-60440831/"
coords="654,154,28"
shape="circle"
/>
<area
target="_self"
alt=""
title=""
href="https://www.ikea.com/kr/ko/p/sundvik-ext-bed-frame-with-slatted-bed-base-white-s39240339/"
coords="132,915,28"
shape="circle"
/>
<area
target="_self"
alt=""
title=""
href="https://www.ikea.com/kr/ko/p/len-bed-canopy-white-60464902/"
coords="154,95,28"
shape="circle"
/>
<area
target="_self"
alt=""
title=""
href="https://www.ikea.com/kr/ko/p/duktig-dolls-bed-with-bedlinen-set-pine-multicolour-20167838/"
coords="674,1043,28"
shape="circle"
/>
</map>
</body>
</html>'html & css > 개념' 카테고리의 다른 글
| CSS란 (0) | 2023.07.03 |
|---|---|
| semantic tag (0) | 2023.07.02 |
| 비디오와 오디오 (0) | 2023.07.02 |
| iframe (0) | 2023.07.02 |
| form 태그 (0) | 2023.06.19 |
