Come costruire una mappa immagine con CSS

Opzioni

Volevo qualcosa di "geniale", quindi ho deciso una grafica "tascabile" che contenga tutti i metodi di iscrizione per il mio blog.

Ai tempi del Web 1.0, una raccolta di collegamenti come questa poteva essere costruita unendo la tua immagine con i collegamenti su ogni grafico, quindi cercando di ricucire il tutto insieme con una tabella. Potrebbe anche essere ottenuto utilizzando un file mappa immagine ma questo di solito richiede uno strumento per costruire il sistema di coordinate. L'utilizzo di Cascading Style Sheets rende tutto più semplice ... niente immagini di giunzione e nessun tentativo di trovare uno strumento per costruire il tuo sistema di coordinate!

  1. Costruisci la tua immagine che desideri utilizzare. È possibile utilizzare questo grafico di seguito (fare clic con il tasto destro e salvare con nome per il download):
    Opzioni
  2. Carica la tua immagine in una directory relativa al tuo CSS. In WordPress, questo può essere fatto più facilmente inserendolo in una cartella di immagini nella directory del tema.
  3. Aggiungi il tuo codice HTML. È carino e semplice ... un div con tre link al suo interno:
    > div id = "iscriviti">> a id = "rss" href = "[link al tuo feed]" title = "Iscriviti con RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[link di iscrizione alla tua email]" title = "Iscriviti con email" >> span class = "hide"> Email> / span >> / a>> a id = "mobile" href = "[your mobile link]" title = "Visualizza versione mobile" >> span class = "hide"> Mobile> / span >> / a>> / div>
    
  4. Modifica il tuo Cascading Style Sheet. Aggiungerai 6 stili diversi. 1 stile per il div generale, 1 per il tag a in modo che non mostri alcuna decorazione del testo, 1 stile per nascondere il testo (utilizzato per l'accessibilità) e 1 specifica di stile per ciascuno dei link:
    #subscribe {/ * background image block * / display: block; larghezza: 215px; altezza: 60px; sfondo: url (images / options.png) no-repeat; margin-top: 0px; } #subscribe a {text-decoration: none; } .hide {visibilità: nascosto; } #rss {/ * Link RSS * / float: left; posizione: assoluta; larghezza: 50px; altezza: 50px; margine sinistro: 20 px; margin-top: 5px; } #email {/ * Link email * / float: left; posizione: assoluta; larghezza: 50px; altezza: 50px; margine sinistro: 70 px; margin-top: 5px; } #mobile {/ * Mobile Link * / float: left; posizione: assoluta; larghezza: 50px; altezza: 50px; margine sinistro: 130 px; margin-top: 5px; }

Il posizionamento è piacevole e semplice ... aggiungi un'altezza e una larghezza e quindi imposta il margine sinistro dal lato sinistro dell'immagine e il margine superiore dal lato superiore dell'immagine!

Questo post "How To" è per l'ingresso nel Geeks are Sexy ultimate "How To" Contest! Una nota, è vero che una mappa immagine può avere poligoni molto più complessi, ma non ho davvero visto troppi posti in cui è un must. Ho notato che la vecchia immagine RSS sulla barra laterale Geeks è Sexy… è un buon posto per un collegamento. 😉

AGGIORNATO 10/3/2007 per una migliore accessibilità con la consulenza di Phil!

Sponsor: Se sei un principiante del web design, crea il tuo sito web nel modo giusto usando HTML e CSS, la 2a edizione è un must. In questa guida facile da seguire imparerai come costruire un sito web nel miglior modo possibile - facendolo tu stesso!

Commenti

  1. 1

    Doug, sembra un bel metodo, ma è molto inaccessibile.

    Considera un utente cieco con uno screen reader, un utente con un browser di solo testo o chiunque visiti il ​​sito senza CSS o immagini abilitati (come, forse, un utente mobile che cerca il link al tuo sito mobile friendly). Nessuno di loro saprà di questi tre collegamenti perché non hanno testo. Se le immagini sono disattivate, un utente non vedrà nemmeno il testo alternativo per descrivere cosa sarebbe stato lì perché è un'immagine di sfondo.

    Meglio sarebbe tagliare le immagini, collegarle, metterle in un elenco e farle galleggiare l'una accanto all'altra. O anche utilizzare il testo per i collegamenti e sostituire il testo utilizzando una tecnica di sostituzione dell'immagine standard. Questo sembra conveniente, ma rende le cose molto più difficili / impossibili per coloro che non utilizzano un browser grafico standard.

    • 2
      • 3

        Doug,

        JAWS non legge i titoli dei collegamenti per impostazione predefinita, ma hai ragione, può farlo. Perché dovresti cercare i titoli dei link se non sapessi che erano lì, e anche se lo fossi, sicuramente questo si riduce a un problema di usabilità, il che significa che stai offrendo agli utenti meno abili un'esperienza di secondo livello di utilizzo del tuo sito.

        Per i browser di testo, l'articolo a cui mi indirizzi che Lynx ti consente anche di visualizzare un elenco di titoli di collegamento, ma il mio punto rimane che se non sapevi che c'era un collegamento lì, poiché non c'era testo in primo luogo , perché dovresti cercare il testo del titolo?

        Infine, gli attributi del titolo del collegamento non verranno ancora visualizzati per chiunque navighi senza immagini abilitate o senza CSS abilitato.

        Quindi sì, i collegamenti con i titoli sono migliori di quelli senza, ma in questo caso è solo marginale.

        Questo è il motivo per cui usare un'immagine, in modo che il testo alternativo possa essere letto, o la sostituzione dell'immagine, in modo che il testo sia presente, è un'opzione molto più sicura, più accessibile e più utilizzabile.

        • 4

          Buone informazioni, Phil. Cercherò di migliorarlo con il testo ma semplicemente di nascondere il testo: in questo modo un prodotto accessibile come JAWS leggerà il testo del collegamento e il testo verrà visualizzato se CSS o Immagini sono disabilitati.

          Tuttavia, non sono d'accordo sul fatto che l'unica soluzione accessibile sarebbe quella di inserire un'immagine con un collegamento.

  2. 5
  3. 8

    L'ho rubato. Ecco, l'ho detto.

    Doug, la grafica è fantastica e il codice è così incredibilmente semplice che mi spaventa (ho giocato con i CSS e ora finalmente "capisco").

    Ho ottimizzato il codice per soddisfare le mie esigenze, ho capito dove inserire il bit HTML e, francamente, ha un bell'aspetto e ha ripulito quella parte superiore della mia barra laterale che mi ha fatto impazzire.

    Potrei anche doverti comprare quel caffè!

  4. 10

    Doug,

    Sarò una voce dissenziente, usando la mia esperienza come esempio. Ricordo le nostre e-mail quando la mia e-mail di casa è cambiata e hai notato che dovevo semplicemente accettare la mia nuova. Devo ammettere che ho passato un sacco di tempo a "scoprire" la nuova funzione sul tuo sito per riattivarla. Parte di questo era perché il collegamento originale era un po 'più tradizionale e me lo ricordavo vagamente. L'altro era perché la mezza busta laterale inizialmente non mi sembrava una busta. Dopo circa 5 o più minuti ho iniziato a far scorrere il mouse su ogni immagine e quando è stato visualizzato il titolo "Iscriviti con e-mail", ho capito che ero in affari. Il mio cervello ha anche capito quale fosse l'immagine del collegamento.

    Ma, almeno per me, una busta laterale non era intuitiva per me come luogo in cui iscriversi alle notifiche e-mail. E (perché mi è stato detto di finire sempre con qualcosa di carino) sono d'accordo con Phil sopra; il metodo è davvero semplice e l'intero oggetto funziona alla grande. Immagino che il tuo strumento di progettazione ti abbia aiutato a darti le dimensioni esatte per le 3 sezioni; è un presupposto corretto? Devo presumere di sì, dal momento che se avessi, ad esempio, un'immagine larga 400 pixel avrei bisogno di conoscere le giuste impostazioni, ecc.

  5. 12
    • 13

      William,

      Sembra che tu possa avere un conflitto tra i nomi delle classi dei commenti e i nomi delle classi nella grafica della barra laterale. Puoi nominarli in modo diverso per chiarire il conflitto. Fammi sapere se hai bisogno di una mano!

      Doug

  6. 14
  7. 15
  8. 16
  9. 17
  10. 18

    Approccio carino, ma ho bisogno di qualcosa per una mappa topografica, quindi non posso usare aree rettangolari ... Penso di dover usare la mappa immagine vecchio stile con le coordinate, ma probabilmente scaverò un po 'più a fondo ...

  11. 19

    Grazie per queste informazioni, Doug. Ero già stato qui e mi chiedevo come hai fatto. Volevamo creare una mappa del genere da inserire dopo i nostri post, e ora che abbiamo i mezzi possiamo farlo. Bravo!

  12. 20
  13. 21

    Ciao Doug,
    Ho lasciato un commento precedente, ma mi sono reso conto che non ho offerto quasi nessuna visione del mio dilemma. Abbiamo adattato un tema wordpress per aiutarci a lanciare la nostra sitcom online qui:

    http://www.phaylen.com/blog/

    Ora vedrai che abbiamo un banner di navigazione nella parte superiore, un'immagine che intendevamo mappare come abbiamo fatto dozzine di volte in precedenza. /palmforehad. Nessuno di noi capisce davvero il CSS, ma ci siamo imbattuti in modo sufficiente e finora abbiamo fatto bene fino a questo punto. Il tuo articolo nell'UNICO tra le dozzine che ha fornito fornisce informazioni reali su come utilizzare facilmente l'imagemapping nei CSS. Ho modificato il foglio di stile secondo le tue indicazioni, ma non ho idea di dove posizionare l'HTML. Tutto quello che hai detto è "Aggiungi il tuo html... è carino e semplice" e poi ho rabbrividito perché ho pensato.. "non abbastanza semplice per me!" Non sapevo di poter aggiungere html in nessuna di queste pagine php nell'editor del tema. Metto l'html nell'intestazione? Il modello dell'indice principale? Le funzioni? Presumo che tutti gli utenti di wordpress abbiano la possibilità di modificare il loro tema nell'editor della dashboard, che sembra abbastanza universale in termini di funzionalità. Se potessi suggerire dove posizionare l'html, mi piacerebbe adattare il codice oru per la mia barra di navigazione.

    Grazie per aver condiviso le tue conoscenze con la comunità. Sono felice di offrirti un caffè.

    • 22

      Ciao Phay!

      Tutti i file per il tema del tuo blog sono disponibili tramite il pannello di amministrazione per la modifica. Se fai clic su Presentazione e poi su Editor temi, dovresti essere in grado di vedere un elenco dei tuoi file a destra e un editor a sinistra.

      Se desideri che questo sia nella tua barra laterale, probabilmente hai una pagina della barra laterale. Fare clic per modificarlo e quindi inserire l'HTML fornito all'interno della pagina in cui si desidera.

      Una nota: la modifica del foglio di stile è relativa alla tua pagina, quindi dovrai caricare l'immagine nella directory delle immagini del tema se fai riferimento ad essa come faresti con le altre immagini nel tuo tema.

      Speranza che aiuta!

    • 23

      Phay,
      Oggi mi sono imbattuto in questo sito e ho avuto il tuo stesso dilemma. Volevo anche aggiungere una mappa immagine all'immagine dell'intestazione. Dopo averci giocato per un po', ho capito bene. Metti il ​​div HTML nel file header.php. L'ho messo tra e . Non sono sicuro che il tuo modello abbia quella codifica esatta, ma giocaci nel file header.php e lo capirai.
      -
      Paul

  14. 24

    Grazie per la risposta veloce!

    No, non volevo che fosse nella barra laterale, è nella parte superiore della pagina (puoi vedere nel link che ho fornito - la barra di navigazione rosa che dice continua, sullo spettacolo ecc ..)

    Ho lavorato in dashboard tutta la mattina, sfortunatamente, non sono sicuro in quale file inserisco l'html, come detto sopra, ne ho diversi, header.php, main index.php, functions.php, footer.php. Non sono sicuro di dove inserire il codice html. (la prima parte che hai fornito, ho già inserito il resto nel mio foglio di stile) Ho la mia immagine lì sul sito, è tutto pronto, ho solo bisogno di sapere dove aggiungere la porzione html del codice per l'adattamento.

    Grazie mille per il tuo tempo e per aver risposto alle domande di un principiante.

    Phay

  15. 25

    ... O forse qualcuno potrebbe inserire nei commenti in quale file inseriamo la parte html del codice. Un signore, dopo alcuni post, ha detto di averlo capito. Non sono stato così fortunato.

    Phaylen

  16. 26
  17. 27

    Mi sto divertendo molto a trovare un modo per incorporare una mappa immagine cliccabile in wordpress perché rimuove i tag della mappa html. Il tuo modo funzionerebbe, ma una mappa degli Stati Uniti è ovviamente un modo complesso per avvitare in questo modo. Mi sono perso.

    Aiuto.

    Sembra che il flash sia la mia unica opzione?

    • 28

      Dave,

      Se metti l'immagine nel tuo modello, andrà tutto bene. Se inserisci la mappa immagine nel contenuto effettivo, potresti incorrere in problemi di filtro. Il modo in cui ho risolto questo problema è terribile, ma a volte ho utilizzato un iframe.

      Doug

  18. 29

    Ciao,

    sembra che la mappa immagine e i collegamenti siano due cose diverse, non funzionano insieme come fa una mappa immagine in html

    quando includo il posizionamento dello sfondo (centro sinistra) per la mappa dell'immagine, il posizionamento dei collegamenti non segue.

    qualche modo per aggirare questo? sono molto amatoriale. grazie.

  19. 31

    Un approccio simile sarebbe utilizzato per una mappa immagine più grande e più complicata come sto cercando di utilizzare?

    Se visualizzi il mio sito, fai clic sui collegamenti a sinistra e vedrai l'immagine che sto cercando di utilizzare come mappa immagine (sotto l'alfabeto del testo).

    Fondamentalmente, provando a utilizzare l'immagine per andare a ciascuna sezione di questo elenco per lettera.

    Evidentemente, ho passato 20 minuti a costruire una mappa con GIMP, quindi WP rimuove i tag della mappa, quindi è così che ho trovato il tuo sito.

    Tuttavia, può prendere in considerazione l'utilizzo di Flash

    Grazie.

  20. 33

    Attualmente sto utilizzando un layout di modello e sto modificando con le mie cose. Voglio aggiungere una mappa immagine, ma non sono sicuro di dove posizionarla nel css. l'immagine di cui voglio fare una mappa si trova nella parte dell'intestazione.

  21. 34

    ciao, ho costruito il mio sito web su joomla ... voglio usare questo metodo per rendere il logo della mia pagina un collegamento a casa, mi è stato detto che non puoi farlo con joomla ma questo articolo mi dà speranza! aiuto via e-mail sarebbe molto apprezzato ... grazie

  22. 35

    Ciao Doug, sto costruendo una mappa immagine basata su CSS piuttosto complessa che ha anche rollover remoti (in questo caso, il testo viene visualizzato altrove sulla pagina quando passi il mouse su uno degli hotspot dell'immagine). Ad ogni modo, mi sono imbattuto nel tuo esempio qui durante la ricerca ... e ho pensato di condividere il seguente input:

    1. Per l'accessibilità, non dovresti usare la visibilità: nessuno (o display: nessuno se lo hai considerato) per nascondere il testo qui, come elemento in stile con visibilità: nascosto non verrà letto dagli screen reader (quelli che seguono le specifiche) .

    Utilizzare invece una tecnica di sostituzione delle immagini più robusta. Suggerisco il metodo Phark o Gilder / Levin: questi sono solo i nomi meglio documentati su Google per trovare le tecniche di base. Preferisco G / L in quanto funziona anche con CSS abilitato ma le immagini sono disattivate.

    2. Anche se non lo vedo rompersi (usando FF3), la tua implementazione del posizionamento ha anche dei rischi intrinseci. Un elemento posizionato in modo assoluto è posizionato rispetto al suo genitore posizionato più vicino. Fondamentalmente, vorresti impostare in modo esplicito un contesto di posizionamento applicando "position: relative" a #subscription. Quindi i figli (i collegamenti posizionati) possono essere posizionati all'interno di quel genitore. Questo metodo aiuta a garantire risultati più affidabili su tutti i browser.

    Inoltre, dovresti quindi utilizzare le dichiarazioni di posizionamento di "top: x" e "left: x" (dove x è il valore di offset, diciamo in px) invece dei margini per gestire quel posizionamento. Ancora una volta, non vedo necessariamente che si rompa nel modo in cui l'hai, ma in alto e a sinistra sono pensati per questo, quindi perché non usarli? Inoltre hai float e margini impostati sullo stesso elemento, che in condizioni specifiche causano il bug del "doppio margine" in IE6 (l'hai testato lì?) - Anche se c'è una soluzione, eviti completamente quel problema usando top e sinistra invece dei margini per il posizionamento in questo caso.

    3. Infine, perché non utilizzare un elenco non ordinato semanticamente valido per questi collegamenti invece del div privo di significato?

    Scusami per il droning su ... Mi piace solo condividere, b / c so per esperienza come ci sono molti modi diversi di usare i CSS per ottenere un risultato desiderato, ma alcuni modi funzionano sicuramente meglio (più affidabile, cross-browser) di altri . HTH.

  23. 36
  24. 37
  25. 38

    Grazie mille!! Le tue istruzioni mi hanno fatto risparmiare ORE di lavoro ... Sono nuovo nello sviluppo web e ho sofferto per il mio primo grande progetto. Ce l'ho fatta ... il cliente è felice, estatico in realtà, e lo sono anch'io!

  26. 39

    Ciao, grazie mille per aver postato questo! Anni dopo e sta ancora aiutando ... bello! Sto lottando per ottenere il collegamento della mia mappa immagine nel posto giusto. Ho un banner e desidero che le icone social in alto a destra del banner si colleghino utilizzando il codice che hai fornito. Funziona benissimo, tranne che sto facendo qualcosa di sbagliato perché i miei collegamenti vengono visualizzati nella parte in alto a sinistra dello schermo, non sopra le icone social, ma sopra il logo. Sono sicuro che sia qualcosa di semplice, ma non riesco a capirlo. Ho pensato di condividerlo qui nel caso tu abbia qualche intuizione. Grazie ancora per aver postato questo!

Cosa ne pensi?

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati dei tuoi commenti.