CSS ilə şəkil xəritəsi necə qurulur

variantları

'Geeky' bir şey istəyirdim, buna görə blogumun bütün abunə metodlarını özündə cəmləşdirən 'cib' qrafikinə qərar verdim.

Veb 1.0 günlərində, şəkillərinizi hər bir qrafikdəki keçidlərlə birləşdirərək, sonra hamısını bir masa ilə yenidən tikməyə çalışaraq, bu kimi bağlantılar toplusu yaradıla bilər. Bu da istifadə edərək əldə edilə bilər şəkil xəritəsi lakin bunun üçün ümumiyyətlə koordinat sisteminin qurulması üçün bir vasitə lazımdır. Cascading Style Sheets istifadə edərək bunu bir ton daha asanlaşdırır ... birləşdirən şəkillər və koordinat sisteminizi qurmaq üçün bir vasitə tapmağa çalışmayın!

  1. Istifadə etmək istədiyiniz şəklinizi yaradın. Aşağıdakı bu qrafikdən istifadə edə bilərsiniz (sağ vurun və yükləmək üçün qeyd edin):
    Nizamlamalar
  2. Təsvirinizi CSS-yə nisbətən bir qovluğa yükləyin. WordPress-də bunu mövzu qovluğunda bir şəkil qovluğuna qoyaraq ən asanlıqla etmək olar.
  3. HTML-nizi əlavə edin. Gözəl və sadədir ... içərisində üç link olan div:
    > div id = "subscribe">> a id = "rss" href = "[feed linkiniz]" title = "RSS ilə abunə olun" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[e-poçtunuza abunə olunma linki]" title = "E-poçtla abunə olun" >> span class = "hide"> E-poçt> / span >> / a>> a id = "mobile" href = "[mobil bağlantınız]" title = "Mobil versiyaya bax" >> span class = "hide"> Mobil> / span >> / a>> / div>
    
  4. Cascading Style Sheet-i düzəldin. 6 fərqli üslub əlavə edəcəksiniz. Ümumi div üçün 1 üslub, hər hansı bir mətn bəzəyi göstərməməsi üçün etiket üçün 1, mətni gizlətmək üçün 1 üslub (əlçatanlıq üçün istifadə olunur) və əlaqələrin hər biri üçün 1 stil spesifikasiyası:
    #subscribe {/ * background image block * / display: block; genişlik: 215 piksel; hündürlük: 60 piksel; background: url (images / options.png) təkrarlanmayan; margin-top: 0px; } # bir abunə olun {mətn bəzəyi: yoxdur; } .gizlə {görünürlük: gizli; } #rss {/ * RSS Link * / float: left; mövqe: mütləq; genişlik: 50px; hündürlük: 50px; margin sol: 20px; margin-top: 5px; } # e-poçt {/ * E-poçt bağlantısı * / float: sol; mövqe: mütləq; genişlik: 50px; hündürlük: 50px; margin sol: 70px; margin-top: 5px; } #mobile {/ * Mobile Link * / float: left; mövqe: mütləq; genişlik: 50px; hündürlük: 50px; margin sol: 130px; margin-top: 5px; }

Yerləşdirmə gözəl və sadədir ... bir hündürlük və genişlik əlavə edin və sonra sol haşiyəni şəklin sol tərəfindən, üst haşiyəni isə görüntünün yuxarı hissəsindən seçin!

Bu "Nasıl Yapılır" yazısı daxil olmaq üçündür Geeks, Seksi son "Necə" Yarışmasıdır! Bir qeyd, bir şəkil xəritəsinin daha mürəkkəb çoxbucaqlı ola biləcəyi doğrudur, amma bunun olması lazım olan çox yer görmədim. Geeks üzərindəki böyük ol RSS şəklinin Seksiya kənar çubuğu olduğunu gördüm ... bir əlaqə üçün yaxşı bir yerdir. 😉

Tövsiyəsi ilə daha yaxşı əlçatanlıq üçün 10/3/2007 YENİLƏNİB Phil!

