Як стварыць карту малюнкаў з дапамогай CSS

опцыі

Мне хацелася чагосьці "вычварнага", таму я абраў "кішэнную" графіку, якая змяшчае ўсе спосабы падпіскі на мой блог.

У часы Інтэрнэту 1.0 можна было стварыць калекцыю такіх спасылак, зрабіўшы малюнак спасылкамі на кожную графіку, а потым паспрабаваўшы злучыць усё разам са сталом. Гэта таксама можна зрабіць, выкарыстоўваючы малюнак карты але для гэтага звычайна неабходны інструмент для пабудовы сістэмы каардынат. Выкарыстанне каскадных табліц стыляў робіць гэта масу прасцей ... без зрошчвання малюнкаў і спроб знайсці інструмент для пабудовы вашай сістэмы каардынат!

  1. Стварыце свой вобраз, які вы хацелі б выкарыстоўваць. Вы можаце выкарыстаць гэтую графіку ніжэй (пстрыкніце правай кнопкай мышы і захавайце, каб загрузіць):
    опцыі
  2. Загрузіце малюнак у каталог, які адносна вашага CSS. У WordPress гэта зрабіць прасцей за ўсё, змясціўшы яго ў тэчку малюнкаў у каталогу тэм.
  3. Дадайце свой HTML. Гэта проста і проста ... div з трыма спасылкамі ў ім:
    > div id = "subscribe">> a id = "rss" href = "[ваша спасылка на стужку]" title = "Падпісацца на RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[ваша спасылка на падпіску на электронную пошту]" title = "Падпісацца па электроннай пошце" >> span class = "hide"> Email> / span >> / a>> a id = "mobile" href = "[ваша мабільная спасылка]" title = "Паглядзець мабільную версію" >> span class = "hide"> Мабільны> / span >> / a>> / div>
    
  4. Змяніце табліцу каскадных стыляў. Вы дадасце 6 розных стыляў. 1 стыль для агульнага div, 1 для тэга, каб ён не адлюстроўваў тэкставае ўпрыгожванне, 1 стыль для схавання тэксту (выкарыстоўваецца для даступнасці) і 1 спецыфікацыя стылю для кожнай са спасылак:
    #subscribe {/ * блок фонавага малюнка * / display: block; шырыня: 215px; вышыня: 60px; фон: url (images / options.png) без паўтарэння; margin-top: 0px; } #subscribe a {text-decoration: none; } .hide {бачнасць: схавана; } #rss {/ * RSS-спасылка * / float: злева; пазіцыя: абсалютная; шырыня: 50px; вышыня: 50px; поле злева: 20 пікселяў; поле зверху: 5 пікселяў; } #email {/ * Спасылка па электроннай пошце * / float: злева; пазіцыя: абсалютная; шырыня: 50px; вышыня: 50px; поле злева: 70 пікселяў; поле зверху: 5 пікселяў; } #mobile {/ * Mobile Link * / float: злева; пазіцыя: абсалютная; шырыня: 50px; вышыня: 50px; поле злева: 130 пікселяў; поле зверху: 5 пікселяў; }

Размяшчэнне добрае і простае ... дадайце вышыню і шырыню, а затым усталюйце левае поле з левага боку малюнка і верхняе поле з верхняга боку малюнка!

Гэта паведамленне "Як зрабіць" прызначана для ўваходу ў Вылюдкі - гэта сэксуальны канчатковы конкурс "Як трэба"! Адна заўвага: гэта праўда, што карта выявы можа мець значна больш складаныя шматкутнікі, але я на самой справе не бачыў занадта шмат месцаў, дзе гэта павінна быць. Я заўважыў, што вялікая старая выява RSS на Geeks - гэта сэксуальная бакавая панэль ... гэта добрае месца для спасылкі. 😉

АБНАЎЛЕНА 10 для паляпшэння даступнасці з парадамі Філ!

спонсар: Калі вы пачатковец у вэб-дызайне, стварыце ўласны вэб-сайт правільным спосабам, выкарыстоўваючы HTML і CSS, 2-е выданне неабходна. У гэтым простым у выкананні кіраўніцтве вы даведаецеся, як стварыць вэб-сайт найлепшым спосабам - зрабіць гэта самастойна!

