Как да изградим карта с изображения с CSS

опции

Исках нещо „отвратително“, затова се спрях на „джобна“ графика, която съдържа всички методи за абонамент за моя блог.

В дните на Web 1.0, колекция от връзки като тази може да бъде създадена чрез снаждане на вашето изображение с връзки към всяка графика, след което да се опитате да го зашиете обратно заедно с таблица. Това може да бъде постигнато и чрез използване на карта на изображението но това обикновено изисква инструмент за изграждане на координатната система. Използването на каскадни таблици със стилове прави това много по-лесно ... без снаждане на изображения и без опит за намиране на инструмент за изграждане на вашата координатна система!

  1. Изградете вашето изображение, което искате да използвате. Можете да използвате тази графика по-долу (щракнете с десния бутон и запазете като за изтегляне):
    Настроики
  2. Качете вашето изображение в директория, която е свързана с вашия CSS. В WordPress това може да стане най-лесно, като го поставите в папка с изображения в директорията на вашите теми.
  3. Добавете вашия HTML. Това е хубаво и просто ... div с три връзки в него:
    > div id = "абонирайте се">> a id = "rss" href = "[вашата връзка към емисията]" title = "Абонирайте се за RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "имейл" href = "[вашата връзка за абонамент за имейл]" title = "Абонирайте се с имейл" >> span class = "hide"> Email> / span >> / a>> a id = "mobile" href = "[вашата мобилна връзка]" title = "Преглед на мобилната версия" >> span class = "hide"> Mobile> / 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; поле вляво: 20px; margin-top: 5px; } #email {/ * Имейл връзка * / float: ляво; позиция: абсолютна; ширина: 50px; височина: 50px; поле вляво: 70px; margin-top: 5px; } #mobile {/ * Mobile Link * / float: ляво; позиция: абсолютна; ширина: 50px; височина: 50px; поле вляво: 130px; margin-top: 5px; }

Позиционирането е приятно и просто ... добавете височина и ширина и след това задайте левия поле от лявата страна на изображението и горния поле от горната страна на изображението!

Тази публикация "Как да" е за влизане в Отрепки са секси най-доброто състезание "Как да"! Една забележка, вярно е, че картата с изображения може да има много по-сложни полигони, но всъщност не съм виждал твърде много места, където това трябва да има. Забелязах, че голямото старо RSS изображение на Geeks е Sexy sidebar ... това е добро място за връзка. 😉

АКТУАЛИЗИРАНО на 10/3/2007 за по-добра достъпност със съветите на Фил!

Спонсор: Ако сте начинаещ в уеб дизайна, създайте свой собствен уебсайт по правилния начин, използвайки HTML и CSS, 2-ро издание е задължително. В това лесно за следване ръководство ще научите как да създадете уеб сайт по най-добрия възможен начин - като го направите сами!

