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

@pt1wwsAssine o nosso feed para se manter atualizado!

Novo! Siga-nos o que você quiser!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Este é um mapeamento de imagem html projetado para desenvolvedores web.

A ferramenta foi desenvolvida usando o HTML5 canvas, portanto, seu uso é limitado para os navegadores que suportam a tela, mas também a API do arquivo de:

IE10 +, + FF3.6, FF14-, FF18 + (FF15 a ter problemas com algumas funcionalidades de lona, ​​Bug 787623, que serão resolvidos em FF18), Chrome6 +, + Safari6, Opera11.1 +

Uma vez que esta é uma ferramenta para desenvolvedores, eu acho que isso não é uma grande limitação, porque eu suponho que um desenvolvedor web não tem nenhum problema para escolher um navegador apropriado.

Eu tenho usado FF14 para desenvolver a ferramenta, então esta é a melhor escolha, mas a ferramenta foi também testada em Chrome22 e Opera12


Nota: A versão da ferramenta que você pode ver no link Live Preview, é uma versão limitada da ferramenta. Com esta versão você só pode carregar um conjunto específico de imagens, listados na página inicial. Depois de carregar uma imagem que você pode tirar todas as formas, mas apenas os primeiros 6 formas será gerada no código HTML. Esta limitação não o impede de testar todas as funcionalidades da ferramenta.


O que é um mapa de imagem?

Um mapa de imagem é um código HTML que faz clickable pelo usuário diferentes áreas de uma imagem. O código HTML consiste na tag HTML mapa, em conjunto com a tag área, que lhe permite definir áreas com formas retangulares, poligonais e circulares.
Como exemplo, se você tem a imagem image1.png em sua página HTML, você pode escrever o seguinte 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 você pode ver, você tem que definir o atributo usemap na tag img, que terá o mesmo valor do atributo nome na tag mapa. Entre o <map> e </ map> você pode definir quantas <area> marcadores quanto quiser, cada um representando uma área clicável pelo usuário sobre a imagem associada. Cada área deve ter um atributo forma, que pode ter um dos 3 valores: rect, poli e do círculo. A forma rect está completamente definida por 2 pontos, um poli forma é definida por uma sequência de pontos, e uma forma de círculo é definida por um ponto, que representa o centro, e um raio. Todos os pontos são definidos por um par de coordenadas, expressas em pixels, familiares para o canto superior esquerdo da imagem. O atributo forma também pode ter o valor "padrão", que se referem a partes da imagem não mapeados com qualquer uma das formas anteriores. Leve em conta, em vez disso, que a ordem em que as formas são definidas no mapa são muito importantes: se você definir o "default" forma como a primeira forma no mapa, ele irá substituir todas as formas posteriores, porque o "default" refere-se a forma de toda a imagem. Isto é verdade também com as formas que se sobrepõem uns aos outros: você pode definir uma forma pouco em uma forma maior, mas você tem que definir primeiro a pequena forma e, em seguida, o maior. Se 2 formas partilhar uma porção da imagem, a forma definida pela primeira vez, ganha.

Se você quiser definir manualmente um mapa de imagem você tem que saber as coordenadas de todos os pontos necessários para definir as diferentes formas. Provavelmente, este não é um grande problema se você tem poucas áreas para mapear, especialmente se você tem áreas circulares ou retangulares. Mas se você tem várias áreas, com uma forma poligonal, configurá-los manualmente não é uma tarefa simples.

A ferramenta imagem mapeador permite desenhar formas, tais como rect, poli, e um círculo na imagem seleccionada, que serão traduzidos automaticamente no código HTML correspondente que faz com que as áreas da imagem user-clickable.

Depois de desenhar as formas na imagem dada, você pode gerar o código HTML simplesmente clicando em um botão eo código será displayied em uma textarea. Você pode copiar o código HTML e usá-lo em sua página (s) HTML. Você também pode fazer o processo inverso: colando o código HTML na área de texto, você pode carregar esse código simplesmente clicando em um botão; este será traduzido nas formas na imagem e você pode modificá-los, adicionar novas formas e voltar a gerar o código de HTML. Este mecanismo inverso é útil para permitir que você salve um processo de mapeamento parcial e continuar a mapear a imagem mais tarde. Também é útil para refinar "manualmente" a forma concepção / posicionamento: depois de gerar o código no textarea, você pode modificar as coordenadas na textarea on the fly e re carregá-lo.

