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

— Add- On para WorldWideScripts.net

@es1wwsSuscríbete a nuestro RSS para estar al día!

¡Nuevo! Síguenos como quieras!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Este es un mapeo de imagen html diseñado para los desarrolladores web.

La herramienta se ha desarrollado utilizando el lienzo HTML5, por lo que su uso se limita a los navegadores que soportan el lienzo, sino también la API del archivo de:

IE10 +, FF3.6 +, FF14-, FF18 + (el FF15 tienen problemas con algunas funcionalidades de lona, ​​Bug 787.623, que serán resueltos en FF18), Chrome6 +, Safari6 +, Opera11.1 +

Como se trata de una herramienta para los desarrolladores, creo que esto no es una gran limitación, porque supongo que un desarrollador web no tiene ningún problema para elegir un navegador adecuado.

He utilizado FF14 para desarrollar la herramienta, por lo que esta es la mejor elección, pero la herramienta se ha probado también en Chrome22 y Opera12


Nota: La versión de la herramienta que se puede ver en el enlace Live Preview, es una versión limitada de la herramienta. Con esta versión sólo se puede cargar un conjunto específico de las imágenes, que aparece en la página principal. Después de cargar una imagen se puede extraer todas las formas, pero sólo los primeros 6 formas se generarán en el código HTML. Esta limitación no impide poner a prueba todas las funcionalidades de la herramienta.


¿Qué es un mapa de imagen?

Un mapa de imagen es un código HTML que hace que el usuario puede hacer clic en las diferentes áreas de una imagen. El código HTML que consiste en el mapa etiqueta HTML, junto con la etiqueta de zona, que le permite definir áreas con formas rectangulares, poligonales y circulares.
A modo de ejemplo, si usted tiene la imagen image1.png en su página HTML, puede escribir el siguiente código:

 <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> 

Como se puede ver, hay que establecer el atributo usemap en la etiqueta img, que tendrá el mismo valor del atributo de nombre en el mapa de etiquetas. Entre el <map> y </ map> se puede definir tantos <area> etiquetas como desee, cada uno representando un área de usuario puede hacer clic en la imagen asociada. Cada área debe tener un atributo de la forma, que puede tener uno de los 3 valores: rect, poli y del círculo. La forma rect está completamente definido en 2 puntos, una forma poli se define por una secuencia de puntos y una forma de círculo está definido por un punto, que representa el centro, y un radio. Todos los puntos se definen por un par de coordenadas, expresadas en píxeles, los familiares a la esquina superior izquierda de la imagen. El atributo de la forma también puede tener el valor "default", que se refieren a las partes de la imagen que no se asignaron con cualquiera de las formas anteriores. Tener en cuenta, en cambio, que el orden en que las formas se definen en el mapa es muy importante: si se define la forma "por defecto", como primera forma en el mapa, prevalecerá sobre todas las formas posteriores, debido a que el "default" forma se refiere a toda la imagen. Esto es cierto también con las formas que se superponen entre sí: puede definir un poco la forma en una forma más grande, pero hay que definir primero la pequeña forma y entonces el más grande. Si 2 formas comparten una porción de la imagen, la forma definida primero, gana.

Si desea configurar manualmente un mapa de imagen que tienes que saber las coordenadas de todos los puntos necesarios para definir las diferentes formas. Probablemente esto no es un gran problema si usted tiene pocas áreas para mapear, especialmente si usted tiene áreas circulares o rectangulares. Pero si usted tiene varias áreas, con una forma poligonal, ajuste manualmente no es una tarea sencilla.

La herramienta de imagen asignador le permite dibujar formas como rect, poli, y el círculo en la imagen seleccionada, que se traducen automáticamente en el código HTML correspondiente que hace que las áreas de la imagen de usuario puede hacer clic.

Después de dibujar las formas en la imagen dada, puede generar el código HTML simplemente haciendo clic en un botón y el código se le displayied en un área de texto. Puede copiar el código HTML y utilizarlo en su página (s) HTML. También se puede hacer el proceso inverso: pegar el código HTML en el área de texto, puede cargar el código sólo hacer clic en un botón; esto se traduce en las formas en la imagen y se puede modificar, añadir nuevas formas y volver a generar el código HTML. Este mecanismo inverso es útil para que pueda guardar un proceso de mapeo parcial y continuar para mapear la imagen más tarde. También es útil para refinar "manualmente" la forma de diseño / posicionamiento: después de generar el código en el área de texto, puede modificar las coordenadas en el área de texto sobre la marcha y volver a cargarlo.