41 Коментари

  1. 1

    Дъг, това изглежда като добър метод, но е много недостъпен.

    Помислете за сляп потребител с екранен четец, потребител с текстов браузър или някой, който посещава сайта без активиран CSS или Изображения (като например мобилен потребител, който търси връзката към вашия удобен за мобилни устройства сайт). Никой от тях няма да знае за тези три връзки, защото нямат текст. Ако изображенията са изключени, потребителят дори няма да види алтернативен текст, за да опише какво би било там, защото това е фоново изображение.

    По-добре би било да нарязвате изображенията, да ги свързвате, да ги поставяте в списък и да ги плувате един до друг. Или дори използвайте текст за връзките и заменете текста, използвайки стандартна техника за подмяна на изображения. Това изглежда удобно, но прави нещата много по-трудни / невъзможни за тези, които не използват стандартен графичен браузър.

    • 2

      Не бих се съгласил (тъй като имате повече опит), Фил, всяка от връзките има заглавие, така че всяка е напълно достъпна. Четенето на текстови заглавия е възможност на приложения за достъпност като JAWS. Ето a добър пост за заглавия в линкове и въздействието му върху достъпността.

      • 3

        Дъг,

        JAWS не чете заглавията на връзките по подразбиране, но сте прав, може. Защо бихте търсили заглавия на връзки, ако все пак не знаехте, че е там, а дори и да сте, това със сигурност пада до проблем с използваемостта, което означава, че предоставяте на по-неспособните потребители второстепенно изживяване при използването на вашия сайт.

        За текстовите браузъри статията, към която ме насочвате към Lynx, също ви позволява да изведете списък със заглавия на връзки, но моята идея остава, че ако не сте знаели, че там има връзка, тъй като на първо място няма текст , защо да търсите заглавен текст?

        И накрая, атрибутите на заглавието на връзката все още няма да се показват за всеки, който сърфира без активирани изображения или без активиран CSS.

        Така че да, връзките със заглавия са по-добри от тези без, но в този случай това е само незначително.

        Ето защо използването на изображение, така че алтернативният текст да може да бъде прочетен или замяната на изображението, така че текстът да е там, е много по-безопасна, по-достъпна и по-използваема опция.

        • 4

          Добра информация, Фил. Ще се опитам да подобря това с текст, но просто да го скрия - така достъпният продукт като JAWS ще прочете текста на връзката и текстът ще се покаже, ако CSS или Изображенията са деактивирани.

          Не съм съгласен, че единственото достъпно решение би било да се постави изображение с връзка.

  2. 5
    • 6
      • 7

        Това е нещо, на което често не обръщаме внимание, Фил! Освен това, правенето на приложението ви достъпно често има и добри резултати от търсачките.

        Наистина оценявам експертизата и обратната връзка!

  3. 8

    Откраднах го. Ето, казах го.

    Дъг, графиката е фантастична, а кодирането е толкова невероятно просто, че ме плаши (играех с CSS и сега най-накрая го разбрах).

    Промених кода, за да отговоря на моите нужди, измислих къде да пусна HTML бита и честно казано изглежда страхотно и почисти горната част на страничната ми лента, която ме подлудяваше.

    Просто може би ще трябва да ти купя още това кафе!

  4. 10

    Дъг,

    Ще бъда противен глас, като използвам моя опит като пример. Спомням си имейлите ни, когато домашният ми имейл се промени и забелязахте, че трябваше просто да се включа с новия си. Трябва да призная, че прекарах доста време, „откривайки“ новата функция на вашия сайт, за да се включа отново. Част от това беше, защото оригиналната връзка беше малко по-традиционна и неясно я запомних. Другото беше, защото страничният половин плик просто не ми изглеждаше като плик първоначално. След около 5 или повече минути започнах да премествам мишката върху всяко изображение и когато се появи заглавието „Абониране с имейл“, тогава разбрах, че съм в бизнеса. Мозъкът ми също разбра каква е връзката.

    Но поне за мен страничен плик просто не беше интуитивен за мен като място за абониране за известия по имейл. И (тъй като ми беше казано винаги да завършвам с нещо хубаво) съм съгласен с Фил по-горе; методът е наистина прост и целият артикул работи чудесно. Предполагам, че вашият инструмент за проектиране е помогнал да ви даде точните размери за трите раздела; правилно ли е това предположение? Трябва да предположа така, тъй като ако имах, да речем, изображение с ширина 3 пиксела, ще трябва да знам правилните настройки и т.н.

    • 11

      Боб,

      Това е страхотна обратна връзка! Добавих малка бележка върху изображението, която помага на хората да насочат малко по-добре.

      Благодаря!
      Дъг

  5. 12
    • 13

      Уилям,

      Изглежда, че може да имате конфликт между имената на вашите коментарни класове и имената на класовете в графиката на страничната лента. Можете да ги назовете по различен начин, за да изчистите конфликта. Кажете ми, ако имате нужда от помощ!

      Дъг

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

    Хубав подход, но имам нужда от нещо за топографска карта, така че не мога да използвам правоъгълни области ... Мисля, че трябва да използвам изображението на стария стил с координати, но вероятно ще поразровя малко по-дълбоко ...

  11. 19

    Благодаря за тази информация, Дъг. Бях тук преди и се чудех как го направихте. Искахме да създадем карта като тази, която да вмъкнем след публикациите си и сега, след като разполагаме със средства, можем да го направим. Браво!

  12. 20
  13. 21

    Здравей Дъг,
    Оставих предишен коментар, но осъзнах, че едва ли изобщо давам представа за дилемата си. Адаптирахме тема на WordPress, за да ни помогнем да стартираме онлайн онлайн сериала тук:

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

    Сега ще видите, че имаме навигационен банер в горната част, изображение, което сме възнамерявали да картографираме, както имаме десетки пъти преди. / palmforehad. Никой от нас наистина не разбира CSS, но се спъваме достатъчно и досега сме се справяли добре до този момент. Вашата статия в ЕДИНСТВЕНИЯ от предоставените десетки е истинско прозрение за това как лесно да използвате картирането на изображения в CSS. Изготвих таблицата със стилове според вашите указания, но нямам идея къде да поставя HTML. Всичко, което казахте, е „Добавете вашия html ... Това е хубаво и просто“ и след това се свих, защото си помислих ... „не е достатъчно просто за мен!“ Не знаех, че мога да добавя html към която и да е от тези php страници в редактора на теми. Да поставя ли html в заглавката? Основният шаблон на индекса? Функциите? Предполагам, че всички потребители на wordpress имат възможност да редактират своята тема в редактора на таблото, което изглежда доста универсално по функционалност. Ако можете да предложите къде да поставите html, бих се радвал да адаптирам oru кода за моята лента за навигация.

    Благодарим ви, че споделихте знанията си с общността. Радвам се да ви донеса кафе.

    • 22

      Здравей Пей!

      Всички файлове за темата на вашия блог са достъпни за редактиране от администраторския панел. Ако щракнете върху Презентация и след това Редактор на теми, трябва да можете да видите списък с вашите файлове отдясно и редактор отляво.

      Ако искате това да е във вашата странична лента, вероятно имате страница в страничната лента. Щракнете, за да го редактирате и след това поставете предоставения HTML в страницата, където искате.

      Една бележка: Редактирането на таблицата със стилове е спрямо вашата страница, така че ще трябва да качите картината в директорията с изображения на теми, ако я препращате, както бихте направили други изображения във вашата тема.

      Надявам се, че помага!

    • 23

      Phay,
      Днес попаднах на този сайт и имах същата дилема като вас. Също така исках да добавя карта с изображение към заглавното изображение. След като се заиграх с него известно време, го разбрах правилно. Поставете div HTML във файла header.php. Сложих го между и. Не сте сигурни дали вашият шаблон има точното кодиране, но играйте с него във файла header.php и ще го разберете.
      -
      Paul

  14. 24

    Благодаря за бързата реакция!

    Не, не исках да е в страничната лента, тя е в горната част на страницата (можете да видите в връзката, която предоставих - розовата лента за навигация, която казва постоянно, за шоуто и др.)

    Цяла сутрин работя в таблото за съжаление, не съм сигурен в кой файл поставям html, както беше посочено по-горе, имам няколко, header.php, main index.php, functions.php, footer.php. Не съм сигурен къде да вмъкна html кода. (първата част, която предоставихте, вече съм вмъкнал остатъка в моя таблица със стилове) Имам изображението си на уебсайта, всичко е готово за работа, просто трябва да знам къде да добавя html частта от кода за адаптиране.

    Благодаря ви много за отделеното време и насочени въпроси от начинаещ.

    Фай

  15. 25

    ... Или може би някой би могъл да публикува в коментарите за това в кой файл поставяме html частта от кода. Един господин с няколко публикации нагоре каза, че го е разбрал. Не съм имал такъв късмет.

    Файлен

  16. 26
  17. 27

    Преживявам адски много време да намеря начин за вграждане на карта с изображения, върху която може да се кликва, в wordpress, защото тя премахва маркерите на html карта. Вашият начин би работил, но картата на САЩ очевидно е много сложна, за да се прецакате по този начин. Изгубих се.

    Помогне.

    Изглежда, че флашът е единствената ми възможност?

    • 28

      Дейв,

      Ако поставите изображението във вашия шаблон, ще се оправите. Ако поставите картата с изображения в действителното съдържание, може да срещнете проблеми с филтъра. Начинът, по който съм работил около това, е ужасен, но понякога използвам вградена рамка.

      Дъг

  18. 29

    Здравейте,

    изглежда, че картата с изображения и връзките са две различни неща, те не работят заедно, както прави картината с изображения в html

    когато включвам позициониране на фона (вляво в центъра) за картата на изображението, позиционирането на връзките не се проследява.

    някакъв начин да заобиколите това? аз съм много любител. Благодаря ти.

  19. 31

    Би ли се използвал подобен подход за по-голяма и по-сложна карта с изображения, какъвто се опитвам да използвам?

    Ако разгледате моя сайт, щракнете върху връзки вляво и ще видите изображението, което се опитвам да използвам като карта на изображението (под азбуката Текст).

    По принцип, опитвайки се да използвате изображението, за да отидете до всеки раздел от този списък с писмо.

    Очевидно прекарах 20 минути в изграждане на карта с GIMP и след това WP премахва маркерите на картата, така че така намерих вашия сайт.

    Въпреки това, може да обмисля използването на Flash

    Благодаря.

  20. 33

    В момента използвам оформление на шаблон и редактиране със собствени неща. Искам да добавя карта с изображения, но не съм сигурен къде да я поставя в css. изображението, на което искам да направя карта, е в заглавната част.

  21. 34

    здравей, изградих уебсайта си на joomla ... искам да използвам този метод, за да направя логото на страницата ми връзка към дома, казаха ми, че не мога да направя това с joomla, но тази статия ми дава надежда! помощта по имейл ще бъде много оценена ... Благодаря ви

  22. 35

    Здравей, Дъг - Изграждам доста сложна css-базирана карта с изображения, която също има отдалечени превъртания (в този случай текстът се показва другаде на страницата, когато задържите някоя от горещите точки на изображението). Както и да е, попаднах на вашия пример тук, докато изследвах това ... и мислех, че ще споделя следния вход:

    1. За достъпност не трябва да използвате видимост: none (или display: none, ако сте преценили това), за да скриете текста тук, като елемент, стилизиран с видимост: hidden няма да се чете от екранните четци (тези, които следват спецификациите) .

    Вместо това използвайте по-стабилна техника за подмяна на изображения. Предлагам или метода на Phark, или Gilder / Levin - това са просто по-добре документираните имена, за да потърсите в Google, за да намерите основните техники. Предпочитам основната книга, тъй като тя работи и с активиран CSS, но изображенията са изключени.

    2. Въпреки че не виждам да се счупи (използвайки FF3), вашето изпълнение на позициониране също има присъщи рискове. Абсолютно позиционираният елемент е позициониран спрямо най-близко позиционирания родител. По принцип бихте искали да зададете изрично контекст на позициониране, като приложите 'position: relative' към #subscription. Тогава децата (позиционираните връзки) могат да бъдат позиционирани в рамките на този родител. Този метод помага да се осигурят по-надеждни резултати в браузърите.

    Освен това, трябва да използвате декларациите за позициониране на „top: x“ и „left: x“ (където x е стойността на отместването, да речем в px), а не полета, за да обработите това позициониране. Отново не виждам непременно да се нарушава по начина, по който го имате, но отгоре и отляво са предназначени за това, така че защо да не ги използвате? Плюс това имате зададени плувки и полета за един и същ елемент, което при определени условия причинява грешка „двойно поле“ в IE6 (тествахте ли това там?) - докато има поправка, избягвате този проблем изцяло с помощта на и оставен вместо полета за позициониране в този случай.

    3. И накрая, защо да не използваме семантично неподреден списък за тези връзки вместо безсмисления div?

    Съжалявам, че се опитах ... Просто обичам да споделям, b / c. От опит знам как има много различни начини за използване на CSS, за да се получи желан резултат, но някои начини със сигурност работят по-добре (по-надеждни, в различни браузъри) от други . HTH.

  23. 36
  24. 37
  25. 38

    Много благодаря!! Вашите инструкции ми спестиха ЧАСОВЕ работа ... Аз съм нов в уеб разработката и току-що претърпях първия си голям проект. Направих го ... клиентът е щастлив, възторжен всъщност, и аз също!

  26. 39

    Здравейте, благодаря ви много, че публикувахте това! Години по-късно и все още помага ... хубаво! Трудно ми е да накарам моята карта с изображения да се свърже на правилното място. Имам банер и искам социалните икони в горния десен ъгъл на банера да се свързват, използвайки кода, който сте предоставили. Работи чудесно, с изключение на това, че правя нещо нередно, защото връзките ми се появяват в горната лява част на екрана, не над социалните икони, а над логото. Сигурен съм, че е нещо просто, но просто не мога да го разбера. Мислех да го споделя тук, в случай че имате някакви идеи. Благодаря отново за публикуването на това!

Какво мислите?

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните за коментарите ви.