WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
HTML5 / Canvas

HTML5 canvas Image Mapper

— 추가 기능 WorldWideScripts.net 에

@ko1wws최신 상태로 유지 하기 위해 우리의 피드를 구독!

새로운! 당신이 그것을 원하는대로 우리를 따르라!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

웹 개발자를 위해 설계 HTML 이미지 매핑입니다.

이 도구는 HTML5 캔버스를 사용하여 개발 된, 그래서 그것의 사용은 캔버스를 지원하는 브라우저로 제한됩니다뿐만 아니라, 파일 API의 :

IE10 +, FF3.6 +, FF14-, FF18 + (FF15가 FF18에서 해결 될 것입니다 일부 캔버스 기능, 버그 787623, 문제가), Chrome6 +, Safari6 +, Opera11.1 +

이 개발자를위한 도구이기 때문에 나는 웹 개발자가 적절한 브라우저를 선택하는 아무 문제가 없다고 생각하기 때문에, 나는이 큰 제한이 아니라고 생각.

I는 공구를 개발하기 위해 사용 FF14, 그래서 이것은 최선의 choise이지만, 툴 및 Chrome22 Opera12 또한 테스트되었고


참고 : 실시간 미리보기 링크에서 볼 수있는 도구의 버전이 도구의 제한된 버전입니다. 이 버전 만 홈 페이지에있는 이미지의 특정 세트를로드 할 수 있습니다. 이미지를로드 한 후 모든 도형을 그릴 수 있지만, 제 6 형태는 HTML 코드를 생성한다. 이 제한은이 도구의 모든 기능을 테스트하는 것을 금지하지 않습니다.


이미지 맵은 무엇인가?

이미지 맵 이미지의 사용자 클릭 가능한 다른 영역을 만드는 HTML 코드이다. HTML 코드는 직사각형, 다각형 및 원형 모양으로 영역을 정의 할 수 있습니다 영역 태그와 함께,지도 HTML 태그로 구성되어 있습니다.
당신이 당신의 HTML 페이지에 image1.png 이미지가있는 경우 예를 들어, 다음과 같은 코드를 작성할 수 있습니다 :

 <img src="image1.png" width="145" height="126" alt="map example" usemap="#image1map" /> <map name="image1map"> <area shape="rect" coords="0,0,82,126" href="area1.html" alt="area1"> <area shape="poly" coords="108, 145, 174, 71, 205, 139, 153, 192" href="area2.html" alt="area2"> <area shape="circle" coords="124,58,8" href="area3.html" alt="area3"> <area shape="default" href="http://default.html" alt = "the whole image"/> </map> 

당신이 볼 수 있듯이, 당신은지도 태그의 이름 속성과 동일한 값을가집니다 IMG 태그의 usemap 속성을 설정해야합니다. 당신이 원하는대로 <지도>와 </지도> 사이에 당신은, 관련 이미지를 사용자가 클릭 할 수있는 영역을 나타내는 하나 하나 많은 <지역> 태그를 정의 할 수 있습니다. RECT, 폴리 : 각 영역은 3 값 중 하나를 가질 수있는 모양 속성을 가지고 있어야합니다. RECT 형상이 완전히 두 포인트에 의해 정의되고, 폴리 형상은 점 시퀀​​스에 의해 정의되고, 원 형상을 나타내는 중심 포인트 및 반경에 의해 규정된다. 모든 점 좌표의 몇 가지로 정의하고, 이미지의 왼쪽 상단 모서리에 친척, 픽셀 단위로 표현했다. 형상 특성도없는 기존의 어떤 형태로 매핑 된 이미지의 부분을 참조 "기본"값을 가질 수있다. 모양이 맵에 정의 된 순서가 매우 중요하다는 것을, 대신, 고려 : 당신은지도에 처음 모양으로 "기본"모양을 정의하는 경우, 그것은, 이후의 모든 형태를 무시합니다 "기본"때문에 모양은 전체 이미지를 의미한다. 당신이 더 큰 모양으로 약간의 모양을 정의 할 수 있습니다,하지만 당신은 더 큰 하나를 먼저 작은 모양을 정의해야하고이 서로 겹치는 모양으로도 마찬가지입니다. 2 형상이 화상의 일부를 공유하는 경우, 첫 번째로 정의 된 형상이 이긴다.

수동으로 이미지 맵을 설정하려는 경우에는 다른 모양을 정의하는 데 필요한 모든 지점의 좌표를 알아야합니다. 아마 이것은 당신이 원형 또는 사각형 영역을 가지고, 특히, 당신이지도하는 몇 가지 영역이있는 경우 큰 문제가되지 않습니다. 하지만 당신은 다각형 모양으로, 여러 영역이있는 경우, 수동으로 설정하는 것은 간단한 일이 아니다.

이미지 매핑 도구를 사용하면 이미지 사용자가 클릭 할의 영역을 만들어 해당 HTML 코드를 자동으로 변환됩니다 같은 선택한 이미지에 RECT, 폴리, 동그라미 등 도형을 그릴 수 있습니다.

지정된 이미지의 모양을 그린 후, 당신은 단순히 버튼을 클릭하면 HTML 코드를 생성 할 수 있으며, 코드는 텍스트 영역에 displayied됩니다. 당신은 HTML 코드를 복사하여 HTML 페이지 (들)에서 사용할 수 있습니다. 당신은 역 과정을 수행 할 수도 있습니다 : 텍스트 영역에서 HTML 코드를 붙여 넣기하면,이 코드는 단순히 버튼을 클릭로드 할 수 있습니다; 이는 이미지의 형태로 변환 될 것이고, 그들을 수정 새로운 형상을 추가 HTML 코드를 다시 생성 할 수있다. 이 역 메커니즘은 일부 매핑 프로세스를 저장하고 나중에 이미지를 매핑을 계속 할 수 있도록하는 데 유용합니다. 텍스트 영역에서 코드를 생성 한 후, 당신은 즉석에서 텍스트 영역의 좌표를 수정하고 그것을 다시로드 : 그것은 "수동"형상 설계 / 위치 수정하는 데 유용합니다.