Principales características:

  • Puedes seleccionar una imagen local o remoto
  • Puede configurar el tamaño de imagen de destino: estos son los tamaños que la imagen tendrá en su página HTML
  • Puede acercar y alejar la imagen en cualquier momento y esto no va a interferir con las coordenadas reales que se generarán, que depende sólo del tamaño de destino de la imagen. La función de zoom sólo es útil para ayudar a dibujar las formas.
  • Puede configurar varios parámetros para cada forma, como el atributo "href", el atributo "alt", el "id" y "clase" atributos y, finalmente, el atributo "target". Para establecer el parámetro tiene que seleccionar la forma: para seleccionar una forma que tienes que seleccionar la flecha de la parte superior izquierda de la barra de herramientas y luego haga clic en la forma.
  • Puede establecer algunos parámetros para el mapa: el mapa "nombre", la url por defecto y el objetivo.
  • Puede dibujar una forma de seleccionar la forma de una barra de herramientas.
  • Para dibujar una forma, después de seleccionar desde la barra de herramientas, sólo tiene que hacer clic con el ratón sobre la imagen, en la que desea comenzar la forma.
  • Si la forma es un círculo, el punto coquetea es el centro: mover el ratón (clic o liberada), se puede ver un círculo que sigue el cursor. Al hacer clic de nuevo el ratón deja de dibujar el círculo.
  • Si la forma es un rect. el primer punto es una de la esquina. Al mover el ratón (clic o liberado) dibujará un rect. Al hacer clic de nuevo el ratón dejará de dibujo.
  • Si la forma es un poli que el proceso es un poco diferente: cada clic del ratón establecerá un punto; el punto actual está siempre conectado con el abetos, haciendo que el poli siempre una forma cerrada; dejar de señalar a la poli (para ajustar el último punto) lo que tienes que hacer doble clic en el ratón.
  • Para todas las formas también se puede dejar de señalar a ellos al hacer clic en el botón "stop" (la flecha superior izquierda de la barra de herramientas).
  • Usted puede ver las coordenadas del ratón cuando lo mueve en la imagen.
  • Puede utilizar la frontera punteada de color gris alrededor de la imagen para determinar las coordenadas de los bordes de la imagen, para que pueda utilizar la frontera, ya que era parte de la imagen: así, usted puede hacer clic en la frontera durante el dibujo forma, jus, ya que fue parte de la imagen. Por ejemplo, si hace clic en la esquina superior izquierda de la frontera, establecerá un punto en (0, 0) coordenadas. Si hace clic en el borde izquierdo, en cualquier punto, establecerá un punto en el (0, y) las coordenadas, etc.
  • Puede seleccionar una forma ya dibujado y modificar / cambiar el tamaño / eliminarlo. Para quitarlo usted tiene que utilizar la "goma" en la barra de herramientas, que aparecerá como un lápiz rechazado solamente seleccionar una forma.
  • Usted puede seleccionar el color del contorno de las formas a partir de un conjunto de 5 colores (esto no es una herramienta de diseño, por lo que ha limitado el número de color y también no se puede elegir un color diferente para cada forma).
  • Puedes hacer click en el botón "mapa", es visible sólo cuando se selecciona el botón "stop" en la barra de herramientas y no hay forma es seleccionado: si usted tiene algunas formas dibujadas en la imagen podrás ver el código HTML en un área de texto, si usted todavía no ha elaborado una forma verá un área de texto vacía, pero se puede pasado en ella algo de código HTML y cargarlo.
  • Al hacer clic en el botón de "carga" (que se puede ver sólo después de hacer clic en el botón "mapa"), el código HTML presentes en el área de texto será traducido en formas en la imagen.

Puede consultar el manual completo de la herramienta en el siguiente enlace: Manual en Línea

Si usted tiene alguna pregunta, simplemente dejar un comentario o envíeme un correo electrónico!


Descargar
Otros componentes de esta categoríaTodos los componentes de este autor
ComentariosPreguntas frecuentes y respuestas

Propiedades

Creado:
10 de octubre 12

Última actualización:
N / A

Alta resolución:
Sin

Los navegadores compatibles:
Firefox, Opera, Chrome

Archivos incluidos:
JavaScript JS, HTML, CSS

Versión del software:
HTML5

Palabras clave

eCommerce, eCommerce, Todos los objetos, aplicació, n, zona, lona, cí, rculo, coordinar, html5, imagen, mapa, asignador, poli, rect, forma, objetivo, herramienta, zoom