Hogyan készítsünk képtérképet CSS-sel

lehetőségek

Valami „geeky” -t akartam, ezért úgy döntöttem, hogy egy „zseb” grafikát készítek, amely tartalmazza a blogom összes feliratkozási módját.

A Web 1.0 napjaiban egy ilyen linkgyűjteményt ki lehet építeni úgy, hogy az egyes grafikákon összekapcsolja a képet, majd megpróbálja az egészet egy táblával összerendezni. Meg lehet valósítani egy an felhasználásával is képtérkép de ehhez általában eszközre van szükség a koordináta-rendszer kiépítéséhez. A lépcsőzetes stíluslapok használatával ez egy csomó könnyebbé válik ... nem kell képet osztani, és nem kell eszközt találni a koordinátarendszer felépítéséhez!

  1. Készítse el a használni kívánt képet. Az alábbi grafikát felhasználhatja (kattintson a jobb gombbal és mentse a letöltéshez):
    Opciók
  2. Töltse fel a képét a CSS-hez viszonyított könyvtárba. A WordPress alkalmazásban ezt úgy lehet megtenni, hogy a téma könyvtárában lévő képek mappájába helyezzük.
  3. Add hozzá a HTML-t. Szép és egyszerű ... egy div, három linkkel:
    > div id = "feliratkozás">> a id = "rss" href = "[hírcsatorna link]" title = "Feliratkozás RSS-re" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[e-mail feliratkozási link]" title = "Feliratkozás e-mailben" >> span class = "hide"> Email> / span >> / a>> a id = "mobile" href = "[a mobil link]" title = "Mobil verzió megtekintése" >> span class = "hide"> Mobil> / span >> / a>> / div>
    
  4. Szerkessze a lépcsőzetes stíluslapot. 6 különböző stílust fog hozzáadni. 1 stílus a teljes div-hez, 1 a tag-hez, így nem jelenik meg szövegdekoráció, 1 stílus a szöveg elrejtésére (az akadálymentességre használatos) és 1 stílusleírás az egyes linkekhez:
    #subscribe {/ * háttérkép blokk * / display: blokk; szélesség: 215px; magasság: 60px; háttér: url (images / options.png) no-repeat; margin-top: 0px; } #subscribe a {text-decoration: none; } .hide {láthatóság: rejtett; } #rss {/ * RSS-link * / float: balra; pozíció: abszolút; szélesség: 50px; magasság: 50px; bal szél: 20px; margin-top: 5px; } #email {/ * Email link * / float: balra; pozíció: abszolút; szélesség: 50px; magasság: 50px; bal szél: 70px; margin-top: 5px; } #mobile {/ * Mobil link * / float: balra; pozíció: abszolút; szélesség: 50px; magasság: 50px; bal szél: 130 képpont; margin-top: 5px; }

A pozícionálás szép és egyszerű ... adjon hozzá magasságot és szélességet, majd állítsa be a bal margót a kép bal oldalától, a felső margót pedig a kép felső oldalától!

Ez a "Hogyan kell" bejegyzés a A geekek a Sexy végső “How To” versenyek! Egy megjegyzés: igaz, hogy egy képtérképnek sokkal összetettebb sokszöge lehet, de valójában nem láttam túl sok olyan helyet, ahol ennek elengedhetetlen kell lennie. Észrevettem, hogy a Geeks are Sexy oldalsávon található nagy RSS-kép ... ez egy jó hely egy link számára. 😉

Frissítve: 10. A jobb hozzáférhetőség érdekében a Phil!

Szponzor: Ha újonc a webdesignban, akkor készítse el saját webhelyét a HTML és CSS használatával, a 2. kiadás elengedhetetlen kellék. Ebben a könnyen követhető útmutatóban megtanulhatja, hogyan lehet a lehető legjobban felépíteni egy weboldalt - saját maga csinálva!