41 Каментары

  1. 1

    Дуг, гэта здаецца добрым метадам, але ён вельмі недаступны.

    Разгледзім сляпога карыстальніка з чытачом з экрана, карыстальніка з тэкставым браўзэрам альбо каго-небудзь, хто наведвае сайт без уключаных CSS і малюнкаў (напрыклад, магчыма, мабільны карыстальнік, які шукае спасылку на ваш мабільны сайт). Ніхто з іх не будзе ведаць пра гэтыя тры спасылкі, бо ў іх няма тэксту. Калі выявы адключаны, карыстальнік нават не ўбачыць альтэрнатыўны тэкст, каб апісаць, што б там было, таму што гэта фонавы малюнак.

    Лепш будзе нарэзаць выявы, звязаць іх, змясціць у спіс і змясціць побач. Ці нават выкарыстоўваць тэкст для спасылак і замяніць тэкст, выкарыстоўваючы стандартную тэхніку замены малюнкаў. Здаецца, гэта зручна, але для людзей, якія не карыстаюцца стандартным графічным браўзэрам, гэта значна больш складана / немагчыма.

    • 2

      Я б мякка (паколькі ў вас ёсць больш вопыту) не пагадзіўся, Філ, кожная спасылка мае загаловак, так што кожны з іх цалкам даступны. Чытанне загалоўкаў тэксту - гэта магчымасць такіх праграм, як JAWS. Вось добры пост пра загалоўкі ў спасылках і яго ўплыў на даступнасць.

      • 3

        Дуг,

        JAWS не чытае загалоўкі спасылак па змаўчанні, але вы маеце рацыю, гэта можа зрабіць. Чаму б вам шукаць загалоўкі спасылак, калі вы нават не ведалі, што яны там ёсць, і нават калі б вы былі, гэта, безумоўна, падае на праблему юзабіліці, што азначае, што вы даяце менш здольным карыстальнікам другі ўзровень карыстання вашым сайтам.

        Для тэкставых браўзэраў артыкул, на якую вы скіроўваеце мяне, што Lynx таксама дазваляе стварыць спіс загалоўкаў спасылак, але я па-ранейшаму мяркую, што калі вы не ведалі, што там ёсць спасылка, бо тэксту ў першую чаргу не было , навошта вам шукаць тэкст загалоўка?

        Нарэшце, атрыбуты загалоўка спасылкі па-ранейшаму не будуць адлюстроўвацца для тых, хто праглядае без уключэння малюнкаў альбо без уключанага CSS.

        Так што так, спасылкі з загалоўкамі лепшыя, чым без, але ў гэтым выпадку гэта толькі нязначна.

        Вось чаму выкарыстанне выявы, каб альтэрнатыўны тэкст можна было прачытаць, альбо замена выявы, каб тэкст быў там, з'яўляецца значна больш бяспечным, даступным і больш карысным варыянтам.

        • 4

          Добрая інфармацыя, Філ. Я паспрабую ўзмацніць гэта з дапамогай тэксту, але проста схаваю тэкст - такім чынам даступны прадукт, такі як JAWS, прачытае тэкст спасылкі, і тэкст будзе адлюстроўвацца, калі CSS або малюнкі адключаны.

          Я не згодны з тым, што адзіным даступным рашэннем было б размясціць выяву са спасылкай.

  2. 5
  3. 8

    Я скраў яго. Там я гэта сказаў.

    Дуг, графіка фантастычная, а кадаванне настолькі неверагодна простае, што мяне палохае (гуляю ў CSS, і вось я нарэшце "зразумеў").

    Падправіў код, каб задаволіць мае патрэбы, зразумеў, куды ўкінуць біт HTML, і, шчыра кажучы, ён выдатна выглядае і ачысціў верхнюю частку маёй бакавой панэлі, якая прывяла мяне ў розум.

    Мне, магчыма, давядзецца яшчэ купіць табе гэтую каву!

  4. 10

    Дуг,

    Я буду іншым голасам, выкарыстоўваючы свой досвед у якасці прыкладу. Я памятаю нашу электронную пошту, калі мая хатняя электронная пошта змянілася, і вы адзначылі, што мне прыйшлося проста выбраць новы. Я павінен прызнаць, што ў мяне быў час, каб "адкрыць" новую функцыю на вашым сайце, каб зноў уключыцца. Часткова гэта было таму, што арыгінальная спасылка была некалькі больш традыцыйнай, і я цьмяна памятаў яе. Іншае - таму, што напалову канверт проста не выглядаў мне канвертам першапачаткова. Прыблізна праз 5 і больш хвілін я пачаў наводзіць мыш на кожную выяву, і калі з'явілася загаловак "Падпісацца па электроннай пошце", я зразумеў, што займаюся бізнесам. Мой мозг таксама зразумеў, што ўяўляе сабой спасылка.

    Але, па меншай меры для мяне, бакавы канверт проста не быў для мяне інтуітыўна зразумелым, як месца для падпіскі на паведамленні па электроннай пошце. І (паколькі мне сказалі заўсёды заканчваць чымсьці прыемным), я згодны з Філам вышэй; спосаб сапраўды просты, і ўвесь прадмет выдатна працуе. Мяркую, ваш інструмент дызайну дапамог даць вам дакладныя памеры для 3 раздзелаў; гэта правільнае меркаванне? Я павінен выказаць здагадку, што калі б у мяне быў, скажам, малюнак шырынёй 400 пікселяў, мне трэба было б ведаць правільныя налады і г.д.

  5. 12
    • 13

      Уільям,

      Падобна на тое, што ў вас могуць узнікнуць супярэчнасці паміж назвамі класаў каментарыяў і назвамі класаў на графіцы бакавой панэлі. Вы можаце назваць іх па-рознаму, каб высветліць канфлікт. Дайце мне ведаць, калі вам патрэбна дапамога!

      Doug

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

    Прыемны падыход, але мне трэба нешта для тапаграфічнай карты, таму я не магу выкарыстоўваць прамавугольныя вобласці ... Я думаю, што мне трэба выкарыстоўваць вобраз старога стылю з каардынатамі, але, напэўна, я паглыблюся крыху глыбей ...

  11. 19

    Дзякуй за гэтую інфармацыю, Дуг. Я быў тут раней і думаў, як ты гэта зрабіў. Мы хацелі стварыць такую ​​карту, каб яе можна было ўстаўляць пасля нашых паведамленняў, і цяпер, калі ў нас ёсць сродкі, мы можам гэта зрабіць. Брава!

  12. 20
  13. 21

    Прывітанне Дуг,
    Я пакінуў папярэдні каментарый, але зразумеў, што наўрад ці я ўвогуле мог зразумець сваю дылему. Мы адаптавалі тэму WordPress, каб дапамагчы нам запусціць наш Інтэрнэт-серыял тут:

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

    Цяпер вы ўбачыце, што ў нас ёсць навігацыйны банер уверсе, малюнак, які мы хацелі адлюстраваць, як гэта было дзясяткі разоў раней. / пальмападобны. Ніхто з нас сапраўды не разумее CSS, але мы спатыкаемся дастаткова і да гэтага часу ўсё ў парадку. Ваш артыкул у АДЗІНІМ з дзесяткаў прапанаваных матэрыялаў - гэта рэальнае ўяўленне пра тое, як лёгка выкарыстоўваць выявы ў CSS. Я выкарыстаў табліцу стыляў у адпаведнасці з вашымі ўказаннямі, але паняцця не маю, дзе размясціць HTML. Усё, што вы сказалі, гэта "Дадайце свой html ... Гэта прыемна і проста", а потым я сціснуўся, бо падумаў ... "Недастаткова проста для мяне!" Я не ведаў, што магу дадаць html на любую з гэтых php-старонак у рэдактары тэм. Ці трэба размяшчаць html у загалоўку? Шаблон галоўнага паказальніка? Функцыі? Я мяркую, што ўсе карыстальнікі WordPress маюць магчымасць рэдагаваць сваю тэму ў рэдактары прыборнай панэлі, што здаецца даволі універсальным па функцыянальнасці. Калі б вы маглі прапанаваць, дзе размясціць html, я хацеў бы адаптаваць код oru для маёй панэлі навігацыі.

    Дзякуй, што падзяліліся сваімі ведамі з супольнасцю. Я рады прынесці вам каву.

    • 22

      Прывітанне Пей!

      Усе файлы для тэмы вашага блога даступныя для рэдагавання праз панэль адміністратара. Калі вы націснеце Прэзентацыю, а затым Рэдактар ​​тэм, вы зможаце ўбачыць спіс файлаў справа і рэдактар ​​злева.

      Калі вы хочаце, каб гэта было на вашай бакавой панэлі, напэўна, у вас ёсць старонка бакавой панэлі. Націсніце, каб адрэдагаваць, а затым устаўце HTML-код на старонку, дзе вы хочаце.

      Адно заўвага: рэдагаванне табліцы стыляў адносна вашай старонкі, таму вам трэба будзе загрузіць малюнак у каталог малюнкаў тэм, калі вы спасылаецеся на яго, як і на іншыя выявы ў вашай тэме.

      Надзея, што дапамагае!

    • 23

      Фэй,
      Я сёння наткнуўся на гэты сайт і меў тую ж дылему, што і вы. Я таксама хацеў дадаць карту выявы ў загаловак. Пагуляўшы з ім некаторы час, я зразумеў гэта правільна. Змесціце div HTML у файл header.php. Я паклаў яго паміж і. Не ўпэўнены, што ваш шаблон мае дакладнае кадаванне, але пагуляйце з ім у файле header.php, і вы зразумееце.
      -
      падлогу

  14. 24

    Дзякуй за хуткі адказ!

    Не, я не хацеў, каб гэта было на бакавой панэлі, гэта ўверсе старонкі (вы можаце ўбачыць па спасылцы, якую я даў - ружовая панэль навігацыі, якая кажа пра пастаяннае, пра шоў і г.д.)

    Я працаваў на прыборнай панэлі ўсю раніцу, на жаль, я не ўпэўнены, у які файл я змяшчаю html, як было сказана вышэй, у мяне ёсць некалькі, header.php, main index.php, functions.php, footer.php. Я не ўпэўнены, куды ўставіць html-код. (першую частку вы падалі, астатнюю частку я ўжо ўставіў у табліцу стыляў) У мяне ёсць выява на сайце, усё гатова, мне проста трэба ведаць, куды дадаць html-частку кода для адаптацыі.

    Вялікі дзякуй за ваш час і палявыя пытанні ад пачаткоўца.

    Фэй

  15. 25

    ... А можа, хто-небудзь можа адправіць у каментарыях інфармацыю пра тое, у які файл мы змяшчаем html-частку кода. Спадар, які зрабіў некалькі паведамленняў, сказаў, што зразумеў. Мне так не пашанцавала.

    Файлен

  16. 26
  17. 27

    У мяне чорт пашукае спосаб убудаваць карту малюнкаў, якую можна націснуць, у WordPress, таму што яна пазбаўляе тэгі HTML-карты. Ваш шлях будзе працаваць, але карта ЗША, відавочна, складаная, каб выкруціцца гэтым шляхам. Я згубіўся.

    Help.

    Здаецца, успышка - гэта мой адзіны варыянт?

    • 28

      Дэйв,

      Калі вы змесціце малюнак у шаблон, усё будзе ў парадку. Калі вы змесціце карту выявы ў сапраўдны змест, вы можаце сутыкнуцца з праблемамі фільтрацыі. Тое, як я абышоўся з гэтым, жудаснае, але часам я выкарыстоўваю iframe.

      Doug

  18. 29

    прывітанне,

    здаецца, што выява і спасылкі - гэта дзве розныя рэчы, яны не працуюць разам, як тое, што робіць выява ў html

    калі я ўключаю фонавае пазіцыянаванне (цэнтр злева) для карты малюнкаў, пазіцыянаванне спасылак не адбываецца.

    любы спосаб абыйсці гэта? я вельмі аматарскі. Дзякуй.

  19. 31

    Ці быў бы падобны падыход выкарыстаны для большай і больш складанай карты малюнкаў, як я спрабую выкарыстоўваць?

    Калі вы праглядаеце мой сайт, націсніце на спасылкі злева, і вы ўбачыце малюнак, якое я спрабую выкарыстаць як карту малюнка (пад тэкставым алфавітам).

    У асноўным, спрабуючы выкарыстоўваць малюнак, каб перайсці да кожнага раздзела гэтага спісу па літары.

    Відавочна, я выдаткаваў 20 хвілін на стварэнне карты з GIMP, а потым WP выдаляе тэгі карты, так што я знайшоў ваш сайт.

    Хаця, можа, разважае з выкарыстаннем Flash

    Дзякуючы.

  20. 33

    У цяперашні час я выкарыстоўваю макет шаблона і рэдагую ўласныя рэчы. Я хачу дадаць карту выявы, але я не ўпэўнены, дзе змясціць яе ў CSS. выява, з якой я хачу зрабіць карту, знаходзіцца ў загалоўку.

  21. 34

    прывітанне, я стварыў свой сайт на joomla ... я хачу выкарыстаць гэты метад, каб зрабіць лагатып маёй старонкі спасылкай на дом, мне сказалі, што вы не можаце зрабіць гэта з joomla, але гэты артыкул дае мне надзею! дапамога па электроннай пошце была б вельмі ўдзячная ... дзякуй

  22. 35

    Прывітанне, Даг! Я ствараю даволі складаную карту малюнкаў на аснове CSS, якая таксама мае аддаленыя перакульванні (у гэтым выпадку тэкст адлюстроўваецца ў іншым месцы старонкі, калі вы наводзіце на гарачыя кропкі выявы). У любым выпадку, я наткнуўся тут на ваш прыклад, даследуючы гэта ... і я падумаў, што падзялюся наступнымі звесткамі:

    1. Для даступнасці не варта выкарыстоўваць visibility: none (альбо display: none, калі вы гэта ўлічылі), каб схаваць тэкст тут, бо элемент, стылізаваны з visibility: hidden, счытвальнікі з экрана не будуць чытаць (тыя, хто прытрымліваецца спецыфікацый) .

    Замест гэтага выкарыстоўвайце больш надзейную тэхніку замены малюнкаў. Я прапаную альбо метад Фарка, альбо Гілдэр / Левін - гэта проста лепшыя дакументаваныя назвы для пошуку ў Google, каб знайсці асноўныя метады. Я аддаю перавагу галоўнай кнізе, бо яна таксама працуе з уключаным CSS, але выявы адключаны.

    2. Хоць я не бачу, што ён ламаецца (з выкарыстаннем FF3), ваша рэалізацыя пазіцыянавання таксама нясе ўласныя рызыкі. Абсалютна размешчаны элемент размешчаны адносна бліжэйшага бацькоўскага пазіцыянавання. У прынцыпе, вы хочаце выразна ўсталяваць кантэкст пазіцыянавання, ужываючы "position: relative" да #subscription. Тады дзеці (размешчаныя спасылкі) могуць размяшчацца ў гэтым бацьку. Гэты метад дапамагае забяспечыць больш надзейныя вынікі ў аглядальніках.

    Акрамя таго, вы павінны выкарыстоўваць дэкларацыі пазіцыянавання "top: x" і "left: x" (дзе x - значэнне зрушэння, скажам, у px), а не поля для апрацоўкі гэтага пазіцыянавання. Зноў жа, я не абавязкова бачу, як гэта ламаецца, як у вас, але зверху і злева прызначаныя для гэтага, дык чаму б не выкарыстоўваць іх? Да таго ж, у вас устаноўлены паплаўкі і палі для аднаго і таго ж элемента, якія пры пэўных умовах выклікаюць памылку "двайнога поля" ў IE6 (вы гэта правяралі?) - хоць ёсць выпраўленне, вы цалкам пазбягаеце гэтай праблемы, выкарыстоўваючы top і пакінуў замест палёў для пазіцыянавання ў гэтым выпадку.

    3. І нарэшце, чаму б не выкарыстоўваць для гэтых спасылак сэнсава неўпарадкаваны спіс замест бессэнсоўнага div?

    Выбачайце за тое, што я працую на ... Я проста люблю дзяліцца, б / к. Я з вопыту ведаю, як існуе мноства розных спосабаў выкарыстання CSS для атрымання жаданага выніку, але некаторыя спосабы, безумоўна, працуюць лепш (больш надзейныя, у розных браузерах), чым іншыя . HTH.

  23. 36
  24. 37
  25. 38

    Вялікі дзякуй !! Вашы ўказанні зэканомілі ГАДЗІН працы ... Я пачатковец у вэб-распрацоўцы, і я толькі пакутаваў праз свой першы буйны праект. Я зрабіў гэта ... кліент задаволены, насамрэч у захапленні, і я таксама!

  26. 39

    Добры дзень, вялікі дзякуй за размяшчэнне гэтага! Праз гады, і гэта ўсё яшчэ дапамагае ... прыемна! Я з усіх сіл намагаюся, каб мая карта малюнкаў была звязана ў патрэбным месцы. У мяне ёсць банер, і я хачу, каб сацыяльныя значкі ў верхнім правым куце банера спасылаліся з выкарыстаннем кода, які вы далі. Гэта выдатна працуе, за выключэннем таго, што я раблю нешта не так, таму што мае спасылкі з'яўляюцца ў крайняй левай частцы экрана не над сацыяльнымі абразкамі, а над лагатыпам. Я ўпэўнены, што гэта нешта простае, але я проста не магу зразумець. Думаю, я падзялюся тут, калі вы маеце нейкую інфармацыю. Яшчэ раз дзякуй за размяшчэнне гэтага!

Што вы думаеце?

Гэты сайт выкарыстоўвае Akismet для барацьбы са спамам. Даведайцеся, як дадзеныя апрацоўваюцца каментар.