Како направити мапу слика помоћу ЦСС-а

Опције

Желео сам нешто 'гееки', па сам се одлучио за 'џепну' графику која садржи све методе претплате за мој блог.

У доба Веба 1.0, колекција оваквих веза могла би да се изгради тако што ће се ваша слика спојити везама на свакој графици, а затим покушати да се све то поново заши заједно са табелом. То се такође може постићи коришћењем мапа слика али за то је обично потребан алат за изградњу координатног система. Коришћење каскадних табела стилова олакшава ово ... без спајања слика и без покушаја проналаска алата за изградњу вашег координатног система!

  1. Направите своју слику коју желите да користите. Можете користити ову графику у наставку (кликните десним тастером миша и сачувајте за преузимање):
    Опције
  2. Отпремите своју слику у директоријум који је у односу на ваш ЦСС. У ВордПрессу то можете најлакше учинити ако га ставите у директоријум слика у директоријуму тема.
  3. Додајте свој ХТМЛ. Лепо је и једноставно ... див са три везе:
    > див ид = "претплатите се">> а ид = "рсс" хреф = "[ваш линк до фида]" титле = "Претплатите се са РСС" >> спан цласс = "хиде"> РСС> / спан >> / а>> а ид = "емаил" хреф = "[ваш линк за претплату на е-пошту]" титле = "Претплатите се путем е-поште" >> спан цласс = "хиде"> Емаил> / спан >> / а>> а ид = "мобиле" хреф = "[ваш мобилни линк]" титле = "Погледајте верзију за мобилне уређаје" >> спан цласс = "хиде"> Мобиле> / спан >> / а>> / див>
    
  4. Уредите свој Цасцадинг Стиле Схеет. Додаћете 6 различитих стилова. 1 стил за целокупни див, 1 за ознаку, тако да не приказује никакву декорацију текста, 1 стил за сакривање текста (користи се за приступачност) и 1 спецификација стила за сваку од веза:
    #субсцрибе {/ * блок позадинске слике * / дисплаи: блоцк; ширина: 215пк; висина: 60пк; позадина: урл (имагес / оптионс.пнг) без понављања; маргин-топ: 0пк; } # претплатите се на {тект-децоратион: ноне; } .хиде {видљивост: скривено; } #рсс {/ * РСС Линк * / флоат: лефт; позиција: апсолутна; ширина: 50пк; висина: 50пк; маргина-лева: 20пк; маргин-топ: 5пк; } #емаил {/ * Линк е-поште * / флоат: лефт; позиција: апсолутна; ширина: 50пк; висина: 50пк; маргина-лева: 70пк; маргин-топ: 5пк; } #мобиле {/ * Мобиле Линк * / флоат: лефт; позиција: апсолутна; ширина: 50пк; висина: 50пк; маргина-лева: 130пк; маргин-топ: 5пк; }

Позиционирање је лепо и једноставно ... додајте висину и ширину, а затим подесите леву маргину са леве стране слике, а горњу маргину са горње стране слике!

Овај пост „Како да“ служи за улазак у Штребери су врхунско секси такмичење „Како да“! Једна напомена, истина је да мапа слике може имати много сложеније полигоне, али заправо нисам видео превише места на којима то мора имати. Приметио сам да је велика стара РСС слика на Геексима секси бочна трака ... то је добро место за везу. 😉

АЖУРИРАНО 10 за бољу доступност уз савете Фил!

Спонзор: Ако сте почетник у веб дизајну, онда направите сопствену веб страницу на прави начин користећи ХТМЛ и ЦСС, друго издање је обавезно. У овом водичу који је лако пратити научићете како да направите веб страницу на најбољи могући начин - радећи то сами!

