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, chì pare un bellu metudu, ma hè assai inaccessibile.

    Cunsiderate un utilizatore cecu cù un lettore di schermu, un utilizatore cù un navigatore solu di testu o qualcunu chì visita u situ senza CSS o Images attivati ​​(cum'è, forse un utilizatore mobile chì cerca u ligame à u vostru situ amichevule mobile). Nisunu di elli ùn sanu di quelli trè ligami perchè ùn anu micca testu. Se l'imaghjini sò disattivati, un utilizatore ùn vede ancu u testu alternativu per descriverà ciò chì ci saria statu perchè hè una immagine di fondo.

    Megliu seria di taglià l'imaghjini, ligami, mette in una lista è float à fiancu à l'altru. O ancu aduprà u testu per i ligami è rimpiazzà u testu utilizendu una tecnica standard di sustituzione di l'imagine. Questu pare cunvene, ma rende e cose assai più difficili / impussibili per quelli chì ùn utilizanu micca un navigatore gràficu standard.

    • 2
      • 3

        Doug,

        JAWS ùn leghje micca i tituli di ligami per difettu, ma avete ragione, pò fà. Perchè cercà i tituli di ligami se ùn sapete micca chì era quì, è ancu s'ellu era, di sicuru, questu scende à un prublema di usabilità chì significa chì dete à l'utilizatori menu capaci di una seconda esperienza di usu di u vostru situ.

        Per i navigatori di testu, l'articulu chì mi indicate versu quellu Lynx permette ancu di fà una lista di tituli di ligami, ma u mo puntu ferma chì, s'ellu ùn sapete micca chì ci era un ligame, perchè ùn ci era micca testu in u primu locu. , perchè cercà u testu di u titulu ?

        Infine, l'attributi di u titulu di ligame ùn appariranu micca per nimu chì naviga senza l'imaghjini attivati ​​o senza CSS attivatu.

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

        Hè per quessa chì l'usu di una maghjina, cusì chì u testu alternativu pò esse lettu, o rimpiazzamentu di l'imaghjini, perchè u testu hè quì, hè una opzione assai più sicura, più accessibile è più utilizable.

        • 4

          Bona infurmazione, Phil. Pruvaraghju di rinfurzà questu cù u testu, ma solu oculta u testu - cusì un pruduttu accessibile cum'è JAWS leghje u testu di u ligame è u testu serà visualizatu se CSS o Images sò disattivati.

          Ùn sò d'accordu chì l'unica suluzione accessibile seria di mette una Image cù un ligame, però.

  2. 5
  3. 8

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

    Doug, i grafici sò fantastichi è a codificazione hè cusì incredibbilmente simplice chì mi spaventa (aghju ghjucatu cù CSS è avà aghju finalmente "capitu").

    Tweaked up u codice per risponde à i mo bisogni, capitu induve abbandunà u bit HTML, è francamente pare bellu è hà pulitu quellu cima di a mo sidebar chì m'hà guidatu INSANE.

    Puderia avè da cumprà ancu quellu caffè!

  4. 10

    Doug,

    Seraghju una voce dissidente, usendu a mo sperienza cum'è un esempiu. Mi ricordu di i nostri emails quandu u mo email di casa hà cambiatu è avete nutatu chì aghju avutu solu optà cù u mo novu. Devu ricunnosce chì aghju avutu un diaculu di "scuperta" a nova funzione in u vostru situ per optà di novu. Una parte di questu era perchè u ligame originale era un pocu più tradiziunale è mi ricurdava vagamente di quellu. L'altru era perchè a mezza busta laterale ùn mi pareva micca cum'è una busta inizialmente. Dopu à circa 5 o più minuti, aghju cuminciatu à rottà u mo mouse nantu à ogni maghjina è quandu u titulu "Subscribe with Email" hà dimustratu, allora sapia chì era in affari. U mo cervellu hà ancu capitu ciò chì era a stampa di ligame.

    Ma, almenu per mè, un bustu laterale ùn era micca intuitivu per mè cum'è u locu per abbunà à e notificazioni per email. È (perchè mi era dettu di finisce sempre cù qualcosa di bellu) sò d'accordu cù Phil sopra; u metudu hè veramente simplice è tuttu l'articulu funziona bè. Pigliu u vostru strumentu di cuncepimentu hà aiutatu à dà e dimensioni esatti per e rùbbriche 3; hè una supposizione curretta? Aghju da assumisce cusì, postu chì s'ellu avia, per dì, una maghjina larga di 400 pixel, avissi bisognu di cunnosce i paràmetri ghjusti, etc.

  5. 12
    • 13

      Guglielmu,

      Sembra chì pudete avè un cunflittu trà i vostri nomi di classi di cumenti è i nomi di classi in u graficu di a barra laterale. Puderete chjamà in modu diversu per sguassà u cunflittu. Fatemi sapè s'ellu 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 mappa topografica, cusì ùn possu micca aduprà zoni rectanguli ... Pensu chì aghju da aduprà a mappa di l'imaghjini di u vechju stile cù coordenate, ma probabilmente scavà un pocu più in fondu ...

  11. 19

    Grazie per questa infurmazione, Doug. Eru statu quì prima è mi dumandava cumu avete fattu. Vulemu crià una mappa cusì per inserisce dopu à i nostri posti, è avà chì avemu i mezi, pudemu fà. Bravu !

  12. 20
  13. 21

    Ciao Doug,
    Aghju lasciatu un cummentariu precedente, ma aghju capitu chì ùn aghju micca offrittu una visione di u mo dilema. Avemu adattatu un tema wordpress per aiutà à lancià a nostra sitcom in linea quì:

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

    Avà, vi vede chì avemu un banner di navigazione in cima, una maghjina chì avemu intesu à mape cum'è avemu avutu decine di volte prima. / palma davanti. Nisunu di noi capisce veramente CSS, ma ci inciampamu abbastanza è finu à quì avemu fattu bè finu à questu puntu. U vostru articulu in u SOLO UNU fora di decine chì furnite sò una vera insight nantu à cumu utilizà l'imaghjini in CSS facilmente. Aghju editatu u fogliu di stile secondu e vostre direzzione, ma ùn aghju micca idea di induve mette l'HTML. Tuttu ciò chì avete dettu hè "Aggiungi u vostru html... Hè bellu è simplice" è dopu mi sò stracciatu perchè pensava .. "Ùn hè micca abbastanza simplice per mè!" Ùn sapia micca chì puderia aghjunghje html in qualsiasi di queste pagine php in l'editore di tema. Puderaghju l'html in l'intestazione? U mudellu di l'Indice Principale ? E Funzioni ? Supponu chì tutti l'utilizatori di wordpress anu l'opzione di edità u so tema in l'editore di u dashboard, chì pare abbastanza universale in funziunalità. Se pudete suggerisce induve mette l'html, mi piacerebbe adattà u codice oru per a mo barra di navigazione.

    Grazie per sparte a vostra cunniscenza cù a cumunità. Sò felice di piglià un caffè.

    • 22

      Ciao Phay!

      Tutti i schedarii per u tema di u vostru blogu sò dispunibuli attraversu u pannellu Admin per edità. Se cliccate nantu à Presentazione è dopu Editore di Temi, duvete esse capace di vede una lista di i vostri schedari à a diritta è un editore à a manca.

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

      Una nota: L'editazione di u fogliu di stile hè relative à a vostra pagina, cusì avete bisognu di cullà l'imaghjini à u repertoriu di l'imaghjini di u tema s'ellu si riferite cum'è l'altri imagine in u vostru tema.

      Hope chì aiuta!

    • 23

      Phay,
      Aghju trovu stu situ oghje è aghju avutu u listessu dilema cum'è voi. Vuliu ancu aghjunghje una mappa di l'imaghjini à l'imaghjini di l'intestazione. Dopu à ghjucà cun ellu per un tempu, aghju avutu bè. Mettite u div HTML in u schedariu header.php. L'aghju messu trà è. Ùn sò micca sicuru se u vostru mudellu hà quella codificazione precisa, ma ghjucate cun ellu in u schedariu header.php è l'avete da capisce.
      -
      Paulu

  14. 24

    Grazie per a risposta rapida!

    Innò, ùn vulia micca esse in a barra laterale, hè in cima di a pagina (pudete vede in u ligame chì aghju furnitu - a barra di navigazione rosa chì dice cuntant, nantu à u spettaculu ect..)

    Aghju travagliatu in u dashboard tutta a matina, sfurtunatamenti, ùn sò micca sicuru in quale fugliale aghju postu l'html, cum'è dettu sopra, aghju parechji, header.php, main index.php, functions.php, footer.php. Ùn sò micca sicuru d'induve inserisce u codice html. (a prima parte chì avete furnitu, aghju digià inseritu u restu in u mo fogliu di stile) Aghju a mo maghjina quì nantu à u situ web, tuttu hè prestu per andà, solu bisognu di sapè induve aghjunghje a parte html di u codice per adattà.

    Grazie mille per u vostru tempu è risponde à e dumande da un principiante.

    fresatura

  15. 25

    ... O forse qualcunu puderia postà in i cumenti nantu à quale fugliale pusemu a parte html di u codice in. Un signore uni pochi di posti hà dettu chì l'hà capitu. Ùn aghju micca statu cusì furtunatu.

    Phaylen

  16. 26
  17. 27

    Aghju avutu un infernu di tempu à truvà un modu per incrustà una mappa di l'imaghjini clicchendu in wordpress perchè sguassate i tag di mappa html. U vostru modu funziunaria, ma una mappa di i Stati Uniti hè ovviamente un modu cumplessu per sbuccà cù questu modu. Sò persu.

    Aiutu.

    Sembra chì u flash hè a mo unica opzione?

    • 28

      Dave,

      Se mette l'imaghjini in u vostru mudellu, sarete bè. Se mette u mapu di l'imaghjini in u cuntenutu propiu, pudete curriri à prublemi di filtru. U modu ch'e aghju travagliatu in questu hè terribili, ma à volte aghju utilizatu un iframe.

      Steven

  18. 29

    Salute,

    Sembra chì a mappa di l'imaghjini è i ligami sò duie cose diverse, ùn funzionanu micca cum'è una mappa d'imaghjini in html.

    Quandu aghju includeu pusizziunamentu di fondo (centru à manca) per a mappa di l'imaghjini, u posizionamentu di i ligami ùn seguita micca.

    un modu per aggirari questu? sò assai dilettante. grazie.

  19. 31

    Un approcciu simile seria usatu per una mappa di l'imaghjini più grande è più cumplicata cum'è aghju pruvatu à aduprà?

    Se vi vede u mo situ, cliccate nantu à i ligami à a manca è vi vede l'imaghjini chì pruvate d'utilizà cum'è una mappa d'imaghjini (sottu l'alfabetu di testu).

    In fondu, pruvate d'utilizà l'Image per andà in ogni rùbbrica di sta lista per lettera.

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

    Eppuru, pudete cuntemplà l'usu di Flash

    Grazie.

  20. 33

    Attualmente aghju utilizatu un layout di mudellu è edità cù e mo cose. Vogliu aghjunghje una mappa di l'imaghjini, ma ùn sò micca sicuru d'induve mette in u css. l'imaghjini chì vogliu fà una mappa hè in a parte di l'intestazione.

  21. 34

    ciao, aghju custruitu u mo situ web in joomla ... vogliu aduprà stu metudu per fà u logu di a mo pagina un ligame à a casa, mi sò dettu chì ùn pudete micca fà questu cù joomla ma questu articulu mi dà speranza! L'aiutu per email seria assai apprezzatu ... grazie

  22. 35

    Ciao Doug - Custruisce una mappa d'imaghjini basata in css piuttostu cumplessa chì hà ancu rollovers remoti (in questu casu, u testu si mostra in altrò in a pagina quandu si passanu unu di i hotspot di l'imaghjini). In ogni modu, aghju scontru u vostru esempiu quì durante a ricerca ... è aghju pensatu di sparte l'input seguenti:

    1. Per l'accessibilità, ùn deve micca aduprà visibility:none (o display:none se avete cunsideratu chì) per ammuccià u testu quì, cum'è un elementu stilatu cù visibilità: hidden ùn serà micca lettu da i lettori di schermu (quelli chì seguitanu spec) .

    Invece, aduprate una tecnica di sustituzione di l'imagine più robusta. Suggeriu o u metudu Phark o Gilder / Levin - sò solu i nomi più documentati per google per truvà e tecniche basiche. Preferite G / L cum'è funziona ancu cù CSS attivatu ma l'imaghjini sò disattivati.

    2. Mentre ùn l'aghju micca vedutu (usendu FF3), a vostra implementazione di posizionamentu hà ancu risichi inherenti. Un elementu assolutamente posizionatu hè posizionatu relative à u so parente più vicinu. In fondu, vulete stabilisce esplicitamente un cuntestu di pusizzioni appiendu "posizione: relative" à #abbonamentu. Allora i zitelli (i ligami posizionati) ponu esse posizionati in quellu genitore. Stu metudu aiuta à assicurà risultati più affidabili in i navigatori.

    Inoltre, duvete aduprà e dichjarazioni di pusizzioni di "top: x" è "left: x" (induve x hè u valore offset, per dì in px) piuttostu cà i marghjini per trattà quellu posizionamentu. Di novu, ùn aghju micca necessariamente vede chì rompe a manera chì l'avete, ma a cima è a manca sò destinate à questu, perchè ùn l'utilizanu micca? In più, avete float è marghjini stabiliti nantu à u stessu elementu, chì in cundizioni specifiche causanu u bug "doppiu margine" in IE6 (avete pruvatu questu quì?) - Mentre ci hè una correzione, eviterete stu prublema cumplettamente usendu u top. è lasciate invece di margini per u pusizioni in questu casu.

    3. Infine, perchè ùn aduprate micca una lista semantica senza ordine per questi ligami invece di u div senza significatu?

    Scusate per droning ... Mi piace solu à sparte, b / c So per l'esperienza cumu ci sò parechje modi diffirenti di utilizà CSS per ottene u risultatu desideratu, ma certi modi certamente funzionanu megliu (più affidabile, cross-browser) cà l'altri. . HTH.

  23. 36
  24. 37
  25. 38

    Ti ringraziu assai!! I vostri struzzioni m'hà salvatu ORE di travagliu ... Sò novu in u sviluppu web, è aghju patitu solu per u mo primu grande prughjettu. L'aghju fattu ... u cliente hè felice, ecstatic in realtà, è cusì sò!

  26. 39

    Hola, grazie mille per avè publicatu questu! Anni dopu è hè sempre aiutu ... bellu! Luttu per ottene a mo mappa di l'imaghjini per ligà in u locu ghjustu. Aghju un banner è vogliu chì l'icone suciali in a destra superiore di u banner ligame cù u codice chì avete furnitu. Funziona bè, salvu ch'e aghju fattu qualcosa di sbagliatu perchè i mo ligami appariscenu in u latu di l'estrema sinistra di u screnu, micca sopra l'icone suciale, ma sopra u logò. Sò sicuru chì hè qualcosa di simplice, ma ùn possu micca capisce. Pensu chì l'aghju da sparte quì in casu avete qualchì intuizione. Grazie di novu 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.