Sponsor: Veb dizaynına yeni başlamısınızsa, HTML və CSS-dən istifadə edərək öz veb saytınızı düzgün bir şəkildə qurun, 2nd Edition mütləq bir şeydir. İzlənməsi asan olan bu təlimatda bir veb sayt qurmağı ən yaxşı şəkildə - özünüz etməklə öyrənəcəksiniz!

41 Şərhlər

  1. 1

    Doug, bu gözəl üsul kimi görünür, lakin çox əlçatmazdır.

    Ekran oxuyucusu olan kor istifadəçini, yalnız mətn brauzeri olan istifadəçini və ya CSS və ya Şəkilləri aktivləşdirmədən sayta daxil olan hər kəsi (məsələn, mobil uyğun saytınızın linkini axtaran mobil istifadəçi kimi) düşünün. Onların heç biri bu üç keçiddən xəbər tutmayacaq, çünki mətnləri yoxdur. Şəkillər söndürülübsə, istifadəçi orada nə olacağını təsvir etmək üçün alt mətni belə görməyəcək, çünki bu, fon şəklidir.

    Şəkilləri dilimləmək, əlaqələndirmək, siyahıya salmaq və bir-birinin yanında yerləşdirmək daha yaxşıdır. Və ya hətta keçidlər üçün mətndən istifadə edin və standart şəkil dəyişdirmə texnikasından istifadə edərək mətni əvəz edin. Bu rahat görünür, lakin standart qrafik brauzerdən istifadə etməyənlər üçün işləri daha da çətinləşdirir/mümkünsüz edir.

    • 2
      • 3

        Doug,

        JAWS defolt olaraq link başlıqlarını oxumur, lakin siz haqlısınız, bunu edə bilər. Əgər bunun orada olduğunu bilmirsinizsə, niyə link başlıqları axtarırdınız və belə olsa belə, şübhəsiz ki, bu, istifadəyə yararlılıq probleminə düşür, o deməkdir ki, daha az imkanlı istifadəçilərə saytınızdan istifadə etmək üçün ikinci dərəcəli təcrübə təqdim edirsiniz.

        Mətn brauzerləri üçün, məni həmin Lynx-ə yönəltdiyiniz məqalə də link başlıqlarının siyahısını təqdim etməyə imkan verir, lakin mənim fikrim odur ki, əgər orada bir keçid olduğunu bilmirsinizsə, ilk növbədə mətn yox idi. , niyə başlıq mətnini axtarırsınız?

        Nəhayət, keçid başlığı atributları hələ də şəkilləri aktivləşdirmədən və ya CSS aktivləşdirmədən baxan hər kəs üçün görünməyəcək.

        Beləliklə, bəli, başlıqlı bağlantılar olmayanlardan daha yaxşıdır, lakin bu halda yalnız marjinaldır.

        Buna görə də, alt mətnin oxuna bilməsi və ya mətnin orada olması üçün şəklin dəyişdirilməsi üçün bir şəkil istifadə etmək daha təhlükəsiz, daha əlçatan və daha faydalı seçimdir.

        • 4

          Yaxşı məlumat, Phil. Mən bunu mətnlə təkmilləşdirməyə çalışacağam, ancaq mətni gizlətməyə çalışacağam – beləliklə, JAWS kimi əlçatan məhsul link mətnini oxuyacaq və CSS və ya Şəkillər deaktiv edilərsə, mətn göstəriləcək.

          Mən razılaşmıram ki, yeganə əlçatan həll yolu linki olan Şəkil qoymaqdır.

  2. 5
    • 6

      Gözəl Doug!

      Seçici olduğum üçün üzr istəyirəm, mən belə axmaq şeylərə həddən artıq həvəslənirəm 😀

      • 7

        Bu, çox vaxt diqqət etmədiyimiz bir şeydir, Fil! Həmçinin, tətbiqinizi əlçatan etmək çox vaxt yaxşı axtarış motoru nəticələrinə malikdir.

        Mən təcrübə və rəyi həqiqətən yüksək qiymətləndirirəm!

  3. 8

    oğurladım. Orada dedim.

    Doug, qrafika fantastikdir və kodlaşdırma o qədər sadədir ki, məni qorxudur (CSS ilə oynayırdım və indi nəhayət “anladım”).

    Ehtiyaclarımı ödəmək üçün kodu düzəltdi, HTML bitini hara atacağımı anladım və açığını desəm, o, əla görünür və məni DƏLİ olan kənar panelimdəki yuxarı hissəni təmizlədi.

    Mən hələ o qəhvəni sənə almalıyam!

  4. 10

    Doug,

    Təcrübəmi nümunə olaraq istifadə edərək, fərqli bir səs olacağam. Ev e-poçtum dəyişdikdə və siz sadəcə olaraq yeni e-poçtumu seçməli olduğumu qeyd etdiyiniz zaman e-poçtlarımızı xatırlayıram. Etiraf etməliyəm ki, yenidən daxil olmaq üçün saytınızdakı yeni funksiyanı “kəşf etmək” üçün çox vaxt keçirdim. Bunun bir hissəsi ona görə idi ki, orijinal link bir az daha ənənəvi idi və mən onu qeyri-müəyyən xatırladım. Digəri ona görə idi ki, yan yarım zərf əvvəlcə mənə zərf kimi görünmürdü. Təxminən 5 və ya daha çox dəqiqədən sonra siçanımı hər təsvirin üzərində gəzdirməyə başladım və “E-poçtla abunə ol” başlığı görünəndə biznesdə olduğumu bildim. Beynim də link şəklinin nə olduğunu anladı.

    Ancaq ən azı mənim üçün yan zərf e-poçt bildirişlərinə abunə olmaq yeri kimi mənim üçün intuitiv deyildi. Və (çünki mənə deyirdilər ki, həmişə gözəl bir şeylə bitirim) yuxarıdakı Phil ilə razıyam; üsul həqiqətən sadədir və bütün element əla işləyir. Hesab edirəm ki, dizayn alətiniz sizə 3 bölmə üçün dəqiq ölçüləri verməyə kömək etdi; bu düzgün fərziyyədirmi? Mən belə güman etməliyəm, çünki məsələn, 400 piksel genişlikdə bir şəklim olsaydı, düzgün parametrləri bilməliyəm və s.

  5. 12
    • 13

      William,

      Görünür, şərh sinif adlarınızla yan panel qrafikindəki sinif adları arasında ziddiyyət yarana bilər. Münaqişəni aydınlaşdırmaq üçün onları fərqli adlandıra bilərsiniz. Bir əl lazımdırsa, mənə bildirin!

      Doug

  6. 14
  7. 15

    Möhtəşəm! Bunu alacam 🙂 Paylaşdığınız üçün təşəkkürlər. Bu başlığı bəyənirəm, dostum! Bunu necə etdiyinizi öyrənmək istərdim 🙂

    Cheers!

  8. 16
  9. 17
  10. 18

    Gözəl yanaşmadır, amma topoqrafik xəritə üçün bir şeyə ehtiyacım var, ona görə də düzbucaqlı sahələrdən istifadə edə bilmirəm… Məncə, köhnə üslublu təsvir xəritəsindən koordinatlarla istifadə etməliyəm, amma yəqin ki, bir az daha dərin qazacağam…

  11. 19

    Bu məlumat üçün təşəkkür edirik, Doug. Mən əvvəllər burada olmuşdum və bunu necə etdiyini merak etmişdim. Yazılarımızdan sonra əlavə etmək üçün belə bir xəritə yaratmaq istədik və indi imkanlarımız var, biz bunu edə bilərik. Bravo!

  12. 20
  13. 21

    Salam Doug,
    Əvvəlki şərhi tərk etdim, lakin başa düşdüm ki, mən demək olar ki, mənim dilemma ilə bağlı heç bir fikir təklif etmirəm. Onlayn sitcomumuzu burada başlatmağa kömək etmək üçün wordpress mövzusunu uyğunlaşdırdıq:

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

    İndi, yuxarıda naviqasiya bannerimiz olduğunu, əvvəllər onlarla dəfə olduğu kimi xəritəni çəkmək niyyətində olduğumuz şəkli görəcəksiniz. /palm qabaqda. Heç birimiz həqiqətən CSS-ni başa düşmürük, lakin biz kifayət qədər büdrəmişik və bu günə qədər yaxşı iş görmüşük. Təqdim olunan onlarla məqalədən YALNIZ BİRİNDƏ olan məqaləniz CSS-də təsvirin xəritəsini necə asanlıqla istifadə etmək barədə real fikirdir. Mən üslub cədvəlini sizin göstərişlərinizə uyğun tərtib etdim, lakin HTML-ni hara yerləşdirmək barədə heç bir fikrim yoxdur. Bütün dediyin “html-ni əlavə et... Bu gözəl və sadədir” və sonra mən “mənim üçün kifayət qədər sadə deyil!” deyə düşündüm. Mövzu redaktorunda bu php səhifələrinin hər hansı birinə html əlavə edə biləcəyimi bilmirdim. Html-i başlığa yerləşdirirəm? Əsas İndeks şablonu? Funksiyalar? Güman edirəm ki, bütün wordpress istifadəçiləri öz mövzularını tablosunun redaktorunda redaktə etmək imkanına malikdirlər ki, bu da funksionallıq baxımından olduqca universal görünür. Html-i hara yerləşdirməyi təklif etsəniz, oru kodunu naviqasiya panelimə uyğunlaşdırmaq istərdim.

    Biliklərinizi cəmiyyətlə paylaşdığınız üçün təşəkkür edirik. Sizə qəhvə verməkdən məmnunam.

    • 22

      Salam Phay!

      Bloqunuzun mövzusu üçün bütün fayllar redaktə etmək üçün İdarəetmə paneli vasitəsilə mövcuddur. Təqdimat və sonra Mövzu Redaktoru üzərinə klikləsəniz, sağda fayllarınızın siyahısını və solda redaktoru görə bilməlisiniz.

      Bunun yan panelinizdə olmasını istəyirsinizsə, yəqin ki, Kenar çubuğu səhifəniz var. Onu redaktə etmək üçün klikləyin və sonra təqdim olunan HTML-ni səhifənin istədiyiniz yerə yerləşdirin.

      Bir qeyd: Üslub cədvəlinin redaktəsi səhifənizə nisbidir, ona görə də mövzunuzdakı digər şəkillər kimi istinad edirsinizsə, şəkli mövzu şəkilləri kataloquna yükləməlisiniz.

      Ki, kömək ümid!

    • 23

      Phay,
      Bu gün bu saytla rastlaşdım və sizinlə eyni dilemma yaşadım. Mən də başlıq şəklinə şəkil xəritəsi əlavə etmək istədim. Bir müddət onunla oynadıqdan sonra düz başa düşdüm. Div HTML-ni header.php faylına qoyun. və arasında qoyuram. Şablonunuzda dəqiq kodlaşdırma olub-olmadığından əmin deyiləm, lakin onunla header.php faylında oynayın və siz bunu anlayacaqsınız.
      -
      Paul

  14. 24

    Sürətli cavab üçün təşəkkür edirik!

    Xeyr, bunun yan paneldə olmasını istəməzdim, o, səhifənin yuxarı hissəsindədir (təqdim etdiyim linkdə görə bilərsiniz - çəhrayı naviqasiya çubuğunda, şou haqqında və s.)

    Bütün səhər tablosunda işləmişəm, təəssüf ki, html-ni hansı faylda yerləşdirdiyimi bilmirəm, yuxarıda deyildiyi kimi, mənim bir neçə, header.php, main index.php, functions.php, footer.php var. Html kodunu hara daxil edəcəyimi bilmirəm. (təqdim etdiyiniz birinci hissə, qalanını artıq üslub cədvəlimə daxil etmişəm) Vebsaytda mənim şəklim var, hər şey hazırdır, sadəcə uyğunlaşma üçün kodun html hissəsini hara əlavə edəcəyimi bilməliyəm.

    Vaxt ayırdığınız və təcrübəsiz bir adamın suallarını cavablandırdığınız üçün çox sağ olun.

    frezeleme

  15. 25

    ... Və ya bəlkə kimsə şərhlərdə kodun html hissəsini hansı fayla yerləşdirdiyimizi yaza bilər. Bir neçə ismarıc yuxarıda bir centlmen bunu başa düşdüyünü söylədi. Mən o qədər şanslı olmamışdım.

    Phaylen

  16. 26
  17. 27

    WordPress-də html xəritə teqlərini sildiyinə görə kliklənən şəkil xəritəsini yerləşdirməyin yolunu tapmaq üçün çox vaxt keçirirəm. Sizin yolunuz işə yarayacaq, lakin ABŞ-ın xəritəsi açıq-aydın bu yolla çətinləşəcək bir yoldur. mən itmişəm.

    Kömək edin

    Deyəsən flaş mənim yeganə seçimimdir?

    • 28

      Dave,

      Şəkili şablonunuza yerləşdirsəniz, yaxşı olar. Şəkil xəritəsini faktiki məzmuna qoysanız, filtrlə bağlı problemlərlə üzləşə bilərsiniz. Bunun üzərində işlədiyim üsul dəhşətlidir, lakin bəzən iframe-dən istifadə etmişəm.

      Doug

  18. 29

    Salam,

    Görünür, şəkil xəritəsi və keçidlər iki fərqli şeydir, html-dəki şəkil xəritəsi kimi birlikdə işləmirlər.

    Şəkil xəritəsi üçün fon yerləşdirməsini (mərkəzdə solda) daxil etdiyim zaman, keçidlərin yerləşdirilməsi izlənmir.

    bunun ətrafında olmaq üçün hər hansı bir yol? çox həvəskaram. çox sağ ol.

  19. 31

    Bənzər bir yanaşma mənim istifadə etməyə çalışdığım kimi daha böyük və daha mürəkkəb şəkil xəritəsi üçün istifadə edilə bilərmi?

    Əgər saytıma baxırsınızsa, soldakı keçidlərə klikləyin və siz şəkil xəritəsi kimi istifadə etməyə çalışdığım şəkli görəcəksiniz (Mətn əlifbası altında).

    Əsasən, bu siyahının hər bir bölməsinə məktubla getmək üçün Şəkildən istifadə etməyə çalışırıq.

    Göründüyü kimi, mən GIMP ilə xəritə yaratmağa 20 dəqiqə sərf etdim və sonra WP xəritə etiketlərini sildi, beləliklə saytınızı tapdım.

    Bununla belə, Flash-dan istifadə etməyi düşünə bilərsiniz

    Thanks.

  20. 33

    Mən hazırda şablon tərtibatından istifadə edirəm və öz materiallarımla redaktə edirəm. Mən şəkil xəritəsi əlavə etmək istəyirəm, lakin onu css-də hara yerləşdirəcəyimi bilmirəm. xəritəsini düzəltmək istədiyim şəkil başlıq hissəsindədir.

  21. 34

    salam, mən veb saytımı joomla üzərində qurdum…bu üsuldan istifadə edərək səhifəmin loqotipini evə keçid etmək istəyirəm, mənə dedilər ki, joomla ilə bunu edə bilməzsiniz, lakin bu məqalə mənə ümid verir! e-poçt vasitəsilə kömək çox yüksək qiymətləndiriləcək .... təşəkkür edirəm

  22. 35

    Salam Doug – Mən kifayət qədər mürəkkəb css-əsaslı şəkil xəritəsi hazırlayıram ki, onun da uzaqdan dəyişdirilməsi var (bu halda, şəkil qaynar nöqtələrindən birini üzərinə götürdüyünüz zaman mətn səhifənin başqa yerində göstərilir). Hər halda, mən bunu araşdırarkən burada sizin nümunənizlə rastlaşdım… və aşağıdakı məlumatı bölüşmək istədim:

    1. Əlçatanlıq üçün burada mətni gizlətmək üçün visibility:none (və ya bunu hesab edirsinizsə, display:none) funksiyasından istifadə etməməlisiniz, çünki görünmə qabiliyyəti ilə tərtib edilmiş element: hidden ekran oxuyucuları (spesifikasiyaya əməl edənlər) tərəfindən oxunmayacaq. .

    Bunun əvəzinə, daha möhkəm bir şəkil dəyişdirmə texnikasından istifadə edin. Mən ya Phark metodunu, ya da Gilder/Levin-i təklif edirəm – bunlar əsas texnikaları tapmaq üçün Google-da daha yaxşı sənədləşdirilmiş adlardır. Mən G/L-ə üstünlük verirəm, çünki o, həmçinin CSS-i aktivləşdirir, lakin şəkillər söndürülür.

    2. Mən onun pozulduğunu görməsəm də (FF3-dən istifadə etməklə), sizin yerləşdirmənin həyata keçirilməsinin də özünəməxsus riskləri var. Mütləq yerləşdirilmiş element ən yaxın yerləşmiş valideyninə nisbətən yerləşdirilir. Əsasən, siz #subscription-a 'mövqe:nisbi' tətbiq etməklə yerləşdirmə kontekstini açıq şəkildə təyin etmək istərdiniz. Sonra uşaqlar (yerləşdirilmiş keçidlər) həmin valideyn daxilində yerləşdirilə bilər. Bu üsul brauzerlər arasında daha etibarlı nəticələri təmin etməyə kömək edir.

    Həmçinin, daha sonra həmin yerləşdirməni idarə etmək üçün kənarlardan deyil, “yuxarı: x” və “sol: x” (burada x ofset dəyəridir, deyək ki, px) yerləşdirmə bəyannamələrindən istifadə etməlisiniz. Yenə də, mən bunun sizdə olduğu kimi pozulduğunu görmürəm, lakin yuxarı və sol bunun üçün nəzərdə tutulub, niyə onlardan istifadə etməyək? Üstəlik, eyni elementdə müəyyən edilmiş üzmə və kənar sərhədləriniz var ki, bu da xüsusi şərtlər altında IE6-da “ikiqat marja” səhvinə səbəb olur (bunu orada sınamısınız?) – bir düzəliş olsa da, yuxarıdan istifadə etməklə bu problemdən tamamilə qaçırsınız. və bu halda yerləşdirmə üçün kənarların yerinə sol.

    3. Nəhayət, niyə mənasız div əvəzinə bu keçidlər üçün semantik cəhətdən düzgün sıralanmamış siyahıdan istifadə etməyək?

    Təhlükəsizliyə görə üzr istəyirik... Sadəcə bölüşmək istəyirəm, b/c İstənilən nəticəni əldə etmək üçün CSS-dən istifadə etməyin bir çox müxtəlif yollarının olduğunu təcrübədən bilirəm, lakin bəzi yollar, şübhəsiz ki, digərlərindən daha yaxşı işləyir (daha etibarlı, cross-brauzer) . HTH.

  23. 36
  24. 37
  25. 38

    Çox sağ ol!! Sizin göstərişləriniz mənə SAATLARLA işdən xilas oldu...Mən veb inkişafında yeniyəm və ilk böyük layihəmdən əziyyət çəkdim. Mən bunu bacardım...müştəri əslində xoşbəxtdir, vəcdlidir, mən də!

  26. 39

    Salam, bunu dərc etdiyiniz üçün çox sağ olun! İllər keçsə də, hələ də kömək edir... gözəl! Şəkil xəritəmi düzgün yerdə əlaqələndirmək üçün mübarizə aparıram. Mənim bannerim var və bannerin yuxarı sağ tərəfindəki sosial nişanların sizin təqdim etdiyiniz koddan istifadə edərək əlaqələndirilməsini istəyirəm. Bu, əla işləyir, ancaq səhv edirəm, çünki linklərim ekranın yuxarı sol tərəfində, sosial nişanlar üzərində deyil, loqo üzərində görünür. Əminəm ki, bu sadə bir şeydir, amma mən bunu başa düşə bilmirəm. Fikirləriniz varsa burada paylaşmağı düşündüm. Bunu dərc etdiyiniz üçün bir daha təşəkkür edirik!

Siz nə düşünürsünüz?

Bu sayt spam azaldılması üçün Akismet istifadə edir. Yorumunuzun necə işləndiyini öyrənin.