Kuinka luoda kuvakartta CSS: llä

vaihtoehdot

Halusin jotain nörttiä, joten päätin taskukuvasta, joka sisältää kaikki blogini tilausmenetelmät.

Web 1.0: n päivinä tällainen linkkikokoelma voitaisiin rakentaa yhdistämällä kuvasi linkkeihin jokaiseen grafiikkaan ja yrittämällä sitten ommella kaikki takaisin yhteen taulukon kanssa. Se voidaan saavuttaa myös käyttämällä kuvakartta mutta se vaatii yleensä työkalun koordinaattijärjestelmän rakentamiseksi. Cascading Style Sheets -sovelluksen käyttö tekee siitä paljon helpompaa ... ei kuvien liittämistä eikä yritä löytää työkalua koordinaatistosi rakentamiseen!

  1. Rakenna kuvasi, jota haluat käyttää. Voit käyttää tätä kuvaa alla (napsauta hiiren kakkospainikkeella ja tallenna ladattavaksi):
    Vaihtoehdot
  2. Lähetä kuva hakemistoon, joka on suhteessa CSS: ään. WordPressissä tämä voidaan tehdä helpoimmin sijoittamalla se teemahakemistosi kuvakansioon.
  3. Lisää HTML. Se on mukavaa ja yksinkertaista ... div, jossa on kolme linkkiä:
    > div id = "tilaa">> a id = "rss" href = "[syötelinkkisi]" title = "Tilaa RSS: llä" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[sähköpostiosoitteesi tilauslinkki]" title = "Tilaa sähköpostilla" >> span class = "hide"> Sähköposti> / span >> / a>> a id = "mobile" href = "[your mobile link]" title = "Näytä mobiiliversio" >> span class = "hide"> Mobile> / span >> / a>> / div>
    
  4. Muokkaa CSS-tyylisivua. Lisäät 6 erilaista tyyliä. Yksi tyyli yleiselle div: lle, yksi tagille, jotta se ei näytä tekstiä, yksi tyyli tekstin piilottamiseksi (käytetään esteettömyyden vuoksi) ja yksi tyylimääritys kullekin linkille:
    #subscribe {/ * taustakuvan lohko * / display: block; leveys: 215px; korkeus: 60px; tausta: url (images / options.png) ei toista; marginaalin yläosa: 0 kuvapistettä; } #tilaa {text-decoration: none; } .hide {visibility: hidden; } #rss {/ * RSS-linkki * / float: vasen; sijainti: absoluuttinen; leveys: 50px; korkeus: 50px; marginaali vasemmalla: 20px; yläreuna: 5 kuvapistettä; } #email {/ * Email Link * / float: vasen; sijainti: absoluuttinen; leveys: 50px; korkeus: 50px; marginaali vasemmalla: 70px; yläreuna: 5 kuvapistettä; } #mobile {/ * Mobile Link * / float: vasen; sijainti: absoluuttinen; leveys: 50px; korkeus: 50px; marginaali vasemmalla: 130 kuvapistettä; yläreuna: 5 kuvapistettä; }

Sijoittaminen on mukavaa ja yksinkertaista ... lisää korkeus ja leveys ja aseta sitten vasen marginaali kuvan vasemmalta puolelta ja yläreuna kuvan yläpuolelta!

Tämä "Kuinka" -viesti on tarkoitettu Nörtit ovat seksikäs lopullinen “How To” -kilpailu! Yksi huomautus, on totta, että kuvakartalla voi olla paljon monimutkaisempia polygoneja, mutta en ole oikeastaan ​​nähnyt liikaa paikkoja, joissa sen on oltava. Huomasin, että iso n RSS-kuva Geeksissä on seksikäs sivupalkki ... se on hyvä paikka linkille. 😉

PÄIVITETTY 10 parempaan saavutettavuuteen Phil!

Sponsori: Jos olet vasta aloitteleva verkkosuunnittelussa, rakenna oma verkkosivustosi oikealla tavalla HTML- ja CSS-ohjelmien avulla, 2. painos on pakollinen. Tässä helppokäyttöisessä oppaassa opit rakentamaan verkkosivuston parhaalla mahdollisella tavalla - tekemällä sen itse!