주요 특징:

  • 당신은 로컬 또는 원격 이미지를 선택할 수 있습니다
  • 사용자는 대상 화상의 크기를 설정할 수있다 :이 이미지가 HTML 페이지에있을 것이라는 점이다 크기
  • 당신과 어떤 순간에 이미지를 확대하거나 축소 할 수 있으며 이것은 단지 이미지의 대상 크기에 따라 생성 될 실제 좌표, 방해하지 않습니다. 줌 기능을 사용하면 모양을 그리는 데 도움에만 유용합니다.
  • 당신은 "HREF"속성, "ALT"속성, "ID"와 "클래스"속성 그리고 마지막으로 "대상"속성으로 각 모양에 대한 몇 가지 매개 변수를 설정할 수 있습니다. 당신이 모양을 선택해야하는 매개 변수를 설정하려면 도구 모음에서 왼쪽 상단 화살표를 선택하고 모양을 클릭해야 할 모양을 선택합니다.
  • 지도 "이름", 기본 URL과 목표 : 당신은지도에 대한 몇 가지 매개 변수를 설정할 수 있습니다.
  • 당신은 도구 모음에서 모양을 선택하는 모양을 그릴 수 있습니다.
  • 도구 모음에서 선택 후, 모양을 그리려면, 당신은 단순히 당신이 모양을 시작하고자하는 이미지에 마우스로 클릭 할 수 있습니다.
  • 형상이 원형 인 경우, firts 포인트 중심 (클릭 또는 해제), 마우스 이동, 커서를 따라 원을 볼 수있다. 다시 마우스를 클릭하면 원을 그리기가 중단됩니다.
  • 형상 RECT 인 경우. 첫 번째 점은 코너 중 하나입니다. (클릭 또는 해제) 마우스를 이동하면 RECT를 그릴 것입니다. 다시 마우스를 클릭하면 그림이 중지됩니다.
  • 모양이 폴리 인 경우 프로세스가 약간 다릅니다 : 점을 설정합니다 마우스 클릭 할 때마다; 현재 위치는 항상 항상 폴리 닫힌 모양을, 전나무 하나와 연결되어, 폴리을 그릴 중지 마우스를 더블 클릭해야합니다 (마지막 점을 설정합니다).
  • 모든 형태의 경우 당신은 또한 그들이 "중지"버튼 (도구 모음의 왼쪽 상단 화살표)를 클릭 그릴 중지 할 수 있습니다.
  • 당신은 이미지를 이동하면 마우스 좌표를 볼 수 있습니다.
  • 당신이 국경을 사용할 수 있도록 이미지의 일부로서 당신은 이미지의 가장자리 좌표를 결정하기 위해 이미지 주변의 회색 점선 테두리를 사용할 수 있습니다 : 그래서, 당신은 모양 그리기 동안 국경을 클릭하면, 강행 그것을로 이미지의 일부였다. 당신은 테두리의 왼쪽 상단 모서리를 클릭하면 예를 들어, 당신이에 점 설정합니다 (0, 0) 좌표. 당신이 왼쪽 테두리를 클릭하면, 어떤 점에서, 당신은 등, 좌표 (0, y)에 점을 설정합니다
  • 당신은 그것을 삭제 / 크기 조정 / 이미 그려진 도형을 선택하고 수정할 수 있습니다. 그것을 제거하려면 당신은 거절 연필 만 모양을 선택으로 표시됩니다 도구 모음에서 "고무"를 사용해야합니다.
  • 당신은 (이 디자인 도구가 아닙니다, 그래서 색의 수를 제한하고 또한 각 모양에 대해 다른 색상을 선택할 수 없습니다) 5 색 세트에서 모양의 형상의 색상을 선택할 수 있습니다.
  • 당신은 이미지에 그려진 어떤 형상을 갖는 경우 텍스트 영역에서 HTML 코드를 볼 수 있습니다 : 당신은 당신이 도구 모음에서 "중지"버튼을 선택하고 어떤 모양이 선택하지 않은 경우에만 그 표시, "지도"버튼을 클릭 할 수 있습니다 아직 모양을 그려하지 않은 경우는 빈 텍스트 영역을 볼 수 있지만, 당신은 몇 가지 HTML 코드를 과거 수 있고로드합니다.
  • (당신은 "지도"버튼을 클릭 한 후 볼 수있는) "로드"버튼을 클릭, 텍스트 영역에서 HTML 코드의 존재는 이미지 형태로 변환됩니다.

당신은 다음 링크에서 도구의 전체 설명서를 참조 할 수 있습니다 : 온라인 매뉴얼

당신은 질문이있는 경우, 다만 코멘트를 남기거나 저에게 이메일을 드롭!


다운로드 할 수 있습니다
해당 카테고리의 다른 구성 요소이 작성자 의 모든 구성 요소
의견자주하는 질문과 답변 을 요구했다

속성을 선택합니다

생성:
10 10월 12일

마지막 업데이트:
N / A

높은 해상도:
아니

지원되는 브라우저:
파이어 폭스, 오페라, 크롬

파일 포함:
자바 스크립트 JS, HTML, CSS

소프트웨어 버전:
HTML5

키워드

전자 상거래, 전자 상거래, 모든 상품, 응용 프로그램, 지역, 캔버스, 원, 좌표의, HTML5, 영상, 지도, 매퍼, 폴리, RECT, 모양, 목표, 수단, 줌