html / 이미지맵 좌표 설정하는 방법

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Design workroom

html / 이미지맵 좌표 설정하는 방법 본문

웹아이디어

html / 이미지맵 좌표 설정하는 방법

Leenahee 2021. 6. 16. 18:38

이미지맵은

html 태그 배울 때

아주 신기했던 기능인데요~~

이게 요즘에도

네이버 블로그나

홈페이지 등에 쓰이기도 합니다.

이미지와 좌표 준비하기

일단 이미지를 준비합니다.

포토샵으로 고고~~

위와 같은 이미지를 준비합니다~

3개의 링크가 들어가야 되겠죠~

이미지 상에서

3개의 링크가 들어갈 위치를

좌표로 잡아줄 거에요~

사실 좌표 알아내는 건

아주 간단한데요~

그 전에 기본 세팅이 필요합니다.

저는 한글 포토샵이 깔려 있어요~

상단 메뉴에서 창-정보를 클릭해

정보창을 켜 줍니다.

영어 포토샵에선 windows - info를 클릭하심 되세요~

정보창을 띄워 놓아야

이미지 상의 좌표에

마우스를 올려 놓았을 때 보여질

좌표를 볼 수가 있어요~

그리고 이미지의 좌표는

위쪽은 좌상단,

아래쪽은 우하단의

포인트만 잡아주면(빨간색는 마우스 포인트)

위의 이미지처럼 검정색 사각형을 커버하는

링크가 먹히는 링크존이 형성됩니다.

위 이미지는

좌상단의 좌표를 마우스 오버했을 때

정보창에 x, y 좌표가 뜨는 화면입니다~

x는 234, y는 149이죠~

이렇게 링크가 생겨할 부분에

좌상단, 우하단 좌표를 모두 기록해 둡니다.

링크될 주소 준비

그리고 태그 작성

이미지와 좌표가 다 준비되었다면

이미지맵을 만들기 위해

태그를 써주면 끝납니다.

html 태그 형식은 아래와 같습니다.

<img src="이미지 경로" usemap="#이미지맵 이름">
<map name="이미지맵 이름">
<area shape="rect" coords="좌표" href="링크주소" target="_blank">
</map>

여기에서 주의할 점 한가지!!

이미지맵 이름을 설정해줄 땐 꼭 #을 붙이고

map 안에선 #을 뺀 이름만 써넣는다는 거~~

아래처럼 쓰면 됩니다~

<img src="https://ifh.cc/g/OwSkmc.png" usemap="#sns" />
<map name="sns">
<area shape="rect" coords="0,30,33,68" href="http://pf.kakao.com" target="_blank">
<area shape="rect" coords="30,30,70,68" href="https://www.instagram.com" target="_blank">
<area shape="rect" coords="70,30,107,68" href="http://youtube.com" target="_blank">
</map>

맵 좌표를 주륵주륵 적는게 보기 싫다면

좌표부분만 따로 분리해 놓아도

됩니다.

<body></body> 이 사이에만 존재하면

맵이름으로 다 연동이 되기 때문~~

사용예

http://selina.kr/

좌상단의 간단한 sns 링크입니다~

저작자표시 비영리

'웹아이디어' 카테고리의 다른 글

나 모르게 생길 수도 있는 빚은 명의도용방지로 해결! (0)	2023.06.19
네이버 블로그에서 이미지 주소 만들어 사용하기 (0)	2023.05.19
무료 이미지 호스팅/이미지 주소 만들기/이미지맵 등 간단하게 이미지의 주소가 필요할 때 (0)	2020.09.28
중국 구매대행, 해외직구에 좋은 네이버 웨일의 이미지 번역 기능! (0)	2020.04.22
무료 이미지호스팅 사이트 추천/이미지 링크 주소 만드는 간단한 방법 (0)	2020.03.29