Dicas de ferramentas em uma imagem

Question

Eu tenho uma imagem e nela estão logotipos (é um mapa), quero que apareça uma caixinha pop-up com informações sobre a localização desse logotipo quando o usuário passar o mouse sobre o referido logotipo.

Posso fazer isso sem usar uma estrutura javascript e, em caso afirmativo, existem pequenas bibliotecas/scripts que me permitam fazer isso?

Answer 1

Sim, você pode fazer isso sem Javascript.Use um mapa de imagem HTML, com atributos de título, como este:

<img usemap="#logo" src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png">
<map name="logo">
<area shape="rect" href="" coords="52,42,121,65" title="Stack">
<area shape="rect" href="" coords="122,42,245,65" title="Overflow">
</map>

O logotipo Stack Overflow refere-se ao mapa de imagem, que define um retângulo para cada uma das duas palavras usando um area marcação.Cada area Tag title O elemento especifica o texto que os navegadores geralmente mostram como dica de ferramenta.O shape O atributo também pode especificar um círculo ou polígono.

Answer 2

O title atributo é a solução mais simples e com garantia de funcionamento, e degradar normalmente para agentes de usuário que não o suportam corretamente.

Answer 3

Uma única imagem por si só não fornece ao navegador as informações semânticas dos logotipos contidos nela.Você poderia usar um mapa de imagem para fornecer as coordenadas.Para obter dicas de ferramentas, basta aplicar um title atribuir a cada link.Para dicas de ferramentas mais sofisticadas (como estilo, linhas múltiplas etc.), você precisará de algo fora do padrão, como UniTip.

Answer 4

MooTools tem um script bacana para isso.Ver Dicas do MooTools.Leve no HTML também.

Aqui está um demonstração da versão 1.11.

Answer 5

Na verdade, Mootools é um dos muitos frameworks
que permitem adicionar funcionalidade a qualquer elemento em
sua página da web.Aqui está um link para um pequeno tutorial.
http://mootorial.com/wiki/mootorial/08-plugins/03-interface/01-tips

Mootools não é realmente um tipo de estrutura de copiar e colar,
incentiva você a examinar o código fornecido e
crie sua própria solução com alguns exemplos excelentes.

Answer 6

Você pode experimentar o widget javascript em http://www.taggify.net/ .O script permite adicionar dicas de ferramentas para a parte da imagem - quando o usuário move o mouse sobre a região da foto, o script exibe uma dica de ferramenta, desenha uma borda ao redor da região e desbota outras partes.Coisa legal para marcar pessoas na foto.Veja a demonstração em http://www.taggify.net/demo.aspx

Answer 7

você pode usar title atributo para dica de ferramenta simples.funciona em quase todos os objetos DOM.