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 ilə əlaqəli 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ə üç keçid 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 bir üsul kimi görünür, amma çox əlçatmazdır.

    Ekran oxuyucusu olan bir kor istifadəçini, yalnız mətnli brauzeri olan bir istifadəçini və ya CSS və ya Şəkillər aktivləşdirilmədən sayta daxil olanları düşünün (məsələn mobil dost saytınıza keçid axtaran mobil istifadəçi kimi). Mətnləri olmadığına görə heç biri bu üç keçid haqqında bilməyəcək. Şəkillər bağlı deyilsə, istifadəçi arxa plan şəkli olduğu üçün nə olacağını təsvir etmək üçün alt mətni belə görməyəcəkdir.

    Şəkilləri dilimləmək, bir-birinə bağlamaq, siyahıya qoymaq və bir-birinin yanında üzmək daha yaxşı olardı. Və ya hətta bağlantılar üçün mətndən istifadə edin və standart bir şəkil dəyişdirmə texnikasından istifadə edərək mətni dəyişdirin. Bu əlverişli görünür, amma standart qrafik brauzerdən istifadə etməyənlər üçün işləri çox çətinləşdirir / qeyri-mümkün edir.

    • 2
      • 3

        Doug,

        JAWS standart olaraq link başlıqlarını oxumur, amma haqlısınız, edə bilər. Bunun var olduğunu bilməsəniz, niyə keçid başlıqlarını axtarırdınız və olsanız da, şübhəsiz ki, bu, daha az səlahiyyətli istifadəçilərə saytınızı istifadə etmək üçün ikinci dərəcə təcrübəsi verdiyiniz mənasını verən bir istifadə probleminə düşər.

        Mətn brauzerləri üçün mənə yönləndirdiyiniz məqalə Lynx-ə keçid başlıqlarının siyahısını da təqdim etməyə imkan verir, amma fikrim qalır ki, ilk növbədə mətn olmadığı üçün orada bir keçid olduğunu bilməsəniz , niyə başlıq mətnini axtarırsınız?

        Nəhayət, əlaqəli başlıq atributları şəkillər aktivləşdirilmədən və ya CSS aktiv edilmədən baxan hər kəs üçün hələ görünməyəcəkdir.

        Bəli, başlıqları olan əlaqələr onsuz olanlardan daha yaxşıdır, amma bu vəziyyətdə yalnız marginaldır.

        Buna görə alt mətnin oxunması üçün bir şəkil istifadə etmək və ya mətnin orada olması üçün şəkil dəyişdirmək daha etibarlı, daha əlçatan və daha çox istifadə edilə bilən bir seçimdir.

        • 4

          Yaxşı məlumat, Phil. Bunu mətnlə inkişaf etdirməyə çalışacağam, sadəcə mətni gizlədin - bu şəkildə JAWS kimi əlçatan bir məhsul keçid mətnini oxuyacaq və CSS və ya Şəkillər söndürüldükdə mətn görünəcəkdir.

          Əlçatan yeganə həll yolu ilə bir şəkil qoymağınla razılaşmıram.

  2. 5
    • 6

      Gözəl bir Doug!

      Seçici olduğum üçün üzr istəyirəm, sadəcə bu kimi axmaq şeylərə həddindən artıq həvəsli oluram 😀

      • 7

        Çox vaxt əhəmiyyət vermədiyimiz bir şeydir, Phil! Tətbiqinizi əlçatan etmək çox vaxt yaxşı axtarış motoru nəticələrinə də malikdir.

        Mütəxəssisliyi və rəyi həqiqətən qiymətləndirirəm!

  3. 8

    Oğurladım. Orada dedim.

    Doug, qrafika fantastikdir və kodlaşdırma o qədər inanılmaz dərəcədə sadədir ki, məni qorxudur (CSS-lə oynayırdım və indi nəhayət "başa düşürəm").

    İhtiyaçlarımı ödəmək üçün kodu düzəltdim, HTML bitini hara atacağımı düşündüm və səmimi qüsursuz görünür və məni DƏSƏSİZ idarə edən yan çubuğumun üst hissəsini təmizlədi.

    Sənə hələ o qəhvəni almalı ola bilərəm!

  4. 10

    Doug,

    Təcrübəmi nümunə gətirərək fərqli bir səs olacağam. Evimdəki e-poçt dəyişəndə ​​e-poçtlarımızı xatırlayıram və yenisinə üstünlük verməli olduğumu qeyd etdiniz. Yenidən seçim etmək üçün saytınızdakı yeni xüsusiyyəti "kəşf etdiyim" bir müddət olduğunu etiraf etməliyəm. Bunun bir hissəsi, orijinal keçidin bir az daha ənənəvi olması və bu əlaqəni qeyri-müəyyən şəkildə xatırladığım üçün idi. Digəri, yan tərəfdəki yarım zərfin əvvəlcə mənə zərf kimi görünməməsi idi. Təxminən 5 və ya daha çox dəqiqədən sonra siçanımı hər şəklin üstünə fırlatmağa başladım və “Elektron poçtla abunə olun” başlığı görünəndə işdə olduğumu bildim. Beynim də bağlantı şəklinin nə olduğunu başa düşdü.

    Ancaq ən azından mənim üçün yan tərəfdən bir zərf e-poçt bildirişlərinə abunə olmaq üçün yer kimi mənim üçün asan deyildi. Və (mənə hər zaman xoş bir şeylə bitməyimi söylədikləri üçün) yuxarıdakı Phil ilə razıyam; üsul həqiqətən sadədir və bütün element əla işləyir. Dizayn alətinizin sizə 3 hissə üçün tam ölçüləri verməyə kömək etdiyini düşünürəm; bu düzgün bir fərziyyədir? Elə bilməliyəm, çünki 400 piksel genişliyində bir şəkil olsaydı, doğru parametrləri və s. Bilməliyəm.

  5. 12
    • 13

      William,

      Görünür, şərh sinif adlarınızla yan panel qrafikindəki sinif adları arasında ziddiyyət ola bilər. Münaqişəni həll etmək üçün onları fərqli adlandıra bilərsiniz. Bir ələ ehtiyacınız varsa mənə bildirin!

      Doug

  6. 14
  7. 15

    Zəhmli! Bunu tutacağam. Paylaşdığınız üçün təşəkkür edirəm. Bu başlığı bəyənirəm, yoldaş! Bunu necə etdiyini öyrənmək istərdim 🙂

    Cheers!

  8. 16
  9. 17
  10. 18

    Gözəl yanaşma, amma bir topoqrafik xəritə üçün bir şeyə ehtiyacım var, buna görə düzbucaqlı ərazilərdən istifadə edə bilmirəm ... Köhnə koordinat şəkillərini istifadə etməli olduğumu düşünürəm, amma yəqin ki, bir az daha dərin qazacağam ...

  11. 19

    Bu məlumat üçün təşəkkür edirəm Doug. Əvvəllər burda idim və necə etdiniz deyə maraqlandım. Göndərdiklərimizdən sonra əlavə etmək üçün belə bir xəritə yaratmaq istədik və indi imkanımız olduğu üçün bunu edə bilərik. Bravo!

  12. 20
  13. 21

    Salam Doug,
    Əvvəlki bir şərh yazdım, ancaq çətin vəziyyətdə dilemma haqqında heç bir fikir vermədiyimi başa düşdüm. Onlayn sitcomumuzu burada başlamağımıza kömək etmək üçün bir wordpress mövzusunu uyğunlaşdırırıq:

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

    İndi üst tərəfdə bir naviqasiya pankartına sahib olduğumuzu, əvvəllər onlarla dəfə olduğu kimi xəritədə qurmağı planlaşdırdığımız bir şəkli görəcəyik. / palmforehad. Heç birimiz CSS-i həqiqətən başa düşmürük, amma kifayət qədər dolaşırıq və indiyə qədər bu nöqtəyə qədər yaxşı işlər görmüşük. Təqdim olunan onlarla məqalədən yalnız birində yazınız CSS-də şəkilləşdirmədən asanlıqla necə istifadə olunacağına dair real fikirdir. Stil cədvəlini sizin göstərişlərinizə uyğun olaraq hazırladım, ancaq HTML-ni harada yerləşdirəcəyim barədə heç bir fikrim yoxdur. Dediyiniz təkcə “HTML-nizi əlavə edin ... Gözəl və sadədir” və sonra düşündüyüm üçün əyildim .. “mənim üçün kifayət qədər sadə deyil!” Mövzu redaktorundakı bu php səhifələrinin heç birinə html əlavə edə biləcəyimi bilmirdim. HTML-ni başlığa yerləşdirirəm? Əsas İndeks şablonu? Funksiyalar? Hesab edirəm ki, bütün wordpress istifadəçilərinin iş panelində redaktorda mövzusunu redaktə etmək imkanı var, bu da funksionallıq baxımından olduqca universal görünür. HTML-nin harada yerləşdiriləcəyini təklif edə bilsəniz, naviqasiya çubuğum üçün oru kodunu uyğunlaşdırmaq istərdim.

    Biliklərinizi cəmiyyətlə bölüşdüyünüz üçün təşəkkür edirik. Mən sizə bir qəhvə verdiyim üçün xoşbəxtəm.

    • 22

      Salam Phay!

      Blogunuzun mövzusuna dair bütün sənədlər, tənzimləmə üçün İdarə paneli vasitəsilə əldə edilə bilər. Təqdimatı və sonra Tema Redaktorunu vurursanız, sənədlərinizin siyahısını sağda və solda bir redaktoru görə bilərsiniz.

      Bunun yan çubuğunuzda olmasını istəyirsinizsə, ehtimal ki, Kenar çubuğunuz var. Düzəliş etmək üçün vurun və istədiyiniz səhifəyə verilən HTML-i yerləşdirin.

      Bir qeyd: Stil cədvəli redaktəsi səhifənizlə əlaqəlidir, buna görə də mövzunuzdakı digər şəkillər kimi istinad edirsinizsə şəkli mövzu şəkillər qovluğuna yükləməlisiniz.

      Ki, kömək ümid!

    • 23

      Phay,
      Bu gün bu sayta rast gəldim və sizinlə eyni dilemmada oldum. Mən də başlıq şəklinə bir şəkil xəritəsi əlavə etmək istədim. Bir müddət onunla oynadıqdan sonra düzgün başa düşdüm. Div HTML-ni header.php faylına qoyun. Arasına qoydum və. Şablonunuzda bu dəqiq kodlaşdırma olub-olmadığına əmin deyiləm, ancaq header.php faylında onunla oynayın və bunu başa düşəcəksiniz.
      -
      Paul

  14. 24

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

    Xeyr, yan paneldə olmasını istəmirdim, səhifənin yuxarı hissəsindədir (təqdim etdiyim linkdə görə bilərsiniz - şou və s. Haqqında contant yazan çəhrayı naviqasiya çubuğu ..)

    Bütün səhər paneldə işləyirdim, təəssüf ki, html-i hansı sənəddə yerləşdirdiyimə əmin deyiləm, yuxarıda göstərildiyi kimi bir neçə, header.php, main index.php, functions.php, footer.php. HTML kodunu hara əlavə edəcəyimə əmin deyiləm. (təqdim etdiyiniz ilk hissə, qalığımı artıq stilimə daxil etmişəm) veb saytımdakı şəklim var, hər şey hazırdır, sadəcə uyğunlaşmaq üçün kodun html hissəsini hara əlavə edəcəyimi bilməliyəm.

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

    Phay

  15. 25

    … Və ya bəlkə kimsə kodun html hissəsini hansı dosyaya yerləşdirdiyimizə dair şərhlərdə yazı yaza bilər. Bir neçə yazıdan yuxarı bir bəy bunu başa düşdüyünü söylədi. Bu qədər şanslı olmamışam.

    Phaylen

  16. 26
  17. 27

    Html xəritə etiketlərini zolaqladığı üçün tıklana bilən bir şəkil xəritəsini wordpress-ə yerləşdirməyin bir yolunu tapmaqda çox vaxt keçirirəm. Sizin yolunuz işləyəcək, amma ABŞ xəritəsi açıq şəkildə bu şəkildə vidalaşmaq üçün kompleks bir yoldur. Mən itmişəm.

    Kömək edin

    Flaş mənim yeganə seçimim kimi görünür?

    • 28

      Dave,

      Şəkli şablonunuza qoysanız, yaxşı olacaqsınız. Şəkil xəritəsini həqiqi məzmuna qoysanız, filtr problemi ilə qarşılaşa bilərsiniz. Bu işlədiyim yol dəhşətlidir, amma bəzən iframe istifadə etdim.

      Doug

  18. 29

    Salam,

    şəkil xəritəsi və əlaqələrin iki fərqli şey olduğu görünür, html-də bir şəkil xəritəsinin necə işlədiyi kimi bir arada işləmirlər

    şəkil xəritəsinə fon yerləşdirmə (sol mərkəz) daxil etdiyim zaman əlaqələrin yerləşdirilməsi izlənmir.

    bunun ətrafında gəzməyin bir yolu var? mən çox həvəskaram. çox sağ ol.

  19. 31

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

    Saytımı görürsənsə, soldakı keçidləri vurun və şəkil xəritəsi (Mətn əlifbası altında) kimi istifadə etməyə çalışdığım şəkli görəcəksən.

    Əsasən, bu siyahının hər hissəsinə hərflərlə getmək üçün Şəkil istifadə etməyə çalışırıq.

    Göründüyü kimi, GIMP ilə bir xəritə qurmaq üçün 20 dəqiqə vaxt sərf etdim və sonra WP xəritə etiketlərini sildi, buna görə saytınızı belə tapdım.

    Flaşdan istifadə etməyi düşünə bilər

    Thanks.

  20. 33

    Hal-hazırda öz şablonlarımla şablon düzeni və redaktə edirəm. Bir şəkil xəritəsi əlavə etmək istəyirəm, amma CSS-də harada yerləşdirəcəyimə əmin deyiləm. xəritəsini düzəltmək istədiyim şəkil başlıq hissəsindədir.

  21. 34

    salam, veb saytımı joomla-da qurdum ... səhifəmin logosunu evə bir link etmək üçün bu metodu istifadə etmək istəyirəm, mənə bunu joomla ilə edə bilməyəcəyimi söylədilər, amma bu yazı mənə ümid verir! e-poçt vasitəsi ilə yardım çox təqdir ediləcəkdir

  22. 35

    Salam Doug - Uzaq rolloverlərə sahib olan olduqca mürəkkəb bir CSS əsaslı şəkil xəritəsi hazırlayıram (bu vəziyyətdə, şəkil nöqtələrindən birini gəzdirdiyiniz zaman mətn səhifənin başqa bir yerində göstərilir). Hər halda, burada araşdırma apararkən nümunənlə rastlaşdım ... və aşağıdakıları bölüşəcəyimi düşündüm:

    1. Erişilebilirlik üçün görünürlüğünü istifadə etməməlisiniz: görmə qabiliyyətli bir element kimi mətni burada gizlətmək üçün görünmə: yox (və ya göstərmə: yox): gizlilik ekran oxuyanları tərəfindən oxunmayacaq (spesifikasiyanı izləyənlər). .

    Bunun əvəzinə daha möhkəm bir şəkil dəyişdirmə texnikasından istifadə edin. Ya Phark metodu ya da Gilder / Levin təklif edirəm - bunlar əsas texnikaları tapmaq üçün google üçün daha yaxşı sənədləşdirilmiş adlardır. G / L-yə üstünlük verirəm, çünki CSS aktivdir, lakin şəkillər söndürülür.

    2. Qırıldığını görmədiyim halda (FF3 istifadə edərək), konumlandırma tətbiqetmənin də özünəməxsus riskləri var. Tamamilə yerləşdirilmiş bir element, ən yaxın yerləşdirilmiş valideynə nisbətən yerləşdirilir. Əsasən, #subscription-a 'position: nisbi' tətbiq edərək bir yerləşdirmə kontekstini açıq şəkildə təyin etmək istərdiniz. Sonra uşaqlar (yerləşdirilmiş əlaqələr) həmin valideyn daxilində yerləşdirilə bilər. Bu metod brauzerlər arasında daha etibarlı nəticələr əldə etməyə kömək edir.

    Bundan əlavə, bu mövqeyi idarə etmək üçün haşiyələr əvəzinə “top: x” və “left: x” (burada x ofset dəyəri, px şəklində) mövqeləşdirmə bəyannamələrindən istifadə etməlisiniz. Yenə də, məndə olduğunuz yolu pozduğunu mütləq görmürəm, amma yuxarı və sol bunun üçün nəzərdə tutulub, niyə istifadə etmirsiniz? Üstəlik, eyni elementdə müəyyən şərtlər altında IE6-da “ikiqat boşluq” səhvinə səbəb olan üzən və kənar boşluqlara sahibsiniz (bunu orada yoxlamısınız?) - düzəliş olsa da, bu problemi tamamilə yuxarıdan istifadə edərək qarşısını alırsınız. və bu vəziyyətdə yerləşdirmə üçün kənar kənarların yerinə buraxıldı.

    3. Nəhayət, bu linklər üçün mənasız div əvəzinə niyə semantik cəhətdən səssiz bir siyahı istifadə etməyək?

    Uçuş apardığım üçün üzr istəyirəm ... Yalnız bölüşmək istəyirəm, b / c İstədiyiniz nəticə əldə etmək üçün CSS-dən necə istifadə etməyin müxtəlif yollarının olduğunu bilirəm, amma bəzi yollar əlbəttə ki, digərlərindən daha yaxşı işləyir (daha etibarlı, cross-brauzer). . HTH.

  23. 36
  24. 37
  25. 38

    Çox sağ ol!! Təlimatlarınız məni SAAT işdən xilas etdi ... Veb inkişafı ilə yeni tanışam və ilk böyük layihəmdən əziyyət çəkdim. Mən bunu etdim ... müştəri xoşbəxtdir, əslində vəcd edir və mən də beləəm!

  26. 39

    Salam, bunu göndərdiyiniz üçün çox sağ olun! İllər sonra və hələ də kömək edir ... gözəl! Təsvir xəritəmi düzgün yerdə bağlamaq üçün mübarizə aparıram. Bir bannerim var və bannerin yuxarı sağ hissəsindəki sosial ikonaların verdiyiniz koddan istifadə edərək əlaqələndirilməsini istəyirəm. Mükəmməl işləyir, istisna olmaqla, səhv bir şey edirəm, çünki əlaqələrim ekranın yuxarı sol tərəfində, sosial nişanlar üzərində deyil, loqoda görünür. Əminəm ki, bu sadə bir şeydir, amma mən bunu başa düşə bilmirəm. Hər hansı bir anlayışınız varsa, onu burada paylaşacağımı düşünürdüm. Bunu göndərdiyiniz üçün bir daha təşəkkür edirəm!

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

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