이미지맵 코드 생성 사이트
안녕하세요.
고코더 입니다.
이미지맵을 작성할때 머리가 비상한 분이면
이미지의 좌표를 바로 분석하고 코드를 기입하겠지만
보통은 프로그램이나 사이트의 도움을 받아
작성을 하는게 보통입니다.
그런데 프로그램은 귀찮고
사용해본 결과 이사이트가 가장
손쉽게 사용이 가능합니다.
▼ 이미지맵스는 "익스플로어"에서만 작동이 됩니다.
(크롬에서 작동이 안되요!!!)
이미지 URL을 입력하고
start Mapping을 입력 합니다.
▼해당 이미지가 맞다면
click to continue 를 클릭해주세요.
▼새로 생긴 창에서 마우스 오른쪽 버튼을 누르면
사이트 기능이 뜹니다.
우린 가장 많이 사용하는 네모 "create rect"를 클릭해보겠습니다.
▼그리고 나타난 범위를 원하는 크기만큼 늘립니다.
▼ 그 다음 옵션을 입력 합니다.
Map URL : href 값 링크 값 입니다.
그리고 나머지는 이미지 옵션 값
▼ Eventes는 이미지 이벤트를 만들수 있습니다.
Target : _blank 로 해보겠습니다.
▼ 다시 이미지에서 마우스 오른쪽 버튼을 클릭해
Get Code를 선택해보겠습니다.
▼ HTML Code를 선택하면
▼ 이렇게 HTML Code가 나옵니다.
▼ 저는 이렇게 홈페이지 위젯에 코드를 넣어서
반반 링크를 다르게 했습니다.
이미지맵이 필요한분은 해당 사이트에서
만들어 보세요.
이미지 관련 추천 글들
웹툴 - 이미지 사이즈를 단계 별로 줄여주는 썸네일 기능사이트 / picsmall.gocoder.net
사이트 - 사진,이미지 배경 지우는 site / remove.bg, burner.bonanza.com
웹툴 - 텍스트를 png 이미지로 바꿔주는 기능사이트 / text2png.gocoder.net
사이트 - 간단하게 이미지 합치기 / e.jjalbox.com
사이트 - 열화,깨짐,사이즈 변경 없이 이미지 용량 줄이기 / jpegmini.com
사이트 - AI(인공지능)을 이용한 이미지 화질 개선 / waifu2x.udp.jp
사이트 - PDF 파일을 이미지로 변환 / pdf2jpg.net
마무리
하나의 이미지에 여러개 링크를 달때
이미지맵 참 유용합니다.
'IT_Developers > HTML' 카테고리의 다른 글
| HTML - Div를 화면 중앙 가운데 반응형 노출 (1) | 2019.06.21 |
|---|---|
| CSS - Font Awesome 버전별 아이콘 확인하기 (1) | 2019.06.11 |
| 폰트- kopubdotum.css CDN URL 오류 (1) | 2019.03.21 |
| ASP - Ceil 함수 구현 / 문자열 입력시 오류 없게 (0) | 2019.03.18 |
| HTML - 사이트 특정 부분만 Iframe 으로 보이게 하기 (1) | 2019.03.12 |
댓글