강좌에 사용된 이미지 좌표 찾는 사이트
다각형 선택 영역이 클릭이 어떻게 되는지 궁금하시다면
직접 위 그림의 선글라스를 눌러서 확인해보세요!
<img src="/labyrinth/upload/quest/630/1612968437001/13.png" usemap="#site">
<map name="site"><area target="_blank" alt="" href="https://www.image-map.net/"
coords="207,215,446,303" shape="rect">
(실제 사용된 태그는 위와 같습니다! 복사해서 테스트용으로 사용해보세요!)
저는 지도명에 #site를 썼으므로 map name에는 site를 입력해줬어요!
alt="여기"에는 그림에 마우스를 올려놓고 있을 때
띄우고 싶은 메세지를 보통 적습니다.
그림에 대한 설명이나 숨은 트릭용으로 사용할 수 있습니다.
사용을 원치 않을 때는 위의 예시처럼 그냥 비워두면 됩니다!
클릭 시 특정 사이트(URL)주소로 이동 : href=“위의 예시처럼 URL입력”
클릭 시 다음 페이지로 이동 : href="javascript:goNextPage('정답');"
클릭 시 특정 문제로 이동 : href="javascript:goPage('문제번호');"
저는 클릭 이미지를 사각형 영역으로 정했기 때문에
shape에 rect를 입력했습니다!
<img src="이미지URL" usemap="#지도명">
<map name="지도명"> <area target="_blank" alt="" href="연결할 행동" coords="좌표" shape="모양">
Link에는 href="여기"에 들어갈 내용을 적으면 됩니다!
ex) javascript:goNextPage('정답'); 등
(이미지에서는 클릭하면 더 라비린스 사이트가 열리게끔 예시로 적어놨습니다)
--------------------------------------------------------------------------------------------
<예시로 사용한 연습용 이미지>
우클릭 -> 이미지 주소 복사 해서 연습용으로 사용해보세요!
+
* 참고로 저는 이 분야(?)의 고수가 아니며
제가 제작 할 때 사용했던 나름의 팁을 적은 것이므로
제가 올린 글에 오류?가 있다면 죄송합니당;ㅅ;
또한 질문은 댓글로 편하게 달아주시면
아는 부분에 한해서 답변 달아드리도록 하겠습니다
긴 글 읽어주셔서 감사합니다! *
전체미궁