41 Comments

  1. 1

    Doug, ez szép módszernek tűnik, de nagyon megközelíthetetlen.

    Vegyünk egy vak felhasználót képernyőolvasóval, csak szöveges böngészővel rendelkező felhasználót, vagy bárkit, aki olyan webhelyre látogat, hogy nincs engedélyezve a CSS vagy a Képek (például egy mobil felhasználó, aki a mobilbarát webhelyére mutató linket keresi). Egyikük sem fog tudni erről a három linkről, mert nincs szövegük. Ha a képek ki vannak kapcsolva, a felhasználó nem is látja az alt szöveget annak leírására, hogy mi lett volna ott, mert ez háttérkép.

    Jobb lenne a képeket szeletelni, összekapcsolni, listába tenni és egymás mellett lebegtetni. Vagy használjon szöveget a hivatkozásokhoz, és cserélje ki a szöveget egy szokásos képpótlási technikával. Ez kényelmesnek tűnik, de sokkal nehezebbé / lehetetlenné teszi azokat, akik nem használnak szokásos grafikus böngészőt.

    • 2
      • 3

        Doug,

        A JAWS alapértelmezés szerint nem olvassa a linkek címeit, de igazad van, megteheti. Miért keresne linkek címeit, ha nem tudná, hogy mégis ott van, és még akkor is, ha igen, ez minden bizonnyal felhasználhatósági kérdésre süllyed, ami azt jelenti, hogy a kevésbé képzett felhasználóknak másodlagos élményt nyújt a webhelye használatában.

        Szöveges böngészők esetében az a cikk, amelyre rám irányít, hogy a Lynx lehetővé teszi a hivatkozások címeinek felsorolását is, de az én álláspontom továbbra is az, hogy ha nem tudná, hogy van ott link, mivel eleve nem volt szöveg , miért keresne címszöveget?

        Végül a linkcím attribútumok továbbra sem jelennek meg azok számára, akik böngésznek, ha nincsenek engedélyezve képek vagy CSS.

        Tehát igen, a címekkel való kapcsolatok jobbak, mint a nélküliek, de ebben az esetben ez csak marginális.

        Éppen ezért egy kép használata, így az alt szöveg olvasható, vagy képcsere, hogy a szöveg ott legyen, sokkal biztonságosabb, hozzáférhetőbb és használhatóbb lehetőség.

        • 4

          Jó információ, Phil. Megpróbálom ezt szöveggel fokozni, de egyszerűen elrejteni a szöveget - így egy hozzáférhető termék, mint a JAWS, elolvassa a link szövegét, és a szöveg megjelenik, ha a CSS vagy a Képek le vannak tiltva.

          Nem értek egyet azzal, hogy az egyetlen elérhető megoldás mégis egy linket tartalmazó kép elhelyezése lenne.

  2. 5
    • 6
      • 7

        Olyasmi, amire gyakran nem figyelünk, Phil! Az alkalmazás hozzáférhetővé tétele gyakran jó keresőmotoros eredményekkel is jár.

        Nagyon értékelem a szakértelmet és a visszajelzéseket!

  3. 8

    Elloptam. Ott mondtam.

    Doug, a grafika fantasztikus, és a kódolás olyan hihetetlenül egyszerű, hogy megijeszt (CSS-sel játszottam, és most végre „megértem”).

    Az igényeimnek megfelelően módosította a kódot, kitalálta, hová dobja be a HTML-bitet, és őszintén szólva nagyon jól néz ki, és megtisztította az oldalsávom azon tetejét, amely őrületbe kergetett.

    Lehet, hogy még meg kell vennem neked azt a kávét!

  4. 10

    Doug,

    Eltérő hang leszek, tapasztalataimat felhasználva példának. Emlékszem az e-mailjeinkre, amikor az otthoni e-mail címem megváltozott, és megjegyezte, hogy egyszerűen be kell választanom az újat. Be kell vallanom, hogy egy csöppnyi idő "felfedezte" az új funkciót a webhelyén, hogy újra bekapcsolhassam. Ennek része volt, mert az eredeti link valamivel hagyományosabb volt, és erre homályosan emlékeztem. A másik azért volt, mert az oldalsó fél boríték nekem kezdetben csak nem hasonlított borítékra. Körülbelül 5 vagy több perc múlva elkezdtem az egeret görgetni minden kép felett, és amikor az „Feliratkozás e-mailben” cím megmutatkozott, akkor tudtam, hogy üzleti tevékenységet folytatok. Az agyam is kitalálta, mi a linkkép.

    De legalábbis számomra az oldalsó boríték nem volt intuitív számomra, mint az e-mailes értesítések feliratkozásának helye. És (mivel azt mondták nekem, hogy mindig valami jóval végződjek) egyetértek fentebb Phil-lel; a módszer nagyon egyszerű, és az egész elem remekül működik. Úgy gondolom, hogy a tervezőeszköze segített a 3 szakasz pontos méreteinek megadásában; ez helyes feltételezés? Feltételeznem kell, hiszen ha mondjuk 400 pixel széles képem lenne, akkor tudnom kellene a megfelelő beállításokat stb.

  5. 12
    • 13

      Vilmos,

      Úgy tűnik, hogy ütközés állhat fenn a megjegyzések osztálynevei és az oldalsáv grafikonján szereplő osztálynevek között. A konfliktus tisztázása érdekében másként nevezheti meg őket. Mondja meg, ha kézre van szüksége!

      Doug

  6. 14

    Úgy tűnik, hogy minden működik mind az FF-ben, mind az IE-ben ... azt hiszem, hogy jártál az oldalon, miközben egy olyan plugint próbáltam megcsípni, amely nem egészen működött ... 😉

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

    Szép megközelítés, de szükségem van valamire egy topográfiai térképhez, ezért nem használhatok téglalap alakú területeket ... Azt hiszem, a régi stílusú képtérképet kell használnom koordinátákkal, de valószínűleg kicsit mélyebbre fogok ásni ...

  11. 19

    Köszönöm ezt az információt, Doug. Korábban már jártam itt, és azon gondolkodtam, hogy csináltad. Szerettünk volna létrehozni egy ilyen térképet, amelyet be kell illeszteni a bejegyzéseink után, és most, hogy van rá eszközünk, meg tudjuk csinálni. Bravó!

  12. 20
  13. 21

    Szia Doug,
    Hagytam egy korábbi megjegyzést, de rájöttem, hogy egyáltalán alig kínálok betekintést a dilemmámba. A Wordpress témát úgy alakítottuk át, hogy itt segítsünk elindítani online sitcomunkat:

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

    Most látni fogja, hogy a tetején van egy navigációs sáv, egy kép, amelyet több tucatszor korábban feltérképezni kívántunk. / palmforehad. Egyikünk sem érti igazán a CSS-t, de eléggé megbotlunk és eddig rendben voltunk. A tucatnyi CSAK EGY cikkében található cikk valódi betekintést nyújt a képtérképek CSS-ben történő egyszerű felhasználásába. Elküldtem a stíluslapot az Ön utasításainak megfelelően, de fogalmam sincs, hová tegye a HTML-t. Csak annyit mondtál, hogy "Add hozzá a html-jedet ... Ez szép és egyszerű", majd meghúzódtam, mert azt gondoltam, hogy "nekem nem elég egyszerű!" Nem tudtam, hogy html-t adhatok ezekhez a php-oldalakhoz a téma szerkesztőjében. Helyezhetem a html-t a fejlécbe? A Fő Index sablon? A funkciók? Feltételezem, hogy az összes wordpress-felhasználónak lehetősége van szerkeszteni a témáját az irányítópult-szerkesztőben, ami funkcionalitásában elég univerzálisnak tűnik. Ha tudna javaslatot tenni a html elhelyezésére, szívesen adaptálnám az oru kódot a navigációs sávomhoz.

    Köszönjük, hogy megosztotta ismereteit a közösséggel. Örülök, hogy kapok egy kávét.

    • 22

      Szia Phay!

      A blog témájához tartozó összes fájl szerkeszthető az Adminisztrációs panelen keresztül. Ha rákattint a Prezentáció, majd a Témaszerkesztő elemre, akkor láthatja a fájlok listáját a jobb oldalon, a szerkesztőt pedig a bal oldalon.

      Ha azt szeretné, hogy ez az oldalsávon legyen, akkor valószínűleg van Oldalsáv oldala. Kattintson a szerkesztéshez, majd tegye a megadott HTML-t abba az oldalba, ahová szeretné.

      Egy megjegyzés: A stíluslap szerkesztése az oldalához viszonyítva van, ezért fel kell töltenie a képet a téma képek könyvtárába, ha úgy hivatkozik rá, mint a témában szereplő többi képre.

      Remélem, hogy segít!

    • 23

      Phay,
      Ma találkoztam ezen az oldalon, és ugyanaz a dilemmám volt, mint neked. Képes térképet is szerettem volna hozzáadni a fejlécképhez. Miután egy darabig játszottam vele, jól értettem. Helyezze a div HTML-t a header.php fájlba. És közé tettem. Nem biztos abban, hogy a sablonod rendelkezik-e pontosan kódolva, de játszd el vele a header.php fájlt, és kitalálod.
      -
      Paul

  14. 24

    Köszönöm a gyors választ!

    Nem, nem akartam, hogy az oldalsávon legyen, az az oldal tetején van (az általam megadott linken láthatja - a rózsaszín navigációs sávon, amelyen szerepel a tartalom, a showról stb.)

    Egész reggel reggel az irányítópulton dolgoztam, sajnos nem vagyok biztos benne, hogy melyik fájlban helyezem el a html-t, amint azt fentebb említettem, több is van, header.php, main index.php, functions.php, footer.php. Nem tudom, hová illessze be a html kódot. (az első rész, amit megadtál, a maradékot már beillesztettem a stíluslapomba) Ott van a képem a weboldalon, minden készen áll a használatra, csak tudnom kell, hova adjam hozzá a kód html részét az adaptáláshoz.

    Nagyon köszönöm az időt és a kezdő kérdéseket.

    Phay

  15. 25

    ... Vagy esetleg valaki megjegyzéseket tehetne arról, hogy melyik fájlba helyezzük a kód HTML részét. Egy néhány bejegyzéssel feljebb álló úr azt mondta, hogy kitalálta. Még nem volt ilyen szerencsés.

    Phaylen

  16. 26
  17. 27

    Pokolian gyakran találok módot arra, hogy egy kattintható képtérképet beágyazhassak a wordpress-be, mert az eltávolítja a html térképcímkéket. Az Ön útja működne, de az Egyesült Államok térképe nyilvánvalóan komplex módon csavarható így. Eltévedtem.

    Segítség.

    Úgy tűnik, hogy a vaku az egyetlen lehetőségem?

    • 28

      Dave,

      Ha a képet beleteszi a sablonjába, akkor minden rendben lesz. Ha a képtérképet a tényleges tartalomba helyezi, akkor szűrőproblémákba ütközhet. Szörnyű, ahogyan ezt megkerültem, de időnként iframe-et használtam.

      Doug

  18. 29

    Szia,

    úgy tűnik, hogy a képtérkép és a linkek két különböző dolog, nem működnek együtt, mint ahogy a képtérkép a html-ben

    amikor a háttértérképet (bal középre) beillesztem a képtérképbe, a linkek pozícionálása nem követi nyomon.

    bármilyen módon megkerülni ezt? nagyon amatőr vagyok. köszönöm.

  19. 31

    Hasonló megközelítést alkalmaznának egy nagyobb és bonyolultabb képtérképhez, mint amilyet én próbálok használni?

    Ha megtekinti a webhelyemet, kattintson a bal oldali linkekre, és megjelenik a kép, amelyet képtérképként próbálok használni (a Szöveg ábécé alatt).

    Alapvetően megpróbálva használni a Kép használatával a lista egyes szakaszait levélben.

    Nyilvánvalóan 20 percet töltöttem egy térkép elkészítésével a GIMP-vel, majd a WP eltávolította a térképcímkéket, így találtam rá a webhelyére.

    Bár gondolkodhat a Flash használatáról

    Kösz.

  20. 33

    Jelenleg sablonelrendezést használok és a saját dolgaimmal szerkesztem. Képtérképet szeretnék hozzáadni, de nem vagyok biztos benne, hogy hova tegyem a css-be. a kép, amelyről térképet akarok készíteni, a fejléc részben található.

  21. 34

    szia, a webhelyemet a joomla-ra építettem ... ezt a módszert szeretném használni, hogy az oldalam logója az otthoni link legyen, azt mondták, hogy ezt nem tudom megtenni a joomlával, de ez a cikk reményt ad! az e-mailes segítséget nagyra értékelnénk ... .köszönöm

  22. 35

    Szia Doug - Egy meglehetősen összetett css-alapú képtérképet építek ki, amely távoli áthúzással is rendelkezik (ebben az esetben a szöveg az oldalon máshol jelenik meg, amikor az egyik képpontot lebegteti). Mindenesetre itt találkoztam a példájával, miközben ezt kutattam ... és azt gondoltam, hogy megosztom a következő információt:

    1. Az akadálymentesség érdekében nem szabad a láthatóság: nincs (vagy a display: nincs, ha úgy gondolja) elrejteni a szöveget itt, mint láthatósági stílusú elemet: a rejtett képernyőolvasók (azok, amelyek követik a specifikációt) nem olvashatók el .

    Ehelyett használjon erőteljesebb képpótló technikát. Vagy a Phark-módszert, vagy a Gilder / Levin-t javaslom - ezek csak a jobban dokumentált nevek, amelyek segítségével a google megtalálja az alapvető technikákat. Inkább a G / L-t szeretem, mivel CSS-sel is működik, de a képek ki vannak kapcsolva.

    2. Bár nem látom, hogy megtörne (az FF3 használatával), a pozicionálás megvalósításának is vannak benne rejlő kockázatai. Egy abszolút helyzetben lévő elem a legközelebbi helyzetű szülőhöz képest helyezkedik el. Alapvetően kifejezetten meg szeretné adni a helymeghatározási kontextust a „position: relatív” alkalmazásával a #subscription elemre. Ezután a gyerekek (az elhelyezett linkek) elhelyezhetők az adott szülőn belül. Ez a módszer segít a megbízhatóbb eredmények biztosításában a böngészők között.

    Ezután a margók helyett a „top: x” és a „left: x” (ahol x az eltolás értéke, mondjuk px-ben) pozicionálási deklarációkat kell használnia, nem pedig margókat. Ismét, nem feltétlenül látom, hogy ez tönkremegy, ahogy van, de a felső és a bal oldalt erre szánják, miért ne használná őket? Ráadásul ugyanazon az elemen vannak beállítva az úszók és a margók, amelyek meghatározott körülmények között az IE6 „kettős margó” hibáját okozzák (tesztelted ott?) - bár van javítás, a top használatával teljesen elkerülöd ezt a problémát és ebben az esetben margók helyett maradt.

    3. Végül miért ne használhatnánk szemantikailag rendezett sorrend nélküli listát ezekre a linkekre az értelmetlen div helyett?

    Elnézést a továbbhaladásért ... Csak szeretnék megosztani, b / c Tapasztalatból tudom, hogy a CSS használatának sokféle módja van a kívánt eredmény elérése érdekében, de néhány módszer bizonyosan jobban működik (megbízhatóbb, böngészőkön átívelő), mint mások . HTH.

  23. 36
  24. 37
  25. 38

    Nagyon szépen köszönöm!! Utasításaid óráknyi munkát spóroltak meg nekem ... Új vagyok a webfejlesztésben, és most szenvedtem át az első nagy projektem során. Sikerült ... az ügyfél boldog, igazából eksztatikus, és én is!

  26. 39

    Helló, nagyon köszönöm, hogy ezt közzétetted! Évekkel később, és még mindig segít ... szép! Küzdök azért, hogy a képtérképem a megfelelő helyre kerüljön. Van egy szalaghirdetésem, és szeretném, ha a sáv jobb felső sarkában található közösségi ikonok összekapcsolódnának a megadott kóddal. Remekül működik, csakhogy valamit rosszul csinálok, mert a linkeim a képernyő bal felső sarkában jelennek meg, nem a közösségi ikonok felett, hanem az embléma felett. Biztos vagyok benne, hogy valami egyszerű, de egyszerűen nem tudom kitalálni. Azt hittem, megosztom itt, hátha van valamilyen meglátása. Még egyszer köszönöm, hogy ezt közzétette!

Mit gondolsz?

Ez az oldal Akismet-et használ a levélszemét csökkentése érdekében. Ismerje meg, hogyan dolgozik a megjegyzésed.