미궁게임 더라비린스
슨아 미궁 제작팁 2021-02-12 04:43:45

최종수정 2021-02-12 04:53:25

 

이미지에서 특정 영역을 클릭시키고 행동 연결하기



 





 


















































































강좌에 사용된 이미지 좌표 찾는 사이트














































다각형 선택 영역이 클릭이 어떻게 되는지 궁금하시다면
직접 위 그림의 선글라스를 눌러서 확인해보세요!

































<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('정답'); 등





(이미지에서는 클릭하면 더 라비린스 사이트가 열리게끔 예시로 적어놨습니다)




















--------------------------------------------------------------------------------------------



<예시로 사용한 연습용 이미지>
우클릭 -> 이미지 주소 복사 해서 연습용으로 사용해보세요!

+

* 참고로 저는 이 분야(?)의 고수가 아니며
제가 제작 할 때 사용했던 나름의 팁을 적은 것이므로
제가 올린 글에 오류?가 있다면 죄송합니당;ㅅ;

또한 질문은 댓글로 편하게 달아주시면
아는 부분에 한해서 답변 달아드리도록 하겠습니다

긴 글 읽어주셔서 감사합니다! *

 
  • 가입일 2015-01-13
  • 남기고 싶은 말

    미궁 접었습니다.. 개인 쪽지는
    답변이 없거나 확인이 늦을 수 있습니다..

댓글

Hyeyoon 2021-02-12 04:50 _
0
정성추 잘 읽었습니다.
츄얼리 2021-02-12 06:10 _
0
와 드디어! 클릭강의!
댓글로 추가 팁을 드릴게요
map과 area로 만든 영역은 기본적으로 tab키를 통해 포커스가 돼요!

지금 한번 tab키를 연타해서 만화 속의 버튼을 포커스 시켜보세요!
최신 크롬 기준 검은색 테두리가 나타나요!

그런데 버튼을 tab키를 통해 못 찾게 하고 싶거나 검은 테두리가 클릭 시에도 나타나기 때문에 디자인적으로 별로이실 수 있죠

그러시다면 <area... >안에 tabindex = “-1”을 넣어주세요!

그렇게 하고 나시면 이제 아무리 tab키를 눌러도 검은 테두리가 안 생깁니다.
짱이죠?
꿀먹은용도르 2021-02-12 08:59 _
0
와 캐쿨팁!!!!
폭스 2021-02-12 11:03 _
0
#이 글을 국회로
qkfkdmr 2021-02-12 11:04 _
0
한문제 추가
Katetel 2021-02-13 00:29 _
0
너무나도 끝내주는 팁입니다 !! 도움이 많이 됐습니다 !!!
슨아 2021-02-13 18:38 _
0
츄얼리님 댓글 너무나도 꿀팁입니다 감사해유!
태욱 2021-03-10 04:57 _
0
나무화분 2021-04-07 09:02 _
0
예전에 슨아님 미궁 소스 파헤치면서 문제 하나 만들었던게 기억나네요! 지금은 사라진 문제지만... 그 문제 공 많이 들였어요 ㅎㅎ html공부는 덤!
네잎클로버 2021-05-28 10:34 _
0
감사합니다 :D
프로댓글러 2021-06-12 10:46 _
0
저 같은 초보 제작자에게 도움이 되는 게시글이네요 감사합니다
령매 2021-06-15 02:09 _
0
저 같은 초보 제작자에게 도움이 되는 게시글이네요 감사합니다.
태훈쓰 2022-09-29 02:00 _
0
이거 이제 안되나요? ㅠㅠ 다 잘되는데 javascript부분이 안돼요...
제목 작성자 작성일자 추천
[공지사항] [필독]미궁게임을 즐기는 방법(처음 오신분들은 꼭 한번 읽어주세요) (14)

푸엘라 2019-09-27 21:52:48 | 추천 15

푸엘라 2019-09-27 15
[공지사항] 더라비린스 운영과 개선에 관하여 (14)

푸에르 2023-11-22 17:47:23 | 추천 28

푸에르 2023-11-22 28
[공지사항] 더라비린스 개편 보고 (16)

푸에르 2024-03-20 02:42:49 | 추천 26

푸에르 2024-03-20 26
아직 열람할 수 없는 글입니다. 08:47:51 0
아직 열람할 수 없는 글입니다. 03:40:52 0
아직 열람할 수 없는 글입니다. 03:13:28 0
아직 열람할 수 없는 글입니다. 01:12:46 4
아직 열람할 수 없는 글입니다. 01:05:09 0
아직 열람할 수 없는 글입니다. 2024-07-13 0
아직 열람할 수 없는 글입니다. 2024-07-13 0
아직 열람할 수 없는 글입니다. 2024-07-13 0
[미궁 질문] 질문글 보기 (1)

고살이 2024-07-13 11:54:46 | 추천 3

고살이 2024-07-13 3
아직 열람할 수 없는 글입니다. 2024-07-13 0
아직 열람할 수 없는 글입니다. 2024-07-13 0
아직 열람할 수 없는 글입니다. 2024-07-13 0
아직 열람할 수 없는 글입니다. 2024-07-13 0
아직 열람할 수 없는 글입니다. 2024-07-12 0
아직 열람할 수 없는 글입니다. 2024-07-12 0
아직 열람할 수 없는 글입니다. 2024-07-12 0
아직 열람할 수 없는 글입니다. 2024-07-12 0
아직 열람할 수 없는 글입니다. 2024-07-12 0
[MINIATURE] 도움주실분 계신가요? (2)

코난의후예 2024-07-12 13:12:03 | 추천 0

코난의후예 2024-07-12 0
아직 열람할 수 없는 글입니다. 2024-07-12 0