Cume Custruisce Una Carta di l'Imagine cù CSS

ozzione

Vuliu qualcosa "geeky" allora aghju decisu per un graficu "pocket" chì cuntene tutti i metudi di abbonamentu per u mo blog.

In i tempi di u Web 1.0, una cullizzioni di ligami cum'è questu puderia esse custruita splicing up your image up cù ligami nantu à ogni graficu, dopu pruvatu à cusgitelu tuttu cù un tavulu. Puderia ancu esse realizatu aduprendu un mappa imagine ma chì di solitu richiede un strumentu per custruisce u sistema di coordinate. Aduprà Fogli di Stile in Cascading rende questu un tonu più faciule ... senza imagini di splicing è senza pruvà di truvà un strumentu per custruisce u vostru sistema di coordinate!

  1. Custruisce a vostra maghjina chì vulete usà. Pudete utilizà stu graficu quì sottu (cliccate drittu è salvate cum'è per scaricà):
    options
  2. Caricate a vostra maghjina in un cartulare chì hè parente à u vostru CSS. In WordPress, questu pò esse fattu u più faciule ponendu in un cartulare di immagini in u vostru repertoriu di temi.
  3. Aghjunghjite u vostru HTML. Hè bellu è simplice ... una div cù trè ligami in questu:
    > div id = "subscribe">> a id = "rss" href = "[u vostru ligame di alimentazione]" title = "Abbunassi cun RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[u vostru email subscribe link]" title = "Arrugà si cù Email" >> span class = "hide"> Email> / span >> / a>> a id = "mobile" href = "[u vostru ligame mobile]" title = "Vede a versione mobile" >> span class = "hide"> Mobile> / span >> / a>> / div>
    
  4. Edite a vostra Folla di Stile Cascading. Puderete aghjunghje 6 stili diversi. 1 stile per a div generale, 1 per u tag a dunque ùn mostra micca decurazione di testu, 1 stile per piattà u testu (adupratu per l'accessibilità) è 1 specifica di stile per ognunu di i ligami:
    #subscribe {/ * bloccu di maghjine di fondu * / display: bloccu; larghezza: 215px; altezza: 60px; background: url (images / options.png) senza ripetizione; margin-top: 0px; } #subscribe a {text-decoration: none; } .hide {visibilità: piattu; } #rss {/ * Link RSS * / float: left; pusizione: assuluta; larghezza: 50px; altezza: 50px; margin-left: 20px; margin-top: 5px; } #email {/ * Email Link * / float: left; pusizione: assuluta; larghezza: 50px; altezza: 50px; margin-left: 70px; margin-top: 5px; } #mobile {/ * Mobile Link * / float: left; pusizione: assuluta; larghezza: 50px; altezza: 50px; margin-left: 130px; margin-top: 5px; }

U pusizionamentu hè bellu è simplice ... aghjunghjite una altezza è larghezza è poi mette u margine sinistro da u latu sinistro di l'imagine, è u margine superiore da u latu superiore di l'immagine!

Questu postu "Cumu" hè per entrata in u I Geeks sò Sexy Ultimi Concorsu "Cumu"! Una nota, hè vera chì una carta di maghjine pò avè poligoni assai più cumplessi, ma ùn aghju micca veramente vistu troppu posti induve hè duvutu avè. Aghju nutatu chì l'immagine grande di RSS nantu à i Geeks sò Sexy sidebar ... hè un bonu locu per un ligame. 😉

Aghjurnatu u 10/3/2007 per una megliu accessibilità cù i cunsiglii di Phil!

sustinidori: Sè site un principiante in cuncepimentu web, allora Custruite u Vostru Propiu Situ Web U Dirittu Manendu Usendu HTML & CSS, 2nd Edizione hè un must-have. In questa guida faciule da seguità amparerai à custruisce un situ web u megliu modu pussibule - fendu da te!

41 Comments

  1. 1

    Doug, pare un bellu metudu, ma hè assai inaccessibile.

    Cunsiderate un utilizatore cecu cù un lettore di schermu, un utilizatore cù un solu navigatore di testu o chiunque visiti u situ senza CSS o Immagini attivate (cume, forse un utilizatore mobile chì cerca u ligame per u vostru situ amichevule mobile). Nisunu di elli saperà di questi trè ligami perchè ùn anu micca testu. Se e immagini sò spente un utilizatore ùn vederà mancu un testu alt per discrive ciò chì ci sarebbe statu perchè hè una maghjina di fondu.

    Megliu seria taglià l'imaghjini, ligalli, mette li in un elencu è flutalli accantu à l'altru. O ancu aduprà testu per i ligami è rimpiazzate u testu cù una tecnica standard di sustituzione di l'imagine. Questu pare cunveniente, ma rende e cose assai più difficili / impussibili per quelli chì ùn utilizanu micca un navigatore graficu standard.

    • 2
      • 3

        Doug,

        JAWS ùn leghje micca i tituli di ligami per difettu, ma avete ragiò, pò fà. Perchè cerchereste i tituli di ligami se ùn sapiate micca chì era quì, è ancu se sì, sicuramente questu hè un prublema di usabilità chì significa chì date à l'utilizatori menu capace una seconda esperienza di tariffa cù u vostru situ.

        Per i navigatori di testu, l'articulu chì mi dirighjite versu quellu Lynx vi permette ancu di presentà un elencu di tituli di ligami, ma u mo puntu resta chì, se ùn sapiate micca chì ci era un ligame quì, chì ùn ci era micca testu in primu locu , perchè vulete circà u testu di u titulu?

        Infine, l'attributi di u tittulu di ligame ùn appareranu sempre per chiunque navigheghja senza immagini attivate o senza CSS attivatu.

        Allora iè, i ligami cù i tituli sò megliu cà quelli senza, ma in questu casu hè solu marginale.

        Hè per quessa chì aduprà una maghjina, affinchì u testu alt pò esse lettu, o sustituisce l'imaghjini, affinchì u testu sia quì, hè una opzione assai più sicura, più accessibile è più utilizabile.

        • 4

          Bona Infurmazione, Phil. Pruveraghju à arricchisce questu cun testu ma semplicemente nasconde u testu - cusì un pruduttu accessibile cum'è JAWS leggerà u testu di u ligame è u testu serà visualizatu se CSS o Images sò disattivati.

          Ùn sò micca d'accordu chì l'unica soluzione accessibile seria di mette una Immagine cun un ligame, però.

  2. 5
  3. 8

    L'aghju arrubatu. Eccu, l'aghju dettu.

    Doug, i grafichi sò fantastichi è a codificazione hè cusì incredibilmente simplice chì mi face paura (aghju ghjucatu cù CSS è avà finalmente "capiscu").

    Amparatu u codice per risponde à i mo bisogni, aghju capitu induve abbandunà u bit HTML in, è francamente pare bellu è hà pulitu quella cima di a mo barra laterale chì mi hà guidatu INSANE.

    Puderia ancu avè da cumprà ancu voi u caffè!

  4. 10

    Doug,

    Seraghju una voce dissidente, aduprendu a mo sperienza cum'è esempiu. M'arricordu di i nostri email quandu u mo email di casa cambiò è avete nutatu chì avia da optà solu cù u mo novu. Devu ricunnosce chì aghju avutu un tempu di "scopre" a nova funzione di u vostru situ per optà dinò. Una parte di questu era perchè u ligame originale era un pocu più tradiziunale è mi ne ricordu vagamente quellu. L'altra era perchè a mezza busta laterale ùn mi pareva micca una busta inizialmente. Dopu à circa 5 o più minuti aghju cuminciatu à rotulà u topu annantu à ogni maghjina è quandu u titulu "Arrugà si cù E-mail" mostrava, allora sapiu chì eru in affari. U mo cervellu hà capitu ancu ciò chì era a stampa di u ligame.

    Ma, almenu per mè, una busta laterale ùn era micca intuitiva per mè cum'è u locu per abbonassi à e notifiche per email. È (perchè m'anu dettu di finisce sempre cù qualcosa di bellu) sò d'accordu cù Phil sopra; u metudu hè veramente simplice è tuttu l'articulu funziona assai. Pigliu chì u vostru strumentu di cuncepimentu hà aiutatu à dà e dimensioni esatte per e 3 sezzioni; hè una supposizione curretta? Devu suppurtà cusì, postu chì, se avessi, dicemu, una maghjina larga di 400 pixel, averaghju bisognu di cunnosce i paràmetri adatti, ecc.

  5. 12
    • 13

      William,

      Sembra chì pudete avè un cunflittu trà i vostri nomi di classi di cummentariu è i nomi di classi in u graficu di a barra laterale. Pudete chjamà li in modu diversu per schjarisce u cunflittu. Fatemi sapè sì avete bisognu di una manu!

      Steven

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

    Bellu approcciu, ma aghju bisognu di qualcosa per una carta topografica, allora ùn possu micca aduprà zone rettangulari ... Pensu chì devu aduprà u vechju stile imagemap cù coordinate, ma probabilmente scaveraghju un pocu più in profondità ...

  11. 19

    Grazie per st'infurmazione, Doug. Aviu statu quì nanzu è mi dumandava cumu l'avete fattu. Vuliamu creà una carta cusì per inserisce dopu à i nostri posti, è avà chì avemu i mezi, a pudemu fà. Bravu!

  12. 20
  13. 21

    Salute Doug,
    Aghju lasciatu un cummentariu precedente ma aghju capitu chì ùn aghju mancu appena offertu alcuna visione di u mo dilema. Avemu adattatu un tema di wordpress per aiutà à lancià a nostra sitcom in linea quì:

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

    Avà, viderete chì avemu una bandera di navigazione in cima, una maghjina chì intendiamu cartografà cum'è avemu decine di volte nanzu. / palmforehad. Nisunu di noi capisce veramente CSS, ma inciampemu in modu sufficiente è finu à avà avemu fattu bè finu à questu puntu. U vostru articulu in l'unicu UNU di decine chì furniscenu sò una vera visione di cume aduprà facilmente imagemapping in CSS. Aghju modificatu u fogliu di stile secondu e vostre indicazioni, ma ùn aghju micca idea induve mette u HTML. Tuttu ciò chì hai dettu hè "Aghjunghjite u vostru html ... Hè bellu è simplice" è dopu mi sò arricchitu perchè aghju pensatu .. "micca abbastanza semplice per mè!" Ùn sapia micca chì puderia aghjunghje html in una di queste pagine php in l'editore di tema. Mettu l'html in l'intestazione? U mudellu Indice Principale? E Funzioni? Pigliu chì tutti l'utilizatori di wordpress anu l'opzione di edità u so tema in l'editore di u pannellu, chì pare abbastanza universale in funziunalità. Se puderete suggerisce induve mette u html, mi piacerebbe adattà u codice oru per a mo barra di navigazione.

    Grazie per spartite e vostre cunniscenze cù a cumunità. Sò cuntentu di fassi piglià un caffè.

    • 22

      Salute Phay!

      Tutti i fugliali per u tema di u vostru blog sò dispunibili attraversu u pannellu Amministratore per edità. Se fate cliccà nantu à Presentazione è dopu Editore di Tema, duverete pudè vede un elencu di i vostri fugliali à destra è un editore à manca.

      Se vulete chì questu sia in a vostra barra laterale, avete probabilmente una pagina Sidebar. Cliccate per edità lu è poi mette l'HTML furnitu in a pagina induve vulete.

      Una nota: A mudificazione di u fogliu di stile hè parente à a vostra pagina, dunque duverete caricare a maghjina in u cartulare di l'imaghjini di u tema se l'avete riferitu cum'è l'avete altre immagini in u vostru tema.

      Hope chì aiuta!

    • 23

      Phay,
      Aghju scontru stu situ oghje è aghju avutu u listessu dilema cum'è voi. Vuliu ancu aghjunghje una carta d'imagine à l'imagine di l'intestazione. Dopu avè ghjucatu cun ella per un pezzu, l'aghju capita bè. Mette u div HTML in u fugliale header.php. Aghju messu trà e. Ùn sò micca sicuru se u vostru mudellu hà quella codificazione esatta, ma ghjucate cun ellu in u file header.php è vi capisci.
      -
      Paulu

  14. 24

    Grazie per a risposta rapida!

    No, ùn vulia micca chì sia in a barra laterale, hè in cima à a pagina (pudete vede in u ligame chì aghju furnitu- a barra di navigazione rosa chì dice contant, nantu à u spettaculu ecc.)

    Aghju travagliatu tutta a matinata in u dashboard, sfurtunatamente, ùn sò micca sicuru in chì fugliale aghju piazzatu l'html, cum'è dichjaratu sopra, aghju parechji, header.php, index.php principale, functions.php, footer.php. Ùn sò micca sicuru induve inserisce u codice html. (a prima parte chì avete furnitu, aghju dighjà inseritu u restu in u mo fogliu di stile) Aghju a mo maghjina quì nantu à u situ web, tuttu hè prontu à andà, basta à sapè induve aghjunghje a parte html di u codice per adattassi.

    Grazie mille per u vostru tempu è dumande dumande da un novu.

    Phay

  15. 25

    ... O forse qualchissia puderia invià in i cumenti annantu à chì fugliale piazzemu a parte html di u codice. Un signore uni pochi di posti hà dettu ch'ellu l'hà capitu. Ùn sò micca statu cusì furtunatu.

    Phaylen

  16. 26
  17. 27

    Aghju un infernu di tempu per truvà un modu per incarnà una mappa di immagine cliccabile in wordpress perchè spoglia tag di mappa html. U vostru modu funziona ma una mappa di i Stati Uniti hè ovviamente un modu di cumplessu per avvicinassi cun questu modu. Sò persu.

    Aiutu.

    Pare chì u flash sia a mo sola opzione?

    • 28

      Dave,

      Se mettite l'immagine in u vostru mudellu, andarete bè. Se mettite a mappa di l'immagine in u cuntenutu reale, puderete incontrà prublemi di filtru. U modu chì aghju travagliatu intornu à questu hè terribile, ma à volte aghju utilizatu un iframe.

      Steven

  18. 29

    Salute,

    pare chì a carta di l'imaghjini è i ligami sianu duie cose sfarente, ùn funzionanu micca inseme cum'è cumu si face una carta d'imagine in html

    quandu includu u pusizionamentu di fondu (centru à manca) per a carta di l'imagine, u pusizionamentu di i ligami ùn seguita micca.

    ogni modu per circundà questu? Sò assai dilettante. à ringrazià ti.

  19. 31

    Saria adupratu un approcciu simile per una carta di maghjine più grande è più cumplicata cum'è provu à aduprà?

    Se vedi u mo situ, cliccate nantu à i ligami à manca è vedrete l'immagine chì provu à aduprà cum'è una mappa di l'immagine (sottu l'alfabetu Testi).

    Fondamentalmente, pruvendu à aduprà l'Imagine per andà in ogni sezione di sta lista per lettera.

    Evidentemente, aghju passatu 20 minuti à custruisce una mappa cù GIMP, è dopu WP elimina i tag di a mappa, cusì hè cumu aghju trovu u vostru situ.

    Tuttavia, pudete cuntemplà aduprà Flash

    Grazie.

  20. 33

    Attualmente utilizu un layout di mudellu è editu cù e mo cose. Vogliu aghjunghje una carta di maghjine, ma ùn sò micca sicura induve mette la in u css. l'immagine chì vogliu fà una carta hè in a parte di l'intestazione.

  21. 34

    ciao, aghju custruitu u mo situ web nantu à joomla ... vogliu aduprà stu metudu per fà di u logò di a mo pagina un ligame per a casa, mi sò dettu chì ùn pudete micca fà questu cun joomla ma questu articulu mi dà speranza! l'aiutu per e-mail seria assai apprezzatu ... .grazie

  22. 35

    Salute Doug - Custruiscu una carta d'imagine piuttostu cumplessa basata in css chì hà ancu rollover remoti (in questu casu, u testu si mostra in altrò nantu à a pagina quandu si sposta unu di i punti d'accessu di l'immagine). In ogni modu, aghju scontru u vostru esempiu quì mentre cercava ... è aghju pensatu di sparte u seguitu input:

    1. Per accessibilità, ùn puderete micca aduprà visibilità: nimu (o visualizazione: nimu se l'avete cunsideratu) per piattà u testu quì, cum'è un elementu in stile cù visibilità: nascosta ùn serà micca lettu da i lettori di schermu (quelli chì seguitanu e specifiche) .

    Invece, utilizate una tecnica più robusta di sustituzione di l'imaghjini. Suggerisco sia u metudu Phark sia Gilder / Levin - quessi sò solu i nomi megliu documentati per google per truvà e tecniche di basa. Preferiscu G / L perchè funziona ancu cù CSS attivatu ma l'imagine sò spente.

    2. Mentre ùn a vecu micca rompela (aduprendu FF3), a vostra messa in opera di pusizionamentu hà ancu rischi inerenti. Un elementu assulutamente pusizionatu hè pusizionatu paragunatu à u so parente pusiziunatu u più vicinu. Fondamentalmente, vulete definisce esplicitamente un cuntestu di posizionamentu applicendu 'position: relative' à #subscription. Allora i zitelli (i ligami pusizionati) ponu esse posizionati in quellu genitore. Stu metudu aiuta à assicurà risultati più affidabili in tutti i navigatori.

    Inoltre, duvete poi aduprà e dichjarazioni di pusizionamentu di "top: x" è "left: x" (induve x hè u valore offset, dite in px) piuttostu chè margini per gestisce quellu pusizionamentu. Di novu, ùn ne vecu micca necessariamente chì rompe u modu in cui l'avete, ma in cima è in sinistra sò destinati à questu allora perchè ùn li usanu? In più, avete floats è marghjini nantu à u listessu elementu, chì in cundizioni specifiche causanu u bug di "doppiu margine" in IE6 (avete pruvatu questu quì?) - mentre ci hè una riparazione, evitate quellu prublema interamente aduprendu top è manca invece di margini per u pusizionamentu in questu casu.

    3. Infine, perchè ùn aduprà micca una lista semanticamente sana senza ordine per questi ligami invece di u div senza significatu?

    Mi dispiace per droning in ... Mi piace solu à sparte, b / c Sò per l'esperienza cumu ci sò assai modi diversi per aduprà CSS per uttene u risultatu desideratu, ma certi modi funzionanu sicuramente megliu (più affidabile, cross-browser) di l'altri . HTH.

  23. 36
  24. 37
  25. 38

    Ti ringraziu assai!! E vostre istruzzioni mi anu risparmiatu ORE DI travagliu ... Sò novu in u sviluppu di u web, è aghju solu suffertu per mezu di u mo primu grande prughjettu. Aghju fattu ... u cliente hè felice, extaticu in realtà, è cusì sò eiu!

  26. 39

    Salutu, ti ringraziu assai per avè postu questu! Anni dopu è aiuta sempre ... bellu! Sto luttendu per uttene a mo mappa di immagine per ligà in u locu ghjustu. Aghju una bandera è vogliu chì l'icone suciale in cima à a diritta di a bandera liganu cù u codice chì avete furnitu. Funziona bè, eccettu chì facciu qualcosa di male perchè i mo ligami apparsu nantu à u latu superiore sinistro di u schermu, micca sopra l'icone suciale, ma sopra u logò. Sò sicuru chì hè qualcosa di simplice, ma ùn la possu capì solu. Pensu di sparte lu quì in casu chì avete qualchì intuizione. Grazie dinò per avè publicatu questu!

Chì ne pensi?

Stu situ utilizeghja Akismet per reducisce u puzzicheghju. Sapete ciò chì i dati di i vostri dati è processatu.