์ด๋ฏธ์ง ๋งต ๋ง๋ค๊ธฐ(์ด๋ฏธ์ง ๋งต ์ขํ๊ฐ ์ฝ๊ฒ ์ฐพ๊ธฐ)
์ด๋ฏธ์ง ๋งต์ ํ๋์ ์ด๋ฏธ์ง์ ์ฌ๋ฌ ๊ฐ์ ๋งํฌ๋ฅผ ๊ฑธ์ ์์ด์.
์ฌ๊ธฐ์์ usemap์ ๋งต์ด๋ฆ๊ณผ map ํ๊ทธ์์ name์ ๋งต์ด๋ฆ์ ๋์ผํด์ผ ํฉ๋๋ค.
<img src="์ด๋ฏธ์ง ํ์ผ๋ช
" alt="๋์ฒด ํ
์คํธ" usemap="#๋งต์ด๋ฆ">
<map id="๋งต์ด๋ฆ" name="๋งต์ด๋ฆ">
<area shape="rect" coords="๋งต์ขํ" href="url" alt="๋์ฒด ํ
์คํธ" title="ํ์ดํ">
</map>
area shape ๋งต ๋ชจ์
area shapge ๋งต๋ชจ์์ 3๊ฐ์ง์
๋๋ค.
์ด ์ธ ๊ฐ์ง์ด๋ฉด ๋ฌด์์ด๋ ์ง ๋ชจ์์ ๋ง๋ค์ด ๋งํฌํ ์ ์์ต๋๋ค.
- rect ์ฌ๊ฐํ
- circle ์
- poly ๋ค๊ฐํ
์ฌ๊ฐํ ๋งต
<area shape="rect" coords="์ข์ธก์๋จ ๊ผญ์ง์ x,y ์ขํ๊ฐ๊ณผ ์ฐ์ธกํ๋จ x, y ์ขํ๊ฐ" href="url" alt="๋์ฒด ํ
์คํธ">
์๋ชจ์ ๋งต
<area shape="circle" coords="์์ค์ฌ์ X,Y ์ขํ๊ฐ๊ณผ ์์ ๋ฐ์ง๋ฆ" href="url" alt="๋์ฒด ํ
์คํธ">
๋ค๊ฐํ ๋งต
<area shape="poly" coords="๊ฐ ๊ผญ์ง์ ์ X, Y ์ขํ๊ฐ" href="url" alt="๋์ฒด ํ
์คํธ">
์ขํ๊ฐ์ ํ ๋ฐฉํฅ์ผ๋ก ์ ๋ ฅํด์ผ ํฉ๋๋ค.
ํ๊ฐ๋ฆฌ์ง ์๊ฒ ์๊ณ๋ฐฉํฅ์ผ๋ก ์ขํ๊ฐ์ ์ ๋ ฅํ์ธ์.
์ด ์ขํ๊ฐ๋ค์ ์๊ธฐ ์ํด์๋ ํฌํ ์ต์์ ์ด๋ฏธ์ง๋ฅผ ๋ถ๋ฌ์์ ๊ผญ์ง์ ์ ์ปค์๋ฅผ ๋๋ฉด ์ขํ๊ฐ์ด ๋ํ๋ฉ๋๋ค.
๊ทธ๋ฌ๋ ์ด ๋ฐฉ๋ฒ์ ์๊ฐ์ด ๊ฑธ๋ฆฌ๋ฏ๋ก ์ฝ๊ฒ ์ขํ๊ฐ์ ์ ์ ์๋ ์ฌ์ดํธ๋ฅผ ์ด์ฉํ๋ฉด ํธํฉ๋๋ค.
์ด๋ฏธ์ง ๋งต ์ขํ๊ฐ ์ฝ๊ฒ ์๊ธฐ
์ ๊ฐ ์ฒ์ ์ฌ์ฉํด๋ณธ ์ฌ์ดํธ์์.
์ฌ์ดํธ๊ฐ ์ข ๋ต๋ตํด๋ณด์ด์ง๋ง ๋จ์ํด์ ์ฐ๊ธฐ ํธํด์.
http://maschek.hu/imagemap/imgmap/
์ขํ๊ฐ์ ์ป์ ์ด๋ฏธ์ง๋ฅผ [ํ์ผ์ ํ]ํด [upload] ํด์ค๋๋ค.
[accept]๋ฅผ ํด๋ฆญํด์ผ ์ ๋นจ๊ฐ์ ๋ค๋ชจ๋ ์์ญ์ ๋ํ๋ฉ๋๋ค.
์ด๋ ๊ฒ ๋ํ๋ฉ๋๋ค.
์ด 4๊ฐ์ ์์ด์ฝ ์์ญ์ ์ด๋ฏธ์ง๋งต์ ์ ์ฉํ๋๋ฐ์,์ฒซ๋ฒ์งธ ์ด๋ฏธ์ง๋งต ์ฝ๋๋ฅผ ๋ฃ์ ์ ์๋ ์นธ์ด ๋ณด์ ๋๋ค.
ํ๋์์ผ๋ก ๋ผ๋์ค๋ฒํผ์ด ์ ํ๋์ด ์๋๋ฐ์.
์ฌ๊ธฐ์์ ๋ง์ฐ์ค๋ก ๋ค๋ชจ๋ ๋ชจ์์ ์ด๋ฏธ์ง๋งต์ ๊ทธ๋ ค์ฃผ๋ฉด ์์ฑ๋ฉ๋๋ค.
๊ผญ์ง์ ์ ์ฐ์ด์ ๋ง์ง๋ง ๊ผญ์ง์ ์ ๋ค์ํ๋ฒ ์ฝ ์ฐ์ด์ฃผ๋ฉด ์ฌ๊ฐํ๋งต์ด ๊ทธ๋ ค์ง๋๋ค.
๊ทธ ๋ค์ ์์ด์ฝ์ผ๋ก ๊ฑด๋๊ฐ์ ๋ ์ฌ๊ฐํ ๋งต์ ๋ง๋ค์ด ์ค๋๋ค.
๊ทธ๋ฌ๋ฉด Coords ์ ์ขํ๊ฐ์ด ๋ํ๋ฉ๋๋ค.
Href ์นธ์๋ ๋งํฌํ url์ ์ ๋ ฅํด์ฃผ๊ณ
Alt ๋์ฒด ํ ์คํธ
Target ํ๊ฒ๋ฃ์ด์ฃผ์ธ์.
์์ค๋ฅผ ๋ณต์ฌํ๋ ค๋ฉด Satus ๋ฐ์ ์๋ Code๋ฅผ ํด๋ฆญํ๋ฉด ๋ฉ๋๋ค.
(Paypal ํด๋ฆญํ์ง ๋ง์๊ตฌ์....)
Code ๋ฅผ ๋ณต์ฌํด์ ์ ์ฉํ๋ฉด ๋ฉ๋๋ค.
์ฌ๊ธฐ์์ id์ name์ ์ด๋ฆ๋ง ๋ฐ๊ฟ์ ๋ฃ์ด์ฃผ์๋ฉด ๋ฉ๋๋ค.
์ด๋ฏธ์ง๋งต ์ ์ฉํ ํ๊ทธ ๋ฃ์ด์ฃผ์ธ์.
์์ ์ถ๊ฐํ๊ธฐ => <img src="์ด๋ฏธ์งํ์ผ๋ช " usemap="#imgmap2021616222951" alt="">
<img src="์ด๋ฏธ์งํ์ผ๋ช
" usemap="#imgmap2021616222951" alt="">
<map id="imgmap2021616222951" name="imgmap2021616222951">
<area shape="rect" alt="" title="" coords="56,121,178,257" href="" target="" />
<area shape="rect" alt="" title="" coords="211,116,332,252" href="" target="" />
<area shape="rect" alt="" title="" coords="364,111,477,251" href="" target="" />
<area shape="rect" alt="" title="" coords="507,110,641,253" href="" target="" />
<!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) -->
</map>
ํจ๊ป ๋ณด๋ฉด ์ข์ ๊ธ
'HTML&CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
before after css ๊ฐ์์์ ์ ํ์ (0) | 2021.11.19 |
---|---|
๋ฐ์ํ ๋ฐฑ๊ทธ๋ผ์ด๋ ์ด๋ฏธ์ง ๋ง๋ค๊ธฐ (0) | 2021.11.18 |
๋ฌด๋ฃ ์์ด์ฝ ์ฌ์ดํธ - BEST 8๊ฐ ์ฌ์ดํธ๐ (0) | 2021.06.08 |
์ ํ๋ธ ๋์์ ์๋์คํ ์์ค (0) | 2020.11.27 |
๋ชฉ๋ก ํ๊ทธ <ul>, <ol>, <li> ํ๊ทธ (0) | 2020.10.31 |