Faça etiquetas de imagem interativa com qtip (jquery plugin)

As imagens podem ser muito sem vida e sondagens - a menos que eles são interativos e incrível, isso é. E QTIP torna isso fácil, com o poder do jQuery. Leia mais para descobrir como você pode adicionar rótulos interativos que aparecem quando o usuário passa sobre partes de uma imagem.

Por que você quer fazer isso? Pessoalmente, estou usando a técnica em um novo site de comércio eletrônico - para que o usuário pode passar-over elementos de uma cena (como um catálogo da Ikea), com o título do produto e adicionar ao carrinho botão que aparece de forma dinâmica. Ele também poderia ser usado com bons resultados em algo como um mapa do campus ou cidade, onde há muitos elementos de forma estranha que poderia realmente fazer com uma descrição sem congestionar o mapa. Um exemplo muito simples também seria etiquetas Facebook, onde paira sobre uma cara das pessoas vai dizer quem eles são. Seus usos são limitados somente por sua imaginação.

Nota: Estou assumindo um conhecimento muito básico de jQuery e HTML aqui - pelo menos certificar-se de que você leu sobre seletores, métodos, e funções anônimas.jQuery Tutorial - Introdução: Noções básicas & seletoresjQuery Tutorial - Introdução: Noções básicas & seletoresNa semana passada, eu falei sobre o quão importante jQuery é para qualquer desenvolvedor web moderna e por isso que é incrível. Esta semana, eu acho que é hora chegamos nossas mãos sujas com algum código e aprendeu ...consulte Mais informação

qTIP

QTIP é uma dica de ferramenta e rotulagem plug-in abrangente para jQuery, com uma variedade de estilos. Nós estaremos usando-o especificamente com a funcionalidade de mapa de imagem, mas isso certamente não é tudo o que pode fazer. Dê uma olhada na página de plug-in para saber mais, ou a ler para começar.

Fazendo um mapa de imagem

Imagem mapeia-se certamente não são uma coisa nova - os elementos de marcação tem disponível por um longo tempo, e caminho de volta no dia em que foi considerado realmente uma boa maneira de apresentar um sistema de navegação - com partes clickable da imagem com links para seções diferentes . O mesmo código básico mapa de imagem é usado ainda para que parte da funcionalidade, por isso vamos precisar definir esse primeiro.

Você pode usar uma variedade de ferramentas para criar um mapa de imagem - Adobe Fireworks ou Photoshop - mas o mais fácil e livre, a solução é uma ferramenta online como este. Certamente não é a única ferramenta on-line e eu não estou endossando-a particularmente, mas parecia bastante simples de usar - deixe-nos saber nos comentários se você encontrar um melhor. Você pode definir formas retangulares, circulares, ou mesmo poligonais.

Comece fazendo o upload de uma imagem - neste caso, eu estou indo para rotular uma imagem do site da MakeUseOf. Pode ser necessário diminuir o zoom para visualizar a imagem completa na ferramenta.

Deve ser bastante óbvio como usá-lo como um programa básico de pintura - a única coisa a lembrar é que quando desenha uma forma poli, você precisa segurar SHIFT no último ponto, a fim de fechar e acabamento. Aqui eu defini 4 formas.

Quando estiver pronto role a página e copie o código dado.

Video: Mapa Interativo em flash com tooltip

Crie um novo documento HTML básico, e limpar o código um pouco, adicionando uma tag de imagem para apontar para a imagem original. A maneira mais fácil de fazer testar isso é utilizar um jsFiddle. Aqui está a minha amostra, em seu estado inicial (o conjunto de código final é dada mais tarde, não se preocupe).

Lembre-se de dar a imagem de um usemap atributo, apontando para #identidade do mapa contendo as coordenadas (usemap =”# myMap”, por exemplo).

Acrescentando QTIP

Se você está colado o código em jsFiddle, você verá que há uma opção na barra lateral para incluir jQuery. Certifique-se de permitir isso. Nós também pode adicionar outros recursos externos aqui, então vá em frente e adicione as URLs para CSS e JS listados na página de download QTIP. Copie e cole os “todas as características e estilos” links em jsFiddle - embora, na prática, você usaria a ferramenta de configuração abaixo que para construir um conjunto personalizado de recursos ou estilos.

Video: Evento Developers Desenvolvedores do Mercado Livre Experience 2016 Mercado Pago Envios

O guia de implementação completo para QTIP pode ser encontrada aqui, mas vamos em frente e criar algumas dicas de ferramentas baseadas em texto simples. A seguir javascript terá como alvo todos os elementos de área (os itens que definem as partes do nosso mapa de imagem) no carregamento da página, dizendo QTIP para trabalhar sobre eles com o conteúdo de tudo o que está no atributo alt.

$(documento).pronto(função() {$("área").cada(função(índice, elemento) {var ligação = $(esta)-$(ligação).qtip({conteúdo: ligação.attr("alt")})-})-})-

Video: Introduction to iOS, by Rhed Shi

O projeto padrão é muito feio - você pode ver uma demonstração do que aqui - mas isso é ok, vamos aplicar um design personalizado para os popups como este (Eu tenho omitido parte do código, mostrando apenas a seção específica QTIP).

$(ligação).qtip({conteúdo: ligação.attr("alt"),estilo: {aulas: `Qtip-inicialização qtip-sombra`}})-

Eu também incluiu o BootStrap CSS arquivo como um arquivo externo, para resolver fontes navegador padrão feias. Isto é muito exagero, eu sei. Ainda: muito melhor!

Uma coisa que eu agora notar é que a inadimplência posição do canto inferior direito não é realmente ideal. Para ajustar isso, vamos utilizar a definição da posição:

$(ligação).qtip({conteúdo: ligação.attr("alt"),estilo: {aulas: `Qtip-inicialização qtip-sombra`},posição: {alvo: `rato`,ajustar: {rato: verdade // Pode ser omitido (por exemplo, comportamento padrão)}}})-})-

Agora passa o mouse sobre qualquer elemento, e a dica de ferramenta irá seguir o mouse. Você pode ver a demo terminou aqui.

Você também pode fazer o popup modal (assim tudo o resto é esmaecido de distância, e você precisa clicar fora para voltar a ele), ou mesmo carregar em algum conteúdo através de um pedido de AJAX. Eu acho que é um pouco de plug-in bastante elegante que respira a vida nova em um padrão HTML bastante não utilizado - vamos ver o que você pode vir para cima, e não por favor deixe-nos saber nos comentários se você fez algo com ele.