Jak vytvořit obrazovou mapu pomocí CSS

možnosti

Chtěl jsem něco „podivínského“, tak jsem se rozhodl pro „kapesní“ grafiku, která obsahuje všechny metody předplatného pro můj blog.

Ve dnech Web 1.0 mohla být vytvořena sbírka takových odkazů spojením vašeho obrázku s odkazy na každé grafice a pokusem se to všechno spojit dohromady s tabulkou. Mohlo by to být také dosaženo použitím obrazová mapa ale to obvykle vyžaduje nástroj k vybudování souřadnicového systému. Díky použití kaskádových stylů je to mnohem jednodušší ... žádné spojování obrázků a žádné hledání nástroje pro vytvoření vašeho souřadnicového systému!

  1. Vytvořte si svůj obrázek, který chcete použít. Tuto grafiku můžete použít níže (klikněte pravým tlačítkem myši a uložte jako soubor ke stažení):
    možnosti
  2. Nahrajte svůj obrázek do adresáře, který je relativní k vašemu CSS. Ve WordPressu to lze nejsnadněji provést umístěním do složky obrázků ve vašem adresáři motivů.
  3. Přidejte svůj HTML. Je to hezké a jednoduché ... div se třemi odkazy:
    > div id = "subscribe">> a id = "rss" href = "[odkaz na váš zdroj]" title = "Přihlásit se k odběru pomocí RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[odkaz k odběru vašeho e-mailu]" title = "Přihlásit se k odběru pomocí e-mailu" >> span class = "hide"> E-mail> / span >> / a>> a id = "mobile" href = „[váš mobilní odkaz]“ title = "Zobrazit mobilní verzi" >> span class = "hide"> Mobile> / span >> / a>> / div>
    
  4. Upravte svůj kaskádový styl. Budete přidávat 6 různých stylů. 1 styl pro celkový div, 1 pro značku, takže nezobrazuje žádnou výzdobu textu, 1 styl pro skrytí textu (slouží k usnadnění přístupu) a 1 specifikace stylu pro každý z odkazů:
    #subscribe {/ * blok obrázku na pozadí * / display: block; šířka: 215px; výška: 60px; pozadí: url (images / options.png) no-repeat; horní okraj: 0px; } #subscribe a {text-decoration: none; }. skrýt {viditelnost: skrytý; } #rss {/ * Odkaz RSS * / float: vlevo; pozice: absolutní; šířka: 50px; výška: 50px; levý okraj: 20px; horní okraj: 5px; } #email {/ * Odkaz na e-mail * / float: vlevo; pozice: absolutní; šířka: 50px; výška: 50px; levý okraj: 70 pixelů; horní okraj: 5px; } #mobile {/ * Mobile Link * / float: left; pozice: absolutní; šířka: 50px; výška: 50px; levý okraj: 130 pixelů; horní okraj: 5px; }

Umístění je pěkné a jednoduché ... přidejte výšku a šířku a poté nastavte levý okraj z levé strany obrázku a horní okraj z horní strany obrázku!

Tento příspěvek „Jak na to“ je určen pro vstup do Geekové jsou sexy konečnou soutěží „How To“! Jedna poznámka, je pravda, že obrazová mapa může mít mnohem složitější polygony, ale ve skutečnosti jsem neviděl příliš mnoho míst, kde to musí být. Všiml jsem si, že velký obrázek RSS na Geeks je Sexy postranní panel ... to je dobré místo pro odkaz. 😉

AKTUALIZOVÁNO 10. 3. 2007 pro lepší přístup s radou Phil!

Sponzor: Pokud jste v oblasti webového designu nováčkem, pak si musíte vytvořit vlastní web správným způsobem pomocí HTML a CSS, 2. vydání. V tomto snadno použitelném průvodci se naučíte, jak vytvořit webovou stránku nejlepším možným způsobem - sami.