Komentari

  1. 1

    Даг, то изгледа лепо, али је врло неприступачно.

    Узмите у обзир слепог корисника са читачем екрана, корисника са прегледачем само са текстом или било ког ко посећује страницу без омогућених ЦСС-а или Слике (на пример, можда мобилни корисник који тражи везу до ваше веб локације прилагођене мобилним уређајима). Нико од њих неће знати за та три линка јер немају текст. Ако су слике искључене, корисник неће видети ни алт текст да опише шта би тамо било, јер је то слика у позадини.

    Боље би било исецати слике, повезати их, ставити на листу и лебдети једну поред друге. Или чак користите текст за везе и замените текст стандардном техником замене слика. Ово изгледа згодно, али чини ствари много тежим / немогућим онима који не користе стандардни графички претраживач.

    • 2

      Не бих се сложио (пошто имате више стручности), Пхил, свака од веза има наслов, тако да је свака у потпуности доступна. Читање наслова текста је способност апликација за приступачност као што је ЈАВС. Ево а добар пост о насловима у везама и његов утицај на приступачност.

      • 3

        Доуг,

        ЈАВС подразумевано не чита наслове веза, али у праву сте, може. Зашто бисте тражили наслове веза ако ипак нисте знали да их има, а чак и да јесте, ово сигурно пада на питање употребљивости, што значи да мање способним корисницима дајете другоразредно искуство коришћења ваше странице.

        За прегледаче текста, чланак који ми усмерите ка том Линк-у такође вам омогућава да направите листу наслова веза, али моја поента остаје да ако нисте знали да тамо постоји веза, јер уопште није било текста , зашто бисте тражили насловни текст?

        Коначно, атрибути наслова везе и даље се неће појављивати свима који прегледавају без омогућених слика или без омогућених ЦСС-а.

        Тако да, везе са насловима су боље од оних без, али у овом случају су само маргиналне.

        Због тога је употреба слике, тако да се може прочитати алт текст или замена слике, тако да је текст тамо, много сигурнија, приступачнија и употребљивија опција.

        • 4

          Добре информације, Пхил. Покушаћу да ово побољшам текстом, али једноставно сакријем текст - на тај начин ће приступачни производ попут ЈАВС прочитати текст везе и текст ће се приказати ако су ЦСС или Слике онемогућени.

          Не слажем се да би једино доступно решење било постављање слике са везом.

  2. 5
    • 6
      • 7

        То је нешто на шта често не обраћамо пажњу, Пхил! Такође, омогућавање приступачности ваше апликације често има и добре резултате претраживача.

        Заиста ценим стручност и повратне информације!

  3. 8

    Украо сам га. Ето, рекао сам.

    Доуг, графика је фантастична, а кодирање је невероватно једноставно да ме плаши (играо сам се са ЦСС-ом и коначно сам „схватио“).

    Дорађен је код како би удовољио мојим потребама, смислио где да убацим ХТМЛ бит, и искрено, изгледа сјајно и очистио је врх моје бочне траке који ме је лудовао.

    Само бих ти можда још морао купити ту кафу!

  4. 10

    Доуг,

    Бићу противни глас, користећи своје искуство као пример. Сећам се наше е-поште када се моја кућна адреса е-поште променила и приметили сте да морам једноставно да се одлучим за своју нову. Морам да признам да сам неко време „откривао“ нову функцију на вашој веб локацији да бих се поново пријавио. Део овога је било и зато што је оригинална веза била мало традиционалнија и нејасно сам је запамтио. Друга је била зато што ми бочно половична коверта у почетку једноставно није изгледала као коверта. Након отприлике 5 или више минута почео сам да прелазим мишем преко сваке слике и када се приказао наслов „Претплати се е-поштом“, тада сам знао да послујем. Мој мозак је такође схватио која је слика везе.

    Али, бар мени, бочна коверта једноставно није била интуитивна као место за претплату на обавештења путем е-поште. И (јер ми је речено да увек завршим са нечим лепим) слажем се са Пхил-ом горе; метода је заиста једноставна и цео предмет одлично функционише. Претпостављам да је ваш алат за дизајн помогао да вам дају тачне димензије за 3 одељка; да ли је то тачна претпоставка? Морам то да претпоставим, јер да имам, рецимо, слику ширине 400 пиксела, морао бих да знам тачна подешавања итд.

  5. 12
    • 13

      Виллиам,

      Чини се да можда имате сукоб између имена класа коментара и имена класа на графичкој бочној траци. Можете их именовати другачије да бисте разјаснили сукоб. Јавите ми ако вам треба помоћ!

      Даг

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

    Добар приступ, али треба ми нешто за топографску мапу, па не могу да користим правоугаоне површине ... Мислим да морам да користим стаг имагемап са координатама, али вероватно ћу мало дубље копати ...

  11. 19

    Хвала на овим информацијама, Доуг. Био сам овде раније и питао се како си то успео. Желели смо да направимо такву мапу коју ћемо убацити после наших постова, а сада када имамо средстава то можемо и учинити. Браво!

  12. 20
  13. 21

    Здраво Доуг,
    Оставио сам претходни коментар, али схватио сам да тешко дајем икакав увид у своју дилему. Прилагођавали смо вордпресс тему како би нам помогли да овде покренемо наш мрежни ситцом:

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

    Сад ћете видети да на врху имамо банер за навигацију, слику коју смо намеравали да мапирамо као и десетине пута раније. / палмфорехад. Нико од нас заиста не разуме ЦСС, али посрћемо около довољно и до сада смо се добро снашли до овог тренутка. Ваш чланак у САМО ЈЕДНОМ од десетина које су пружили прави је увид у то како лако користити мапирање слика у ЦСС-у. Обрадио сам табелу стилова према вашим упутствима, али немам појма где да поставим ХТМЛ. Све што сте рекли је „Додајте свој хтмл ... лепо је и једноставно“, а онда сам се најежио јер сам помислио .. „недовољно једноставно за мене!“ Нисам знао да могу да додам хтмл на било коју од ових пхп страница у уређивачу тема. Да ли да поставим хтмл у заглавље? Шаблон главног индекса? Функције? Претпостављам да сви корисници вордпресс-а имају могућност уређивања теме у уређивачу контролне табле, што делује прилично универзално у функционалности. Ако бисте могли да предложите где да поставите хтмл, волео бих да прилагодим ору код својој траци за навигацију.

    Хвала што сте своје знање поделили са заједницом. Драго ми је да вам донесем кафу.

    • 22

      Здраво Пхаи!

      Све датотеке са темом вашег блога доступне су преко администраторског панела за уређивање. Ако кликнете на Пресентатион, а затим на Едитор тема, требало би да видите листу датотека са десне стране и едитор са леве стране.

      Ако желите да ово буде на вашој бочној траци, вероватно имате страницу бочне траке. Кликните да бисте га уредили, а затим ставите ХТМЛ који се налази на страници где желите.

      Једна напомена: Уређивање табеле стилова односи се на вашу страницу, па ћете морати да отпремите слику у директоријум слика тема ако је референцирате као на друге слике у својој теми.

      Надам се да помаже!

    • 23

      Пхаи,
      Данас сам наишао на ову страницу и имао сам исту дилему као и ви. Такође сам желео да додам мапу слике на заглавље. Након што сам се неко време поиграо са тим, добро сам схватио. Ставите див ХТМЛ у датотеку хеадер.пхп. Ставио сам је између и. Нисам сигуран да ли ваш предложак има тачно кодирање, али поиграјте се с њим у датотеци хеадер.пхп и схватићете.
      -
      Павле

  14. 24

    Хвала на брзом одговору!

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

    Цело јутро радим на контролној табли, нажалост, нисам сигуран у коју датотеку стављам хтмл, као што је горе наведено, имам их неколико, хеадер.пхп, маин индек.пхп, фунцтионс.пхп, фоотер.пхп. Нисам сигуран где да убацим хтмл код. (први део који сте навели, остатак сам већ убацио у табелу стилова) Имам своју слику тамо на веб локацији, све је спремно за рад, само треба да знам где да додам хтмл део кода за прилагођавање.

    Хвала вам пуно на вашем времену и постављању питања од почетника.

    Пхаи

  15. 25

    ... Или би можда неко могао да објави у коментарима у коју датотеку смештамо хтмл део кода. Господин који је објавио неколико постова рекао је да је то схватио. Нисам имао те среће.

    Пхаилен

  16. 26
  17. 27

    До врага проналазим начин да уградим мапу слике на коју се може кликнути у вордпресс јер уклања ХТМЛ ознаке мапе. Ваш начин би функционисао, али мапа САД-а очигледно је сложен начин да се зезнете на овај начин. Изгубио сам се.

    Помоћ.

    Изгледа да ми је блиц једина опција?

  18. 29

    Здраво,

    чини се да су мапа слике и везе две различите ствари, оне не раде заједно као што то ради мапа слике у хтмл-у

    када укључим позиционирање у позадини (средина лево) за мапу слике, позиционирање веза се не наставља.

    било који начин да се ово заобиђе? ја сам врло аматерски. Хвала вам.

  19. 31

    Да ли би се сличан приступ користио за већу и сложенију мапу слика какав покушавам да користим?

    Ако погледате моју веб локацију, кликните на везе лево и видећете слику коју покушавам да користим као мапу слике (под абецедом Текст).

    У основи, покушавам да користим Имаге да бих прешао на сваки одељак ове листе словом.

    Очигледно сам провео 20 минута градећи карту помоћу ГИМП-а, а затим ВП уклања ознаке мапе, па сам тако пронашао вашу веб локацију.

    Иако можете да размишљате користећи Фласх

    Хвала.

  20. 33

    Тренутно користим изглед шаблона и уређивање са својим стварима. Желим да додам мапу слике, али нисам сигуран где да је поставим у цсс. слика којој желим да направим мапу налази се у заглављу.

  21. 34

    здраво, направио сам своју веб страницу на јоомли ... желим да користим овај метод да логотип моје странице направи везу до куће, речено ми је да то не могу да урадим са јоомлом, али овај чланак ми даје наду! помоћ путем е-маила би била веома захвална .... хвала

  22. 35

    Здраво Доуг - Правим прилично сложену мапу слика засновану на ЦСС-у која такође има даљинско превртање (у овом случају текст се приказује негде другде на страници када задржите показивач на некој од тачака слике). Било како било, наишао сам овде на ваш пример док сам то истраживао ... и мислио сам да поделим следећи податак:

    1. За приступачност не би требало да користите видљивост: ниједна (или приказ: нема ако сте то сматрали) да бисте овде сакрили текст, као елемент стилизован видљивошћу: скривени неће читати екрани (они који следе спецификације) .

    Уместо тога, користите робуснију технику замене слика. Предлажем или Пхаркову методу или Гилдер / Левин - то су само боље документована имена која треба прогуглати да би се пронашле основне технике. Више волим главну књигу јер ради и са омогућеним ЦСС-ом, али слике су искључене.

    2. Иако не видим да се ломи (користећи ФФ3), ваша примена позиционирања такође има својствене ризике. Апсолутно позиционирани елемент позициониран је у односу на најближи родитељ. У основи, желели бисте експлицитно да поставите контекст позиционирања применом 'поситион: релативе' на #субсцриптион. Тада деца (позиционирани линкови) могу бити позиционирана унутар тог родитеља. Овај метод помаже у обезбеђивању поузданијих резултата у читачима.

    Такође, требало би да користите декларације позиционирања „топ: к“ и „лефт: к“ (где је к вредност помака, рецимо у пк), а не маргине да бисте управљали тим позиционирањем. Опет, не видим нужно да се ломи онако како ви имате, али горњи и леви су намењени овоме, па зашто их не бисте користили? Уз то, постављени су флоатс и маргине на истом елементу, што под одређеним условима узрокује грешку „двоструке маргине“ у ИЕ6 (да ли сте то тамо тестирали?) - иако постоји решење, тај проблем у потпуности избегавате помоћу топ-а и остављена уместо маргина за позиционирање у овом случају.

    3. Коначно, зашто за ове везе не бисмо користили семантички звучно неуређену листу уместо бесмисленог див-а?

    Извините што се дронирам ... Само волим да поделим, б / ц. Из искуства знам како постоји много различитих начина да се ЦСС добије за постизање жељеног резултата, али неки начини сигурно раде боље (поузданији, више прегледачи) од других . ХТХ.

  23. 36
  24. 37
  25. 38

    Хвала Вам много!! Ваша упутства су ми уштедела САТИ рада ... Нови сам у развоју веб страница и управо сам претрпио свој први велики пројекат. Успео сам ... клијент је срећан, заправо усхићен, а и ја сам!

  26. 39

    Здраво, пуно вам хвала што сте ово објавили! Годинама касније и даље помаже ... лепо! Трудим се да се моја мапа слика повеже на правом месту. Имам банер и желим да се иконе друштвених мрежа у горњем десном делу банера повезују помоћу кода који сте навели. Одлично функционише, осим што радим нешто погрешно, јер се моји линкови појављују на крајњој левој страни екрана, не преко друштвених икона, већ преко логотипа. Сигуран сам да је то нешто једноставно, али једноставно не могу да схватим. Мислио сам да бих је овде поделио у случају да имате неке увиде. Хвала још једном што сте ово објавили!

Шта ви мислите?

Ова страница користи Акисмет како би смањила нежељену пошту. Сазнајте како се ваш коментар обрађује.