Descrizione comando su un'immagine

Question

Ho un'immagine e su di essa ci sono i loghi (è una mappa), voglio avere una piccola casella popup con le informazioni sulla posizione di quel logo quando l'utente sposta il mouse su detto logo.

Posso farlo senza utilizzare un framework Javascript e, in tal caso, esistono piccole librerie/script che mi consentiranno di fare una cosa del genere?

Answer 1

Sì, puoi farlo senza Javascript.Utilizza una mappa immagine HTML, con attributi del titolo, come questo:

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

Il logo Stack Overflow si riferisce a mappa immagine, che definisce un rettangolo per ciascuna delle due parole utilizzando an area etichetta.Ogni area tag title L'elemento specifica il testo che i browser generalmente mostrano come tooltip.IL shape l'attributo può anche specificare un cerchio o un poligono.

Answer 2

IL title l'attributo è la soluzione più semplice e garantisce il funzionamento, E degradare con garbo per gli useragent che non lo supportano correttamente.

Answer 3

Una singola immagine da sola non fornisce al browser le informazioni semantiche sui loghi al suo interno.Potresti usare un mappa immagine per fornire le coordinate.Per ottenere suggerimenti, basta applicare a title attribuire a ciascun collegamento.Per descrizioni comandi più sofisticate (ad esempio con stili, linee multiple, ecc.), avrai bisogno di qualcosa di non standard, come UniTip.

Answer 4

MooTools ha uno script ingegnoso per questo.Vedere Suggerimenti MooTools.Leggero anche sull'HTML.

Ecco un demo della versione 1.11.

Answer 5

In effetti Mootools è uno dei tanti framework
che ti consentono di aggiungere funzionalità a qualsiasi elemento su
la tua pagina web.Ecco un collegamento a un piccolo tutorial.
http://mootorial.com/wiki/mootorial/08-plugins/03-interface/01-tips

Mootools non è realmente un framework di tipo copia-incolla,
ti incoraggia a esaminare il codice fornito e
crea la tua soluzione con alcuni esempi eccellenti.

Answer 6

Puoi provare il widget JavaScript su http://www.taggify.net/ .Lo script consente di aggiungere descrizioni comando per la parte dell'immagine: quando l'utente sposta il mouse sulla regione della foto, lo script visualizza la descrizione comando, disegna il bordo attorno alla regione e sfuma le altre parti.Una cosa interessante per contrassegnare le persone sulla foto.Vedi la demo su http://www.taggify.net/demo.aspx

Answer 7

Puoi usare title attributo per una semplice descrizione comando.funziona su quasi tutti gli oggetti DOM.