ImageMapEdit 방법
ImageMapEdit은 빠르고 쉽게 ImageMaps를 만들 수 있는 수단입니다.
이 설명서는 누구를 위한 것인가요?
다음의 내용이 여러분에게 유용할 수 있습니다...
- 이미지맵이 무엇인지 알고 싶습니다.
- 여러분은 이미 미디어위키에 대해 어느 정도 알고 계시고, 이제 ImageMaps를 사용하고 싶어합니다.
- ImageMapEdit을 설정하고 싶습니다.
- ImageMaps를 생성하고 편집하는 방법을 배우고 싶습니다.
이 방법 설명에서는 이미 위키에 이미지를 업로드했고, 해당 이미지의 파일 설명 페이지를 보고 있다고 가정합니다.
이미지 맵이란 무엇인가요?
이미지맵은 단일 이미지의 여러 부분을 링크로 만들고 싶을 때 사용됩니다. 아이디어는 마우스로 클릭할 수 있는 이미지의 "핫존"을 표시하는 것입니다.
- 이 페이지에는 여러 개의 이미지 맵이 있습니다.
왜 필요한가요?
예시:
- 버튼이 있는 제어판 사진이 있다면 이미지맵을 사용하여 실제로 버튼을 누를 수 있게 만들 수 있습니다. 예를 들어 프린터 설명서에 유용할 수 있습니다. 버튼을 클릭하면 설명서의 페이지로 연결될 수 있습니다. 또는 버튼을 누르면 새로운 사진으로 연결되어 버튼을 누를 때의 결과를 보여줄 수도 있습니다. 또는 둘 다 할 수도 있습니다!
- 도식이 있는 경우 도식의 다양한 모서리(선)와 노드(상자)를 클릭 가능하게 만들 수 있습니다. 이를 사용하여 프로세스의 단계에 대한 자세한 설명을 추가할 수 있습니다.
- 청사진에서는 이런 방식으로 청사진의 더 자세한 하위 구성 요소에 대한 액세스를 허용할 수 있습니다.
- 여러 사람이 모여 있는 사진이 있다면 사용자가 각 사람에 대한 정보를 클릭해서 볼 수 있도록 할 수 있습니다.
- 기계나 구성품 세트의 사진에서 청사진, 각 구성품의 상세 사진, 설명, 사양 등에 대한 링크를 제공할 수 있습니다.
- 건물에 있는 여러 방의 사진을 찍고 각 방의 문을 클릭 가능하게 만들 수 있습니다. 문 중 하나를 클릭하면 사용자를 다음 방으로 "이동"시킬 수 있습니다. 이를 사용하여 가이드 투어를 만들 수 있습니다.
- ...
- 이미지맵의 응용 분야는 다양합니다. 어떤 사진과도 사용할 수 있으므로 시스템은 매우 유연합니다. 상상력을 발휘하세요!
ImageMapEdit을 사용하는 이유는?
위키에 ImageMaps를 넣는 것은 약간 까다롭고 약간의 작업이 필요합니다. ImageMapEdit은 프로세스의 많은 부분을 자동화하고 단순화합니다.
설정
먼저, 무언가를 설정해야 하는지 알아보세요. 일부 프로젝트는 "File:" 이름공간의 페이지에 있을 때마다 imageMapEdit을 로드합니다. 이 경우 설정이 필요하지 않습니다.
둘째, imageMapEdit이 소도구로 나타나는지 확인합니다. 일부 프로젝트, 특히 공용은 이를 소도구로 제공합니다. 이 경우, "설정"은 이 소도구를 활성화하는 것입니다.
공용에 이 기능이 있다는 사실은 누구나, 적어도 무료 이미지의 경우에는 사용할 수 있다는 것을 의미합니다. 따라서 imageMapEdit을 설정하지 않더라도 공용 계정에서 이 소도구를 활성화하고 공용의 이미지 페이지로 가서 이미지맵을 생성하면 공용에 저장된 모든 이미지에 사용할 수 있습니다.
imageMapEdit 소도구를 제공하지 않는 프로젝트에 imageMapEdit을 추가하려면 해당 프로젝트의 common.js 페이지를 편집하면 됩니다("기본 설정 => 모양"에서 링크됨 - 빨간색 링크인 경우 생성). 그런 다음 다음 줄을 추가합니다.
mw.loader.load('//he.wikipedia.org/w/index.php?title=Mediawiki:Gadget-ime.js&action=raw&ctype=text/javascript');
미디어위키 코드를 사용하는 비위키미디어 위키에서는 위의 행을 "mediawiki:common.js" 페이지에 추가하거나, 스크립트(he:Mediawiki:Gadget-ime.js)를 자신의 위키 페이지에 복사하여 활성화할 수 있습니다.
이미지 페이지(즉, "파일:" 이름공간의 페이지)에서 사용하려면 이미지 아래에 표시되는 ImageMapEdit > 링크를 클릭하세요.
이미지맵 편집
이 방법의 이 부분은 이미 이미지를 위키에 업로드했고 해당 이미지의 파일 설명 페이지를 보고 있다고 가정합니다. 자세한 내용은 파일 업로드를 참조하세요(ImageMapEdit에서 생성된 위키코드를 사용하여 해당 문서의 위키코드를 대체합니다).
편집기 열기
이미지 페이지에서 이미지를 볼 때 이미지 바로 아래에 새 링크가 있습니다. 이 링크를 클릭하면 이미지맵 편집기가 나타납니다.
그림: 편집기
링크를 클릭하면 다음 이미지와 같이 imageMapEdit 입력 필드가 표시됩니다.
위의 이미지는 이미지 맵이며, 새로운 영역을 만들고, 기존 영역을 편집하고, 이 영역이 링크해야 할 문서를 입력하고, 마지막으로 생성된 위키코드 영역에서 이미지 맵을 복사하여 문서에 붙여넣을 수 있는 다양한 컨트롤을 보여줍니다. 위키코드 상자 위에는 "가져오기" 버튼이 있습니다.
핫존을 어디에 배치할지 결정하기
이미지맵을 사용하면 브라우저는 기본 이미지를 "볼" 수 없고, 입력하는 핫존 정보에 전적으로 의존합니다. 사실, 이론적으로는 이미지의 어디에나 "어떤" 모양의 핫존을 배치할 수 있지만, 이는 특별히 유용하지 않을 수 있습니다.
더 유용한 점은 일반적으로 클릭할 수 있는 이미지의 상당히 명확한 영역이 있다는 것입니다. 예를 들어, 스키마의 상자, 버튼 그림, 사람 등. 때때로 사람들이 클릭해야 할 곳을 더 명확하게 하기 위해 이미지를 조정하는 것이 유용할 수 있습니다.
새로운 지역 생성(핫존 그리기)
새 영역 만들기 목록 상자에서 원하는 모양을 클릭하여 (다음) 영역(핫 존)으로 지정합니다. 그런 다음 해당 모양에 대해 다음과 같이 진행합니다.
또는 "Edit Area" 목록 상자에서 선택하여 이전에 만든 영역을 수정하고, 예를 들어 직사각형의 모서리를 다른 지점에 배치하거나 원의 중심을 이동하는 등 편집을 계속할 수 있습니다. 폴리곤 정점을 재배치할 수 없으므로 기존 폴리곤을 편집하는 것은 마지막 클릭과 첫 번째 클릭 사이에 정점을 추가하여 "확장"하는 것으로 제한됩니다.
직사각형(각도)
이미지에서 만들고 싶은 직사각형의 한 모서리에서 "왼쪽" 마우스 버튼을 클릭합니다. 클릭한 지점에 작은 빨간색 십자가가 표시되어야 합니다. 그런 다음 반대쪽 모서리에서 오른쪽 마우스 버튼을 클릭합니다. 이제 전체 직사각형이 표시되어야 하며, 클릭한 두 지점은 빨간색과 노란색 십자가로 표시되어 있습니다.
언제든지 "영역" 목록 상자에서 이 사각형을 다시 선택하고 왼쪽 버튼(빨간색 십자가) 모서리, 오른쪽 버튼(노란색 십자가) 모서리, 또는 둘 다로 조정할 수 있습니다.
원
이미지에서 만들고 싶은 원의 "중앙"에서 "왼쪽" 마우스 버튼을 클릭합니다. 작은 빨간색 십자가가 중앙을 표시합니다. 다음으로, 원의 원주 어딘가에서 "오른쪽" 마우스 버튼을 클릭합니다. 이제 원 자체와 두 개의 "클릭"에 대한 표시가 보일 것입니다.
다각형
이미지에서 다각형의 첫 번째 지점에서 "왼쪽" 마우스 버튼을 클릭합니다. 이제 다각형의 각 모서리에서 "왼쪽" 마우스 버튼을 계속 클릭합니다. 언제든지 마지막 클릭은 다각형의 마지막 정점으로 간주되고 마지막 모서리는 이 정점을 첫 번째 정점에 연결합니다. 더 많은 점을 추가함에 따라 다각형은 점차적으로 구축됩니다.
편집 영역
핫존(구역)을 그린 후에는 핫존이 무엇과 연결되어 있는지 지정해야 합니다.
- 링크 대상: 사용자가 이 핫존(영역)을 클릭했을 때 어떤 위키 페이지로 이동해야 하는지 지정합니다.
- 링크 제목(선택 사항): 선택적으로 핫존에 대한 마우스오버 텍스트를 제공할 수 있습니다. 기본적으로 특정 마우스오버 텍스트를 제공하지 않으면 대신 "링크 대상"이 마우스오버 텍스트에 나타납니다.
다른 옵션은 핫존을 조정하거나 이미지맵에서 제거할 수 있도록 합니다.
지역 삭제
"영역 편집" 목록 상자에서 영역을 선택한 다음(선택한 영역이 이미지에서 강조 표시됨) "선택한 영역 삭제"를 선택하면 모든 영역을 삭제할 수 있습니다.
- 중요
- imageMapEdit은 "실행 취소"를 지원하지 않으므로 아무것도 삭제하기 전에 다음을 확인하십시오.
생성된 이미지맵을 페이지에서 사용하세요
마지막으로, 이미지맵을 만드는 작업이 끝났습니다. 이미지맵은 진공 상태에서 존재하지 않으며 페이지에 배치해야 합니다. 일반적으로 이미지맵은 이미지를 배치하는 것과 비슷한 방식으로 배치합니다. ImageMapEdit 도구가 우리를 위해 위키코드를 생성했으므로, 우리가 해야 할 일은 생성된 코드 상자에서 코드를 복사하여 관련 페이지에 붙여넣는 것뿐입니다.
이 예에서 일부 링크는 아직 채워지지 않았습니다. (일부 항목 뒤에 비어 있는 [[]]에 주목하세요.) 분명히 이미지맵을 게시하기 전에 모든 링크를 채워야 합니다.
기타 기능
일반적인 선호사항
- 이미지에 대한 설명을 제공할 수 있습니다(이는 대체 텍스트로만 사용됩니다).
- "
" 정보 링크를 이미지의 다른 모서리에 배치하거나 전혀 포함하지 않을 수도 있습니다.
위키코드에서 지역 가져오기
편집하고 싶은 기존 이미지맵이 있는 경우 어떻게든 액세스할 수 있어야 합니다. ImageMapEdit에 이미지맵(다시)을 가져오려면:
텍스트 상자 표시를 클릭하세요- 이미지맵의 위키코드를 상자에 붙여넣으세요.
가져오기를 클릭하세요
Q&A
질문: 제 위키코드가 사라졌는데, 어디로 갔나요?
어느 날 이미지맵을 만들어서 페이지에 저장하고 떠났다고 가정해 보겠습니다. 얼마 지나지 않아 상자를 잊었거나 이미지를 업데이트했거나 어쨌든 이미지맵을 다시 방문하고 싶어한다는 것을 알게 됩니다.
하지만 ImageMapEdit을 열면 코드가 없습니다! 어디로 갔을까요?
답변: ImageMapEdit은 위키에 완전히 통합되지 않았습니다. 위키코드를 생성하고 읽을 뿐입니다.
- 이미지맵을 넣은 페이지로 가서 '편집'을 클릭하세요.
- 이미지맵 코드를 선택하여 복사합니다.
- 그런 다음 해당 코드를 ImageMapEdit으로 다시 가져옵니다. 참조: 위키코드에서 영역 가져오기
질문: 페이지에 있는 이미지 크기를 여전히 조절할 수 있나요?
답변: 물론입니다!
이미지맵 코드에서는 일반 이미지에서 하는 것처럼 원하는 크기를 픽셀 단위로 추가하기만 하면 됩니다. 예를 들어:
File:ImageMap Creation.jpg|700px
질문: 페이지에서 이미지 크기를 조정했는데, 지금 이미지 맵을 다시 그려야 하나요?
위에 제공된 답변을 사용하여 이미지 크기를 조정한다고 가정하면, 맞춰서 이미지맵을 다시 그려야 합니까?
답변: 다행히도 아니요. 이미지맵은 이미지와 같은 양만큼 확장되고 그대로 사용할 수 있습니다.
같이 보기
- 이미지맵이 무엇인지에 대한 자세한 내용은 미디어위키 문서 위키의 설명서를 참조하세요.
- User:Dapete/ImageMapEdit (원 저자)