41 Komentáře

  1. 1

    Dougu, vypadá to jako pěkná metoda, ale je velmi nepřístupná.

    Zvažte nevidomého uživatele s čtečkou obrazovky, uživatele s textovým prohlížečem nebo kohokoli, kdo navštíví web bez povoleného CSS nebo obrázků (například mobilní uživatel, který hledá odkaz na váš web vhodný pro mobily). Žádný z nich nebude o těchto třech odkazech vědět, protože nemají žádný text. Pokud jsou obrázky vypnuté, uživatel neuvidí ani alternativní text popisující, co by tam bylo, protože se jedná o obrázek na pozadí.

    Lepší by bylo rozdělit obrázky, propojit je, dát je do seznamu a plovoucí je vedle sebe. Nebo dokonce použijte text pro odkazy a text nahraďte standardní technikou náhrady obrazu. To se zdá pohodlné, ale pro ty, kteří nepoužívají standardní grafický prohlížeč, je to mnohem obtížnější / nemožnější.

    • 2
      • 3

        Doug,

        JAWS ve výchozím nastavení nečte názvy odkazů, ale máte pravdu, že to dokáže. Proč byste hledali názvy odkazů, pokud jste nevěděli, že tam jsou, ai kdyby jste byli, určitě to spadá do problému použitelnosti, což znamená, že dáváte méně zkušeným uživatelům druhou zkušenost s používáním vašeho webu.

        U textových prohlížečů vám článek, na který mě odkazujete, umožňuje Lynx také vyvolat seznam názvů odkazů, ale jde mi o to, že pokud jste nevěděli, že tam existuje odkaz, protože na prvním místě nebyl žádný text , proč byste hledali text nadpisu?

        A konečně, atributy názvů odkazů se stále nezobrazí nikomu, kdo bude procházet bez povolených obrázků nebo bez povoleného CSS.

        Takže ano, odkazy s tituly jsou lepší než ty bez, ale v tomto případě je to jen okrajové.

        Z tohoto důvodu je mnohem bezpečnější, dostupnější a použitelnější možnost použít obrázek, aby bylo možné číst alternativní text, nebo nahradit obrázek, aby byl text k dispozici.

        • 4

          Dobrá informace, Phil. Pokusím se to vylepšit textem, ale jednoduše skrýt text - tak přístupný produkt, jako je JAWS, přečte text odkazu a text se zobrazí, pokud jsou zakázány CSS nebo Obrázky.

          Nesouhlasím s tím, že jediným dostupným řešením by bylo dát obrázek s odkazem.

  2. 5
  3. 8

    Ukradl jsem to. Tam jsem to řekl.

    Dougu, grafika je fantastická a kódování je tak neuvěřitelně jednoduché, až mě to děsí (hraní s CSS a teď to konečně „chápu“).

    Upravil jsem kód tak, aby vyhovoval mým potřebám, přišel na to, kam umístit bit HTML, a upřímně řečeno, vypadá to skvěle a vyčistil horní část mého postranního panelu, který mě poháněl INSANE.

    Možná ti tu kávu ještě budu muset koupit!

  4. 10

    Doug,

    Budu nesouhlasným hlasem a jako příklad použiji své zkušenosti. Pamatuji si naše e-maily, když se změnil můj domácí e-mail a vy jste si všimli, že jsem se musel jednoduše přihlásit k mému novému. Musím přiznat, že jsem sakra „objevil“ novou funkci na vašem webu, abych se znovu přihlásil. Část toho byla proto, že původní odkaz byl trochu tradičnější a ten jsem si nejasně pamatoval. Druhá byla proto, že ta boční obálka z boku mi původně nevypadala jako obálka. Asi po 5 a více minutách jsem začal přetáčet myší nad každým obrázkem a když se zobrazil název „Přihlásit se k odběru e-mailem“, věděl jsem, že podnikám. Můj mozek také zjistil, jaký je odkaz.

    Ale přinejmenším pro mě nebyla boční obálka pro mě jako místo pro odběr e-mailových oznámení intuitivní. A (protože mi bylo řečeno, abych vždy skončil s něčím pěkným), souhlasím s Philem výše; metoda je opravdu jednoduchá a celá položka funguje skvěle. Beru to tak, že váš návrhový nástroj vám pomohl poskytnout přesné rozměry pro 3 sekce; je to správný předpoklad? Musím to předpokládat, protože kdybych měl, řekněme, obraz o šířce 400 pixelů, potřeboval bych znát správné nastavení atd.

  5. 12
    • 13

      William,

      Vypadá to, že můžete mít konflikt mezi názvy tříd komentářů a názvy tříd v grafice postranního panelu. Chcete-li konflikt vyřešit, můžete je pojmenovat jinak. Dejte mi vědět, pokud potřebujete pomoc!

      Doug

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

    Pěkný přístup, ale potřebuji něco pro topografickou mapu, takže nemohu použít obdélníkové oblasti ... Myslím, že musím použít starý styl imagemap se souřadnicemi, ale asi budu kopat trochu hlouběji ...

  11. 19

    Díky za tyto informace, Doug. Už jsem tu byl a přemýšlel, jak jsi to udělal. Chtěli jsme vytvořit takovou mapu, kterou bychom vložili za naše příspěvky, a teď, když máme prostředky, to dokážeme. Bravo!

  12. 20
  13. 21

    Hi Doug,
    Zanechal jsem předchozí komentář, ale uvědomil jsem si, že jsem sotva nabídl jakýkoli pohled na mé dilema. Přizpůsobujeme téma wordpressu, aby nám pomohlo spustit náš online sitcom zde:

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

    Nyní uvidíte, že v horní části máme navigační banner, obrázek, který jsme chtěli zmapovat, jak jsme ho měli desítkykrát. / palmforehad. Nikdo z nás opravdu nerozumí CSS, ale potkáváme se dostatečně a zatím jsme až do tohoto bodu byli v pořádku. Váš článek v JEN JEDEN z desítek, které poskytly, poskytuje skutečný přehled o tom, jak snadno využít mapování obrázků v CSS. Vytvořil jsem šablonu stylů podle vašich pokynů, ale nemám ponětí, kam umístit HTML. Vše, co jste řekli, je „Přidejte svůj html ... je to hezké a jednoduché“ a pak jsem se přikrčil, protože jsem si myslel ... „pro mě není dost jednoduchý!“ Nevěděl jsem, že mohu přidat html na kteroukoli z těchto php stránek v editoru témat. Umístím html do záhlaví? Šablona hlavního indexu? Funkce? Předpokládám, že všichni uživatelé wordpressu mají možnost upravit své téma v editoru palubní desky, což se zdá být docela univerzální. Pokud byste mohli navrhnout, kam umístit html, rád bych přizpůsobil oru kód pro můj navigační panel.

    Děkujeme za sdílení vašich znalostí s komunitou. Jsem rád, že vám dám kávu.

    • 22

      Ahoj Phay!

      Všechny soubory pro téma vašeho blogu jsou k dispozici na panelu Správa pro úpravy. Pokud kliknete na Prezentace a poté Editor témat, měli byste vidět seznam svých souborů vpravo a editor vlevo.

      Pokud si přejete, aby to bylo ve vašem postranním panelu, pravděpodobně máte stránku postranního panelu. Kliknutím jej upravte a poté vložte poskytnutý HTML na stránku tam, kde jej chcete mít.

      Jedna poznámka: Úprava šablony stylů je relativní k vaší stránce, takže pokud odkazujete jako na jiné obrázky ve vašem motivu, budete muset obrázek nahrát do adresáře obrázků motivů.

      Doufám, že pomáhá!

    • 23

      Phay,
      Dnes jsem narazil na tento web a měl stejné dilema jako vy. Také jsem chtěl přidat obrazovou mapu k obrázku záhlaví. Poté, co jsem si s tím chvíli pohrával, jsem to pochopil. Vložte div div HTML do souboru header.php. Dal jsem to mezi a. Nejste si jisti, zda vaše šablona má toto přesné kódování, ale pohrajte si s ní v souboru header.php a zjistíte to.
      -
      Paul

  14. 24

    Díky za rychlou odpověď!

    Ne, nechtěl jsem, aby to bylo na bočním panelu, je to v horní části stránky (můžete vidět v odkazu, který jsem poskytl - růžová navigační lišta, která říká Contant, o přehlídce atd.)

    Pracoval jsem na palubní desce celé ráno, bohužel si nejsem jistý, do kterého souboru umístím html, jak je uvedeno výše, mám několik, header.php, main index.php, functions.php, footer.php. Nejsem si jistý, kam vložit html kód. (první část, kterou jste poskytli, zbytek jsem již vložil do své šablony stylů) Mám na webu svůj obrázek, vše je připraveno, stačí vědět, kam přidat html část kódu pro přizpůsobení.

    Děkuji moc za váš čas a otázky od nováčka.

    Phay

  15. 25

    … Nebo by někdo mohl v komentářích napsat, do kterého souboru vložíme html část kódu. Pán o několik příspěvků výše řekl, že na to přišel. Neměl jsem takové štěstí.

    Phaylen

  16. 26
  17. 27

    Mám sakra čas najít způsob, jak vložit klikatelnou obrazovou mapu do wordpressu, protože to odstraní html mapové značky. Vaše cesta by fungovala, ale mapa USA je očividně způsob, jak se s touto cestou složitě spojit. Ztratil jsem se.

    Help.

    Vypadá to, že blesk je moje jediná možnost?

    • 28

      Dave,

      Pokud vložíte obrázek do šablony, budete v pořádku. Pokud vložíte obrazovou mapu do skutečného obsahu, můžete narazit na problémy s filtrem. Způsob, jakým jsem to obešel, je strašný, ale občas jsem použil iframe.

      Doug

  18. 29

    Dobrý den,

    zdá se, že obrazová mapa a odkazy jsou dvě různé věci, nepracují společně, jako to dělá obrazová mapa v html

    když pro obrazovou mapu zahrnuji umístění na pozadí (uprostřed vlevo), umístění odkazů nebude následovat.

    existuje nějaký způsob, jak to obejít? jsem velmi amatér. Děkuju.

  19. 31

    Byl by podobný přístup použit pro větší a složitější obrazovou mapu, jakou se snažím použít?

    Pokud si prohlížíte můj web, klikněte na odkazy vlevo a uvidíte obrázek, který se snažím použít jako obrázkovou mapu (pod textovou abecedou).

    V zásadě se pokouším použít obrázek k přechodu do každé části tohoto seznamu písmenem.

    Evidentně jsem 20 minut stavěl mapu pomocí GIMPu a poté WP odstranil značky mapy, takže jsem našel váš web.

    Může však uvažovat o použití Flash

    Díky.

  20. 33

    Momentálně používám rozložení šablony a úpravy s vlastními věcmi. Chci přidat obrázkovou mapu, ale nejsem si jistý, kam ji umístit do css. obrázek, který chci vytvořit mapu, je v záhlaví.

  21. 34

    ahoj, postavil jsem svůj web na joomle ... chci použít tuto metodu k tomu, aby logo mé stránky odkazovalo na domov, bylo mi řečeno, že to s joomlou nemůžu udělat, ale tento článek mi dává naději! pomoc prostřednictvím e-mailu by byla velmi oceněna .... děkuji

  22. 35

    Ahoj Doug - vytvářím poměrně složitou obrazovou mapu založenou na css, která má také vzdálené přechody (v tomto případě se text zobrazí jinde na stránce, když podržíte jeden z hotspotů obrázku). V každém případě jsem zde narazil na váš příklad při zkoumání toho ... a myslel jsem, že budu sdílet následující vstup:

    1. Pro usnadnění byste neměli používat visibility: none (nebo display: none, pokud jste to zvážili), abyste zde skryli text, jako prvek se stylem viditelnosti: hidden nebudou čtečky obrazovky číst (ti, kteří následují specifikaci) .

    Místo toho použijte robustnější techniku ​​nahrazení obrazu. Navrhuji metodu Phark nebo Gilder / Levin - to jsou jen lépe zdokumentovaná jména pro vyhledání základních technik google. Dávám přednost G / L, protože funguje také s povoleným CSS, ale obrázky jsou vypnuté.

    2. I když to nevidím zlomené (pomocí FF3), vaše implementace polohování má také inherentní rizika. Absolutně umístěný prvek je umístěn vzhledem k jeho nejbližšímu nadřazenému prvku. V zásadě byste chtěli explicitně nastavit kontext umístění pomocí 'position: relative' na #subscription. Potom mohou být děti (umístěné odkazy) umístěny v rámci tohoto rodiče. Tato metoda pomáhá zajistit spolehlivější výsledky v různých prohlížečích.

    Také byste měli použít deklarace umístění „top: x“ a „left: x“ (kde x je hodnota posunu, řekněme v pixelech), nikoli okraje, aby bylo možné toto umístění zpracovat. Opět nutně nevidím, že by to rozbíjelo způsob, jakým to máte, ale horní a levá jsou k tomu určeny, tak proč je nepoužívat? Navíc máte na stejném prvku nastaveny plováky a okraje, které za určitých podmínek způsobují chybu „dvojitého okraje“ v IE6 (testovali jste to tam?) - i když existuje oprava, tomuto problému se zcela vyhnete pomocí top a vlevo v tomto případě místo okrajů pro umístění.

    3. Nakonec, proč nepoužívat sémanticky znějící neuspořádaný seznam pro tyto odkazy namísto nesmyslného divu?

    Omlouvám se za droning na ... Jen se chci podělit, b / c Vím ze zkušenosti, že existuje mnoho různých způsobů, jak pomocí CSS dosáhnout požadovaného výsledku, ale některé způsoby určitě fungují lépe (spolehlivější, pro různé prohlížeče) než jiné . HTH.

  23. 36
  24. 37
  25. 38

    Děkuji mnohokrát!! Vaše pokyny mi zachránily HODINY práce ... Jsem pro vývoj webových aplikací nový a právě jsem prošel svým prvním velkým projektem. Zvládl jsem to ... klient je šťastný, ve skutečnosti nadšený, a tak jsem i já!

  26. 39

    Dobrý den, moc vám děkuji za zveřejnění! O několik let později a stále to pomáhá ... hezké! Snažím se, aby moje obrazová mapa byla propojena na správném místě. Mám banner a chci, aby se sociální ikony v pravém horním rohu banneru propojily pomocí kódu, který jste zadali. Funguje to skvěle, až na to, že dělám něco špatně, protože moje odkazy se objevují na levé horní levé straně obrazovky, ne přes sociální ikony, ale přes logo. Jsem si jistý, že je to něco jednoduchého, ale prostě na to nedokážu přijít. Myslel jsem, že to zde sdílím pro případ, že byste měli nějaké postřehy. Ještě jednou děkujeme za zveřejnění!

Co si myslíte?

Tyto stránky používají Akismet k omezení spamu. Zjistěte, jak jsou vaše údaje komentářů zpracovávány.