Principais características:

  • Você pode selecionar uma imagem local ou remoto
  • Você pode definir os tamanhos de imagem alvo: estes são os tamanhos que a imagem terá em sua página HTML
  • Você pode zoom in e out a imagem em qualquer momento e isso não vai interferir com as coordenadas reais que serão gerados, que depende apenas sobre os tamanhos alvo da imagem. O recurso de zoom só é útil para ajudá-lo a desenhar as formas.
  • É possível definir vários parâmetros para cada forma, tais como o atributo "href", o atributo "alt", o "id" e "classe" atributos e, finalmente, o atributo de "alvo". Para definir o parâmetro que você tem que selecionar a forma de selecionar uma forma que você tem que selecionar a seta superior esquerdo da barra de ferramentas e, em seguida, clique na forma.
  • Você pode definir alguns parâmetros para o mapa: o mapa "nome", a URL padrão eo alvo.
  • Você pode desenhar uma forma selecionando a forma de uma barra de ferramentas.
  • Para desenhar uma forma, depois selecionando-o na barra de ferramentas, você pode simplesmente clicar com o mouse sobre a imagem, onde você deseja iniciar a forma.
  • Se a forma é um círculo, o ponto flerta é o centro: mover o mouse (clicado ou liberada), você pode ver um círculo que segue o cursor. Clicando novamente o mouse vai parar de desenhar o círculo.
  • Se a forma for de um rect. o primeiro ponto é um dos cantos. Movendo o mouse (clicado ou liberado) vai chamar um rect. Clicando novamente o mouse vai parar de desenhar.
  • Se a forma é um poli o processo é um pouco diferente: cada clique do mouse irá definir um ponto; o ponto actual está sempre ligado com um abetos, fazendo com que o poli sempre uma forma fechada; para parar de chamar a poli (para definir o último ponto) você tem que clicar duas vezes no mouse.
  • Para todas as formas que você também pode parar de chamar-los clicando no botão "stop" (a seta superior esquerdo da barra de ferramentas).
  • Você pode ver as coordenadas do mouse quando você movê-lo na imagem.
  • Você pode usar a borda cinza-pontilhada ao redor da imagem para determinar as coordenadas da borda da imagem, assim você pode usar a fronteira como era parte da imagem: assim, você pode clicar na fronteira durante o desenho da forma, jus como ele foi parte da imagem. Por exemplo, se você clicar no canto superior esquerdo da fronteira, você irá definir um ponto em (0, 0) coordena. Se você clicar no-fronteira esquerda, em qualquer ponto, você irá definir um ponto no (0, y) coordenadas, etc.
  • Você pode selecionar uma forma já desenhado e modificar / redimensionar / removê-lo. Para removê-lo você tem que usar a "borracha" na barra de ferramentas, que aparecerá como um lápis recusou selecionar apenas uma forma.
  • Você pode selecionar a cor do contorno das formas de um conjunto de 5 cores (isto não é uma ferramenta de design, então eu ter limitado o número de cor e também você não pode escolher uma cor diferente para cada forma).
  • Você pode clicar no botão "mapa", que é visível apenas quando você seleciona o botão "stop" na barra de ferramentas e nenhuma forma é selecionada: se você tem algumas formas desenhadas sobre a imagem que você vai ver o código HTML em uma textarea, se você ainda não desenhou uma forma você vai ver um textarea vazio, mas você pode passado nele algum código HTML e carregá-lo.
  • Clicando no botão "load" (que você pode ver apenas depois de clicar no botão "mapa"), o código HTML presentes no textarea será traduzido em formas na imagem.

Você pode consultar o manual completo da ferramenta no seguinte link: Manual Online

Se você tiver alguma dúvida, basta deixar um comentário ou mande-me um e-mail!


Download
Outros componentes nesta categoriaTodos os componentes deste autor
ComentáriosPerguntas mais frequentes perguntas e respostas

Propriedades

Criado:
10 out 12

Última atualização:
N / D

Alta resolução:
Não

Navegadores compatíveis:
Firefox, Opera, Chrome

Arquivos incluídos:
JS JavaScript, HTML, CSS

Versão do software:
HTML5

Palavras-chave

eCommerce, eCommerce, Todos os itens, app, á, rea, lona, cí, rculo, coordenar, html5, imagem, mapa, mapeador, poli, rect, forma, alvo, ferramenta, zoom