41 Kommentit

  1. 1

    Doug, se näyttää hyvältä menetelmältä, mutta siihen ei pääse.

    Tarkastellaan sokeaa käyttäjää, jolla on näytönlukija, käyttäjää, jolla on vain teksti-selain, tai ketään, joka vierailee sivustolla ilman CSS: ää tai kuvia (kuten esimerkiksi mobiilikäyttäjä, joka etsii linkkiä mobiililaitteille sopivaan sivustoon). Kukaan heistä ei tiedä näistä kolmesta linkistä, koska heillä ei ole tekstiä. Jos kuvat ovat poissa käytöstä, käyttäjä ei edes näe vaihtoehtoista tekstiä kuvaamaan mitä siellä olisi ollut, koska se on taustakuva.

    Parempi olisi leikata kuvat, linkittää ne, laittaa ne luetteloon ja kelluttaa ne vierekkäin. Tai edes käytä linkkien tekstiä ja korvaa teksti tavallisella kuvanvaihtotekniikalla. Tämä tuntuu kätevältä, mutta se tekee asiat paljon vaikeammaksi / mahdottomammaksi niille, jotka eivät käytä tavallista graafista selainta.

    • 2
      • 3

        Doug,

        JAWS ei lue linkkien otsikoita oletuksena, mutta olet oikeassa, se voi. Miksi etsit linkkien nimikkeitä, jos et tiennyt, että se oli siellä, ja vaikka olisitkin, tämä varmasti putoaa käytettävyysongelmaan, mikä tarkoittaa, että annat vähemmän tukeville käyttäjille toisen luokan kokemuksen sivustosi käytöstä.

        Tekstiselaimille artikkeli, johon osoitat minut, että Lynx, antaa sinun myös tuoda esiin luettelon linkkien otsikoista, mutta huomautan edelleen, että jos et tiennyt, että siellä oli linkki, koska tekstiä ei ollut alun perin , miksi etsit otsikkotekstiä?

        Lopuksi, linkin otsikkomääritteet eivät silti näy kenellekään, joka selaa ilman kuvia otettu käyttöön tai ilman CSS: ää.

        Joten kyllä, linkit otsikoihin ovat parempia kuin ilman, mutta tässä tapauksessa se on vain marginaalinen.

        Siksi kuvan käyttäminen, jotta alt-teksti voidaan lukea, tai kuvan korvaaminen siten, että teksti on siellä, on paljon turvallisempi, helpommin käytettävissä oleva ja käyttökelpoisempi vaihtoehto.

        • 4

          Hyvä tieto, Phil. Yritän parantaa tätä tekstillä, mutta yksinkertaisesti piilottaa tekstin - siten helposti saatavilla oleva tuote, kuten JAWS, lukee linkkitekstin ja teksti näytetään, jos CSS tai Kuvat on poistettu käytöstä.

          Olen eri mieltä siitä, että ainoa käytettävissä oleva ratkaisu olisi kuitenkin laittaa kuva linkillä.

  2. 5
  3. 8

    Varastin sen. Siellä sanoin sen.

    Doug, grafiikka on upeaa ja koodaus on niin uskomattoman yksinkertaista, että se pelottaa minua (olen pelannut CSS: n kanssa ja nyt vihdoin "saan sen").

    Muuttanut koodia vastaamaan tarpeitani, tajunnut, mihin HTML-bitti pudotetaan, ja rehellisesti sanottuna se näyttää hyvältä ja on puhdistanut sivupalkkini sen yläosan, joka on ajanut minut hulluksi.

    Minun on ehkä vielä ostettava sinulle kahvia!

  4. 10

    Doug,

    Minusta tulee erimielinen ääni, käyttäen kokemustani esimerkkinä. Muistan sähköpostimme, kun kotisähköpostini muuttui ja huomasit, että minun oli yksinkertaisesti valittava uusi. Minun on myönnettävä, että minulla oli helvetti aikaa "löytää" uusi ominaisuus sivustollasi, jotta voin valita uudelleen. Osa tästä johtui siitä, että alkuperäinen linkki oli hieman perinteisempi ja muistan sen hämärästi. Toinen johtui siitä, että sivuttain oleva puolikuori ei vain näyttänyt minulle alun perin kirjekuorelta. Noin viiden tai useamman minuutin kuluttua aloitin hiiren vierittämisen jokaisen kuvan päälle ja kun "Tilaa sähköpostilla" -otsikko näytti, tiesin, että olen liike-elämässä. Aivoni selvittivät myös linkkikuvan.

    Mutta ainakin minulle, sivuttain kirjekuori ei vain ollut intuitiivinen minulle kuin paikka tilata sähköposti-ilmoituksia. Ja (koska minun käskettiin lopettaa aina jollakin mukavalla), olen samaa mieltä Philin kanssa; menetelmä on todella yksinkertainen ja koko kohde toimii hyvin. Katson, että suunnittelutyökalusi auttoi antamaan sinulle tarkat mitat 3 osalle; onko se oikea oletus? Minun on oletettava niin, koska jos minulla olisi esimerkiksi 400 pikselin levyinen kuva, minun olisi tiedettävä oikeat asetukset jne.

  5. 12
    • 13

      William,

      Näyttää siltä, ​​että kommentti- ja sivupalkkikuvassa olevien luokkien nimien välillä saattaa olla ristiriita. Voit nimetä ne eri tavalla konfliktin selvittämiseksi. Kerro minulle, jos tarvitset kättä!

      Doug

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

    Hieno lähestymistapa, mutta tarvitsen jotain topografiseen karttaan, joten en voi käyttää suorakulmioalueita ... Luulen, että minun on käytettävä vanhan tyylin kuvakarttaa koordinaateilla, mutta luultavasti kaivan hieman syvemmälle ...

  11. 19

    Kiitos tästä tiedosta, Doug. Olin ollut täällä aiemmin ja ihmettelin, miten teit sen. Halusimme luoda sellaisen kartan, joka lisätään viesteihimme, ja nyt kun meillä on keinot, voimme tehdä sen. Bravo!

  12. 20
  13. 21

    Hei Doug,
    Jätin edellisen kommentin, mutta tajusin, että tuskin tarjosin lainkaan käsitystä dilemmastani. Olemme mukauttaneet WordPress-teemaa auttamaan meitä käynnistämään online-sitcomimme täällä:

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

    Näet nyt, että ylhäällä on navigointibanneri, kuva, jonka aiomme kartoittaa, kuten meillä on kymmeniä kertoja aiemmin. / palmforehad. Kukaan meistä ei oikeastaan ​​ymmärrä CSS: ää, mutta kompastelemme riittävästi ja olemme toistaiseksi olleet kunnossa tähän asti. Artikkelisi AINOASTA kymmenestä toimitetusta artikkelista on todellinen käsitys siitä, miten kuvankartoitusta voidaan hyödyntää helposti CSS: ssä. Kirjoitin tyylitaulukon ohjeidesi mukaan, mutta minulla ei ole aavistustakaan, mihin HTML sijoitetaan. Kaikki mitä sanoit on "Lisää html ... Se on mukavaa ja yksinkertaista" ja sitten kuristin, koska ajattelin .. "ei tarpeeksi yksinkertainen minulle!" En tiennyt, että voisin lisätä html: n mihin tahansa näistä PHP-sivuista teemaeditorissa. Sijoitetaanko html otsikkoon? Päähakemisto? Toiminnot? Oletan, että kaikilla WordPress-käyttäjillä on mahdollisuus muokata teemaansa kojelaudan muokkausohjelmassa, joka näyttää melko universaalilta toiminnaltaan. Jos voisit ehdottaa html: n sijoittamista, haluaisin mukauttaa oru-koodin navigointipalkkiini.

    Kiitos, että jaoit tietosi yhteisön kanssa. Olen iloinen saadessani sinulle kahvia.

    • 22

      Hei Phay!

      Kaikki blogisi teeman tiedostot ovat muokattavissa hallintapaneelin kautta. Jos napsautat Esitys ja sitten Teemaeditori, sinun pitäisi pystyä näkemään luettelo tiedostoistasi oikealla ja muokkaus vasemmalla.

      Jos haluat tämän olevan sivupalkissasi, sinulla on todennäköisesti sivupalkkisivu. Napsauta muokata sitä ja aseta sitten annettu HTML-koodi haluamaasi sivuun.

      Yksi huomautus: Tyylitaulukon muokkaus on suhteellinen sivullesi, joten sinun on ladattava kuva teemakuvien hakemistoon, jos viitat siihen samoin kuin muihin teeman kuviin.

      Toivon, että auttaa!

    • 23

      Phay,
      Tunsin tämän sivuston tänään ja minulla oli sama ongelma kuin sinulla. Halusin myös lisätä kuvakartan otsikkokuvaan. Pelattuani sen kanssa jonkin aikaa, sain sen oikein. Laita div HTML otsikkotiedostoon header.php. Laitoin sen väliin ja. Et ole varma, onko mallissasi tarkka koodaus, mutta pelaa sen kanssa header.php-tiedostossa ja selvität sen.
      -
      Paavali

  14. 24

    Kiitos nopeasta vastauksesta!

    Ei, en halunnut sen olevan sivupalkissa, se on sivun yläreunassa (näet antamastani linkistä - vaaleanpunainen siirtymispalkki, joka sanoo contant, näyttelystä jne.)

    Olen työskennellyt kojelaudassa koko aamun, valitettavasti en ole varma mihin tiedostoon sijoitan html: n, kuten edellä todettiin, minulla on useita otsikkotiedostoja, header.php, main index.php, functions.php, footer.php. En ole varma, mihin lisätä HTML-koodi. (ensimmäinen osa, jonka annoit, olen jo lisännyt loput tyylitaulukkooni) Minulla on kuvani verkkosivustolla, kaikki on valmis menemään, minun on vain tiedettävä, mihin lisätä koodin HTML-osa mukauttamista varten.

    Kiitos paljon ajastasi ja aloittelijan kysymysten esittämisestä.

    Phay

  15. 25

    … Tai ehkä joku voisi lähettää kommentteihin, mihin tiedostoon sijoitamme koodin HTML-osan. Eräs herra muutama viesti ylöspäin sanoi, että hän tajusi sen. En ole ollut niin onnekas.

    Phaylen

  16. 26
  17. 27

    Minulla on helvetin aika löytää tapa upottaa napsautettava kuvakartta wordpressiin, koska se poistaa HTML-karttatunnisteet. Sinun tapasi toimisi, mutta Yhdysvaltain kartta on tietysti tapa monimutkainen ruuvata tällä tavalla. Olen eksyksissä.

    Auta.

    Näyttää siltä, ​​että salama on ainoa vaihtoehto?

    • 28

      Dave,

      Jos laitat kuvan malliin, olet kunnossa. Jos laitat kuvakartan todelliseen sisältöön, saatat joutua suodatinongelmiin. Tapa, jolla olen kiertänyt tämän, on kauheaa, mutta joskus olen käyttänyt iframe-kehystä.

      Doug

  18. 29

    Hei,

    näyttää siltä, ​​että kuvakartta ja linkit ovat kaksi erilaista asiaa, ne eivät toimi yhdessä kuten html: n kuvakartta

    kun sisällytän taustakohdistuksen (keskellä vasemmalla) kuvakartalle, linkkien paikannus ei seuraa.

    mitään keinoa kiertää tätä? Olen hyvin amatööri. Kiitos.

  19. 31

    Käytetäänkö vastaavaa lähestymistapaa suurempaan ja monimutkaisempaan kuvakarttaan, jota yritän käyttää?

    Jos tarkastelet sivustoani, napsauta vasemmalla olevia linkkejä ja näet kuvan, jota yritän käyttää kuvakarttana (Tekstin aakkoset).

    Pohjimmiltaan yrittää käyttää kuvaa siirtyäksesi luettelon kullekin osalle kirjaimellisesti.

    Ilmeisesti vietin 20 minuuttia kartan rakentamiseen GIMP: llä ja sitten WP poistaa karttatunnisteet, joten löysin sivustosi.

    Voi kuitenkin harkita Flashin käyttöä

    Kiitos.

  20. 33

    Käytän tällä hetkellä mallin asettelua ja muokkausta omien juttujen kanssa. Haluan lisätä kuvakartan, mutta en ole varma, mihin se sijoitetaan css: ssä. kuva, josta haluan tehdä kartan, on otsikko-osassa.

  21. 34

    hei, rakensin verkkosivustoni joomlaan ... Haluan käyttää tätä tapaa tehdä sivuni logosta linkki kotiin, minulle on kerrottu, että en voi tehdä sitä joomlan kanssa, mutta tämä artikkeli antaa minulle toivoa! apua sähköpostilla olisi erittäin arvostettu .... kiitos

  22. 35

    Hei Doug - Rakennan melko monimutkaista css-pohjaista kuvakarttaa, jolla on myös etäkäynnistyksiä (tässä tapauksessa teksti näkyy muualla sivulla, kun viet hiirellä yhtä kuvan kohdepisteistä). Joka tapauksessa törmäsin esimerkkiin täällä tutkiessani sitä ... ja ajattelin jakaa seuraavan syötteen:

    1. Esteettömyyden vuoksi sinun ei pidä käyttää visibility: none (tai display: none, jos pidät tätä) tekstin piilottamiseen täällä, näkyvyyden tyylisenä elementtinä: piilotetut eivät luke ruudunlukijat (ne, jotka seuraavat spesifikaatioita) .

    Käytä sen sijaan vankempaa kuvanvaihtotekniikkaa. Ehdotan joko Phark-menetelmää tai Gilder / Leviniä - nämä ovat vain paremmin dokumentoituja nimiä Googlelle perustekniikoiden löytämiseksi. Pidän parempana G / L: stä, koska se toimii myös CSS: n kanssa, mutta kuvat on kytketty pois päältä.

    2. Vaikka en näe sen hajoavan (käyttämällä FF3: ta), paikannuksen toteuttamisellasi on myös luontaisia ​​riskejä. Ehdottomasti sijoitettu elementti on sijoitettu suhteessa lähimpään sijoitettuun vanhempaansa. Pohjimmiltaan haluat asettaa nimenomaisesti paikannuskontekstin soveltamalla 'position: relatiivinen' # tilaukseen. Sitten lapset (sijoitetut linkit) voidaan sijoittaa kyseiseen vanhempaan. Tämä menetelmä varmistaa luotettavammat tulokset selaimissa.

    Sitten sinun tulisi käyttää sijainnin määrityksiä "top: x" ja "left: x" (missä x on siirtymäarvo, esimerkiksi pikselinä) marginaalien sijasta. Jälleen, en välttämättä näe, että se rikkoo tapaa, jolla sinulla on, mutta ylhäältä ja vasemmalta on tarkoitettu tähän, joten miksi et käytä niitä? Lisäksi sinulla on samalle elementille asetetut kellukkeet ja marginaalit, jotka tietyissä olosuhteissa aiheuttavat IE6: n kaksoismarginaalin virheen (testasitko sen siellä?) - vaikka korjaus on olemassa, vältät ongelman kokonaan käyttämällä top ja vasemmalle sijainnin marginaalien sijasta tässä tapauksessa.

    3. Lopuksi, miksi et käytä näille linkeille semanttisesti äänetöntä järjestämätöntä luetteloa merkityksettömän div: n sijaan?

    Anteeksi, että lennätin edelleen ... Haluan vain jakaa, b / c Tiedän kokemuksestani, kuinka CSS: ää voidaan käyttää monilla eri tavoilla halutun tuloksen saavuttamiseksi, mutta jotkut tapat toimivat varmasti paremmin (luotettavammin, selaimen yli) kuin toiset . HTH.

  23. 36
  24. 37
  25. 38

    Kiitos paljon!! Ohjeesi säästivät TUNTIA työtä ... Verkkokehityksessä olen uusi ja kärsin juuri ensimmäisen suuren projektini kautta. Tein sen ... asiakas on onnellinen, todella hurmioitunut, ja niin olen myös minä!

  26. 39

    Hei, kiitos paljon tämän lähettämisestä! Vuosia myöhemmin, ja se auttaa edelleen ... mukavaa! Minulla on vaikeuksia saada kuvakartta linkittymään oikeaan paikkaan. Minulla on banneri ja haluan, että bannerin oikeassa yläkulmassa olevat sosiaaliset kuvakkeet linkittyvät antamaasi koodilla. Se toimii hyvin, paitsi että teen jotain väärin, koska linkkini näkyvät näytön vasemmassa yläkulmassa, ei sosiaalisten kuvakkeiden, vaan logon päällä. Olen varma, että se on jotain yksinkertaista, mutta en vain ymmärrä sitä. Ajattelin jakaa sen täällä, jos sinulla on oivalluksia. Kiitos vielä kerran tämän lähettämisestä!

Mitä mieltä olet?

Tämä sivusto käyttää Akismetiä roskapostin vähentämiseksi. Lue, miten kommenttitietosi käsitellään.