Faça etiquetas de imagem interativas com qTip (plug-in jQuery)

Propaganda

As imagens podem ser bastante sem vida e chatas, a menos que sejam interativas e impressionantes. E o qTip facilita isso, com o poder do jQuery. Continue lendo para descobrir como você pode adicionar rótulos interativos que aparecem quando o usuário passa o mouse 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 possa passar o mouse sobre os elementos de uma cena (como um catálogo da Ikea), com o título do produto e o botão Adicionar ao carrinho aparecendo dinamicamente. Também pode ser usado com bom efeito em algo como um mapa do campus ou da cidade, onde há muitos elementos de formas estranhas que poderiam realmente fazer uma descrição sem bagunçar o mapa. Um exemplo muito simples também seria as tags do Facebook, onde passar o mouse sobre o rosto de uma pessoa lhe dirá quem ela é. Seus usos são limitados apenas pela sua imaginação.

Nota: estou assumindo um conhecimento muito básico de jQuery e HTML aqui - pelo menos, certifique-se de ler sobre

seletores Tutorial do jQuery - Introdução: Noções básicas e seletoresNa semana passada, falei sobre a importância do jQuery para qualquer desenvolvedor web moderno e por que ele é incrível. Esta semana, acho que é hora de sujarmos as mãos com algum código e aprendermos como ... consulte Mais informação , métodos Introdução ao jQuery (Parte 2): Métodos e FunçõesIsso faz parte de uma introdução contínua para iniciantes à série de programação da web jQuery. A Parte 1 abordou os conceitos básicos do jQuery de como incluí-lo em seu projeto e seletores. Na parte 2, continuaremos com ... consulte Mais informação e funções anônimas Introdução ao jQuery (parte 3): aguardando a página carregar e funções anônimasO jQuery é indiscutivelmente uma habilidade essencial para o desenvolvedor web moderno e, nesta pequena minissérie, espero fornecer o conhecimento para você começar a usá-lo em seus próprios projetos web. No... consulte Mais informação .

qTip

qTip é um plugin abrangente de dica de ferramenta e rotulagem para jQuery, com uma variedade de estilos. Vamos usá-lo especificamente com a funcionalidade do mapa de imagem, mas isso certamente não é tudo o que pode fazer. Dê uma olhada no página de plug-in para saber mais, ou continue lendo para começar.

Fazendo um mapa de imagens

Os mapas de imagem em si certamente não são novidade: os elementos de marcação estão disponíveis há muito tempo e, no passado, foi considerado uma boa maneira de apresentar um sistema de navegação - com partes clicáveis ​​da imagem vinculadas a diferentes Seções. O mesmo código básico de mapa de imagem ainda é usado para essa parte da funcionalidade, portanto, precisamos defini-lo primeiro.

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

Comece fazendo o upload de uma foto. Nesse caso, vou rotular uma captura de tela do site MakeUseOf. Pode ser necessário diminuir o zoom para visualizar sua imagem completa na ferramenta.

Deve ser bastante óbvio como usá-lo como um programa básico de pintura - a única coisa a lembrar é que, ao desenhar uma forma poli, você precisa manter a tecla SHIFT no último ponto para fechar e terminar. Aqui eu defini quatro formas.

Quando estiver pronto, role para baixo e copie o código fornecido.

Crie um novo documento HTML básico e limpe um pouco o código, adicionando uma tag de imagem para apontar para sua imagem original. A maneira mais fácil de testar isso é usando um JSFiddle. Aqui está minha amostra, no estado inicial (o conjunto de códigos final é dado posteriormente, não se preocupe).

Lembre-se de dar uma imagem à imagem usemap atributo, apontando para #Eu iria do mapa que contém as coordenadas (usemap = ”# mymap”, por exemplo).

Adicionando qTip

Se você colou seu código no JSFiddle, verá uma opção na barra lateral para incluir o jQuery. Certifique-se de ativar isso. Também podemos adicionar outros recursos externos aqui, então vá em frente e adicione os URLs para CSS e JS listados na página de download do qTip. Copie e cole os links "todos os recursos e estilos" no JSFiddle - embora, na prática, você use a ferramenta de configuração abaixo para criar um conjunto personalizado de recursos ou estilos.

O guia de implementação completo para qTip pode ser encontrado aqui, mas vamos em frente e crie algumas dicas de ferramentas simples baseadas em texto. O Javascript a seguir terá como alvo todos os elementos da área (os itens que definem as partes do nosso mapa de imagens) no carregamento da página, dizendo ao qTip para trabalhar neles com o conteúdo do que estiver no atributo alt.

$ (document) .ready (function () { $ ("área"). each (função (índice, elemento) { var link = $ (isto); $ (link) .qtip ({ conteúdo: link.attr ("alt") }); }); });

O design padrão é muito feio - você pode ver uma demonstração dele aqui - mas tudo bem, vamos aplicar um design personalizado a pop-ups como este Omiti parte do código, mostrando apenas a seção específica da qTip.

$ (link) .qtip ({ conteúdo: link.attr ("alt"), estilo: { classes: 'qtip-bootstrap qtip-shadow' } });

Eu também incluí o CSS BootStrap como um arquivo externo, para classificar as feias fontes padrão do navegador. Isso é muito exagero, eu sei. Ainda: muito melhor!

Uma coisa que noto agora é que a posição padrão do canto inferior direito não é realmente ideal. Para ajustar isso, vamos usar a configuração de posição:

$ (link) .qtip ({ conteúdo: link.attr ("alt"), estilo: { classes: 'qtip-bootstrap qtip-shadow' }, posição: { alvo: 'mouse', ajuste: { mouse: true // Pode ser omitido (por exemplo, comportamento padrão) } } }); });

Agora passe o mouse sobre qualquer elemento e a dica seguirá o mouse. Você pode veja a demonstração final aqui.

Você também pode tornar o pop-up modal (para que todo o resto seja esmaecido e precise clicar fora para voltar a ele) ou até carregar algum conteúdo por meio de uma solicitação AJAX. Eu acho que é um plug-in bem organizado que dá vida nova a um padrão HTML bastante não utilizado - vamos ver o que você pode criar, e nos informe nos comentários se você fez algo com isto.