Giunsa ang paghimo sa Usa ka Mapa sa Imahen nga adunay CSS

mga kapilian

Gusto nako ang usa ka butang nga 'geeky' busa nakadesisyon ako sa usa ka graphic nga 'bulsa' nga naghupot sa tanan nga mga pamaagi sa suskrisyon alang sa akong blog.

Sa mga adlaw sa Web 1.0, ang usa ka koleksyon sa mga link nga sama niini mahimong matukod pinaagi sa paghiusa sa imong imahe uban ang mga link sa matag graphic, pagkahuman pagsulay sa pagtahi tanan sa usa ka lamesa. Mahimo usab kini nga matuman pinaagi sa paggamit sa usa ka mapa sa imahe apan kana sa kasagaran nanginahanglan usa ka himan aron mahuman ang koordinasyon nga sistema. Ang paggamit sa Cascading Style Sheets naghimo niini nga usa ka tonelada nga mas kadali… wala’y pagsumpay sa mga imahe ug wala’y pagsulay sa pagpangita usa ka himan aron matukod ang imong koordinasyon nga sistema!

  1. Paghimo sa imong imahe nga gusto nimong gamiton. Mahimo nimong magamit kini nga graphic sa ubus (pag-right click ug i-save aron i-download):
    mga kapilian
  2. Pag-upload sa imong imahe sa usa ka direktoryo nga adunay kalabotan sa imong CSS. Sa WordPress, mahimo kini nga labing kadali pinaagi sa pagbutang niini sa usa ka folder nga mga imahe sa imong direktoryo sa tema.
  3. Idugang ang imong HTML. Maayo ug yano… usa ka div nga adunay tulo nga link dinhi:
    > div id = "subscribe">> a id = "rss" href = "[your feed link]" title = "Subscribe with RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[imong email subscribe link]" title = "Subscribe with Email" >> span class = "hide"> Email> / span >> / a>> a id = "mobile" href = "[your mobile link]" title = "View Mobile Version" >> span class = "hide"> Mobile> / span >> / a>> / div>
    
  4. Pag-edit sa imong Cascading Style Sheet. Magdugang ka 6 nga lainlaing mga estilo. 1 nga istilo alang sa kinatibuk-ang div, 1 alang sa usa ka tag busa wala kini gipakita nga bisan unsang dekorasyon sa teksto, 1 nga istilo aron matago ang teksto (gigamit alang sa pag-access) ug 1 nga detalye sa estilo alang sa matag usa nga mga link:
    #subscribe {/ * block sa imahe sa background * / display: block; gilapdon: 215px; taas: 60px; background: url (mga imahe / kapilian.png) dili na gisubli; margin-top: 0px; } #subscribe usa ka {text-decoration: wala; } .tago {panan-aw: natago; } #rss {/ * RSS Link * / float: wala; posisyon: hingpit; gilapdon: 50px; taas: 50px; margin-left: 20px; margin-top: 5px; } #email {/ * Link sa Email * / float: wala; posisyon: hingpit; gilapdon: 50px; taas: 50px; margin-left: 70px; margin-top: 5px; } #mobile {/ * Mobile Link * / float: wala; posisyon: hingpit; gilapdon: 50px; taas: 50px; wala sa kilid: 130px; margin-top: 5px; }

Ang pagpahimutang maayo ug yano… pagdugang usa ka gitas-on ug gilapdon ug dayon itakda ang wala nga kilid gikan sa wala nga kilid sa imahe, ug sa taas nga kilid gikan sa taas nga bahin sa imahe!

Kini nga post nga "How To" alang sa pagsulod sa Mga Geeks ang Sekreto nga katapusang “Giunsa” Contest! Usa ka sulat, tinuod nga ang usa ka mapa sa imahe mahimong adunay labi ka komplikado nga mga polygon, apan wala ko gyud makita ang daghang mga lugar diin kinahanglan adunay kana. Namatikdan nako nga ang dako nga imaheng RSS sa Geeks mga seksi nga sidebar… kana usa ka maayong lugar alang sa usa ka link. 😉

UPDATED 10/3/2007 alang sa labi ka maayo nga pag-access sa tambag sa Ang Phil!

sponsor: Kung bag-o ka sa laraw sa web, pagkahuman Paghimo sa Imong Kaugalingon nga Web Site Ang Tamang Paagi Paggamit sa HTML & CSS, ang 2nd Edition kinahanglan gyud. Sa kini nga dali sundon nga panudlo mahibal-an nimo kung giunsa ang paghimo sa usa ka web site sa labing kaayo nga paagi nga mahimo - pinaagi sa pagbuhat sa imong kaugalingon!

41 Comments

  1. 1

    Doug, ingon kana nindot nga pamaagi, apan dili kini maabut.

    Hunahunaa ang us aka buta nga tiggamit nga adunay usa ka magbasa sa screen, usa ka mogamit nga adunay browser lamang nga teksto o bisan kinsa nga mobisita sa site nga wala’y CSS o Mga Larawan nga gipagana (sama sa, tingali usa ka mobile user nga nangita ang link sa imong mobile friendly site). Wala sa kanila ang mahibalo bahin sa tulo nga mga link tungod kay wala sila teksto. Kung wala ang mga imahe dili makita sa usa ka gumagamit ang alt text aron ihulagway kung unsa unta ang naa didto tungod kay kini usa ka background image.

    Maayo pa nga gihiwa ang mga imahe, gisumpay kini, gibutang kini sa usa ka lista ug gipalutaw kini sa tupad. O bisan paggamit teksto alang sa mga link ug ilisan ang teksto sa paggamit sa usa ka sukaranan nga pamaagi sa pag-ilis sa imahe. Kini ingon sayon, apan kini naghimo sa mga butang nga labi ka lisud / imposible alang sa mga wala mogamit usa ka sukaranan nga graphic browser.

    • 2
      • 3

        Doug,

        Ang JAWS wala magbasa sa mga ulohan sa link pinaagi sa default, apan husto ka, mahimo kini. Ngano nga gipangita nimo ang mga titulo sa link kung wala nimo nahibal-an nga naa kini bisan pa, ug bisan kung ikaw, sigurado nga nahulog kini sa usa ka isyu nga magamit nga nagpasabut nga gihatagan nimo ang dili kaayo abtik nga mga tiggamit sa ikaduhang rate nga kasinatian sa paggamit sa imong site.

        Alang sa mga text browser, ang artikulo nga itudlo mo ako sa kana nga Lynx nagtugot usab kanimo nga magdala usa ka lista sa mga titulo sa link, apan nagpabilin ang akong punto nga kung wala nimo nahibal-an nga adunay usa ka link didto, tungod kay wala’y teksto sa una. , ngano nga mangita ka sa teksto sa titulo?

        Sa katapusan, dili gihapon magpakita ang mga hiyas sa titulo sa link alang sa bisan kinsa nga nag-browse nga wala’y mga imahe nga gipadagan o wala’y CSS nga gipadagan.

        Mao nga oo, ang mga link nga adunay mga titulo labi ka maayo kaysa mga wala, apan sa kini nga kaso gamay ra kini.

        Kini ang hinungdan nga ang paggamit sa usa ka imahe, aron mabasa ang alt teksto, o baylohan ang imahe, aron ang teksto naa didto, labi ka labi ka luwas, labi ka dali nga magamit ug labi nga magamit nga kapilian.

        • 4

          Maayong Info, Phil. Akong paningkamutan nga mapaayo kini sa teksto apan itago ra ang teksto - sa kana nga paagi mabasa sa usa ka ma-access nga produkto sama sa JAWS ang teksto sa link ug ipakita ang teksto kung ang CSS o Mga Larawan dili kapugngan.

          Dili ako uyon nga ang maabut nga solusyon mao ra ang pagbutang usa ka Imahe nga adunay link.

  2. 5
  3. 8

    Gikawat ko to. Didto, giingon ko na.

    Doug, ang mga graphic hinay ug ang pag-coding labi ka yano nga kini nakapahadlok kanako (nagdula sa CSS ug karon sa katapusan akong "makuha kini").

    Gitunob ang code aron matubag ang akong mga kinahanglanon, nahibal-an kung diin ihulog ang HTML gamay, ug prangka nga kini nindot tan-awon ug gilimpyohan ang taas nga bahin sa akong sidebar nga nagdala kanako nga INSANE.

    Mahimo ra nako nga mapalit kana nga kape!

  4. 10

    Doug,

    Mahimo ako usa ka dili pagsinabtanay nga tingog, nga gigamit ang akong kasinatian ingon usa ka panig-ingnan. Nahinumduman nako ang among mga email sa dihang nagbag-o ang email sa akong balay ug namatikdan nimo nga kinahanglan lang ako nga mopili sa akong bag-o. Akong angkonon nga adunay ako kaniadtong panahon nga "nadiskobrehan" ang bag-ong bahin sa imong site aron makapili usab. Bahin niini tungod kay ang orihinal nga link medyo naandan ug wala nako hinumdomi ang usa. Ang uban pa tungod kay ang sideways nga tunga sa sobre dili ingon usa ka sobre alang kanako sa sinugdan. Pagkahuman sa mga 5 o labaw pa nga mga minuto gisugdan nako ang paglihok sa akong mouse sa matag imahe ug kung gipakita ang titulong "Mag-subscribe uban ang Email", nahibal-an nako nga naa ako sa negosyo. Nahibal-an usab sa akong utok kung unsa ang link nga litrato.

    Apan, labing menos sa akon, ang usa ka pailid nga sobre dili pa intuitive sa akon nga lugar nga mag-subscribe sa mga pahibalo sa email. Ug (tungod kay gisultihan ako nga kanunay matapos sa usa ka butang nga maayo) Uyon ako sa Phil sa taas; ang pamaagi mao ang tinuud nga yano ug ang tibuuk nga butang molihok og maayo. Gikuha ko kini nga imong himan sa pagdesinyo nga nakatabang sa paghatag kanimo sa eksaktong sukat sa 3 ka seksyon; tama ba kana nga pangagpas? Kinahanglan nako kini hunahunaon, tungod kay kung adunay ako, ingon, usa ka 400 nga pixel ang gilapdon nga imahe kinahanglan nako mahibal-an ang husto nga mga setting, ug uban pa.

  5. 12
    • 13

      William,

      Ingon og mahimo ka adunay panagsumpaki tali sa imong mga ngalan sa klase sa komento ug mga ngalan sa klase sa graphic sa sidebar. Mahimo nimo sila pangalanan nga lahi aron malimpyohan ang panagsumpaki. Ipahibalo kanako kung kinahanglan nimo ang usa ka kamot!

      Doug

  6. 14

    Ang tanan ingon og ninglihok sa parehas nga FF ug IE… Sa akong hunahuna mahimo’g naa ka sa site samtang gisulayan nako ang pag-tweak sa usa ka plugin nga wala kaayo molihok… 😉

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

    Maayo nga pamaagi, apan kinahanglan nako ang usa ka butang alang sa usa ka topographic nga mapa, busa dili ako makagamit og mga lugar nga rektanggulo… Sa akong hunahuna kinahanglan nako gamiton ang daan nga istilo sa paghanduraw nga adunay mga koordinasyon, apan tingali magkalot ako og gamay…

  11. 19

    Salamat sa kini nga kasayuran, Doug. Dinhi na ako dinhi ug naghunahuna kung giunsa nimo kini gibuhat. Gusto namon nga maghimo usa ka mapa nga ingon niana isal-ot pagkahuman sa among mga gi-post, ug karon nga adunay kami mga mahimo, mahimo namon kini. Bravo!

  12. 20
  13. 21

    Kumusta Doug,
    Nagbilin ako usa ka miaging komento apan nahibal-an ko nga wala gyud ako naghatag bisan unsang panabut sa akong problema sa tanan. Nahiangay kami usa ka tema nga wordpress aron matabangan kami nga maglansad dinhi nga online sitcom:

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

    Karon, makita nimo nga adunay kami banner sa pag-navigate sa taas, usa ka imahen nga among gituyo aron mapa tungod kay daghang beses na kami kaniadto. / palad. Wala sa kanato ang wala gyud makasabut sa CSS, apan nahipangdol kita sa igoigo nga kahimtang ug sa ingon nakahimog maayo hangtod niining puntoha. Ang imong artikulo sa USA ra sa tinagpulo nga gihatag mao ang tinuud nga panan-aw kung giunsa dali gamiton ang paghanduraw sa CSS. Akong gipagawas ang styleheet sumala sa imong mga direksyon, apan wala’y ideya kung diin ibutang ang HTML. Ang giingon ra nimo mao ang "Idugang ang imong html… Nindot ug yano" ug unya nag-cring ako tungod kay gihunahuna ko .. "dili igo ang akong simple!" Wala ko nahibal-an nga mahimo nako nga madugangan ang html sa bisan unsa nga mga panid sa php sa editor sa tema. Gibutang ko ba ang html sa header? Ang template sa Panguna nga Index? Ang Mga Pag-andar? Gihunahuna ko nga ang tanan nga mogamit sa wordpress adunay kapilian nga i-edit ang ilang tema sa dashboard editor, nga ingon sa kadaghanan sa pagpaandar. Kung mahimo nimo isugyot kung diin ibutang ang html, gusto nako nga ipahiangay ang oru code alang sa akong navagation bar.

    Salamat sa pagpaambit sa imong kahibalo sa komunidad. Malipayon ko nga nagkuha nimo usa ka kape.

    • 22

      Kumusta Phay!

      Ang tanan nga mga file alang sa tema sa imong blog magamit pinaagi sa Admin panel alang sa pag-edit. Kung nag-klik ka sa Presentation ug pagkahuman sa Theme Editor, kinahanglan nimo nga makita ang usa ka lista sa imong mga file sa tuo ug usa ka editor sa wala.

      Kung gusto nimo nga naa kini sa imong sidebar, tingali adunay ka panid sa Sidebar. Pag-klik aron ma-edit kini ug ibutang ang gihatag nga HTML sa sulud sa panid diin nimo kini gusto.

      Usa ka pahinumdom: Ang pag-edit sa styleheet adunay kalabotan sa imong panid, busa kinahanglan nimo nga i-upload ang litrato sa direktoryo sa mga imahe sa tema kung imong gipunting kini sama sa imong gibuhat sa ubang mga imahe sa imong tema.

      Paglaum nga makatabang!

    • 23

      Phay,
      Naabtan nako ang site karon ug adunay parehas nga problema sa imo. Gusto ko usab nga idugang ang usa ka mapa sa imahe sa imahe sa header. Pagkahuman sa pagdula niini sa makadiyot, nakuha nako kini nga tama. Ibutang ang div HTML sa header.php file. Gibutang ko kini taliwala ug. Dili sigurado kung ang imong template adunay kana nga eksaktong pag-coding, apan pagdula-dulaan kini sa header.php file ug mahibal-an nimo kini.
      -
      Pablo

  14. 24

    Salamat sa dali nga tubag!

    Dili, dili ko gusto nga kini naa sa sidebar sa teh, naa kini sa taas sa panid (makita nimo ang link nga akong gihatag- ang pink nga bar sa nabigasyon nga giingon nga contant, bahin sa show ect ..)

    Nagtrabaho ako sa dashboard sa tanan nga buntag, sa kasubo, dili ko sigurado kung diin nga file ko gibutang ang html, ingon sa gipahayag sa taas, adunay ako daghang, header.php, punoan nga index.php, functions.php, footer.php. Dili ako sigurado kung diin isulud ang html code. (ang una nga bahin nga imong gihatag, gisulud ko na ang nahabilin sa akong styleheet) Naa ang akong imahe didto sa website, andam na ang tanan, kinahanglan lang nako mahibal-an kung diin idugang ang html nga bahin sa code alang sa pag-adap.

    Daghang salamat sa imong oras ug mga pangutana sa pag-field gikan sa usa ka bag-o.

    Phay

  15. 25

    … O tingali ang usa ka tawo mahimo nga mag-post sa mga komento bahin sa unsang file ibutang namon ang html nga bahin sa code. Usa ka ginoo nga pipila ka mga post ang miingon nga nahibal-an niya kini. Wala kaayo ako swerte.

    Phaylen

  16. 26
  17. 27

    Nakasulay ako sa usa ka panahon sa pagpangita usa ka paagi aron ma-embed ang usa ka ma-klik nga mapa sa imahe sa wordpress tungod kay gihukasan niini ang mga html map tag. Ang imong paagi molihok apan ang usa ka mapa sa US klarong paagi aron komplikado aron mabalhin sa kini nga paagi. Nawala ko.

    Tabang.

    Ingon og ang flash ra ang akong kapilian?

    • 28

      Dave,

      Kung gibutang nimo ang imahe sa imong template, mamaayo ka. Kung gibutang nimo ang imahen nga imahe sa tinuud nga sulud, mahimo ka magdagan sa mga isyu sa pagsala. Ang paagi nga akong pagtrabaho sa palibot niini makalilisang, apan usahay nagamit nako ang usa ka iframe.

      Doug

  18. 29

    Hi,

    maora'g ang mapa sa imahe ug ang mga link duha ka lainlaing mga butang, dili sila magkahiusa sama sa pagbuhat sa usa ka mapa sa imahe sa html

    kung giapil nako ang pagbutang sa background (wala sa tunga) alang sa mapa sa imahe, ang pagpahiluna sa mga link dili mag-follow up.

    bisan unsang paagi aron makalibut na kini? amateur kaayo ko. salamat.

  19. 31

    Magamit ba ang susama nga pamaagi alang sa labi ka daghan ug labi ka komplikado nga mapa sa imahe nga gusto nako gamiton?

    Kung imong makita ang akong site, pag-klik sa mga link sa wala ug makita nimo ang imahe nga gisulayan nako nga gamiton ingon usa ka mapa sa imahe (ilalom sa Text alpabeto).

    Sa panguna, pagsulay sa paggamit sa Imahen aron makaadto sa matag seksyon niini nga lista pinaagi sa sulat.

    Ebidensya, naggugol ako og 20 minuto sa pagtukod og mapa nga adunay GIMP, ug pagkahuman gitangtang sa WP ang mga tag sa mapa, mao nga nakita ko ang imong site.

    Bisan pa, mahimo hunahunaon ang paggamit sa Flash

    Salamat.

  20. 33

    Naggamit ako karon usa ka layout sa template ug pag-edit sa akong kaugalingon nga mga butang. Gusto nakong idugang ang usa ka mapa nga imahe, apan dili ako sigurado kung diin kini ibutang sa css. ang imahe nga gusto nakong himuon nga usa ka mapa naa sa ulohan nga bahin.

  21. 34

    hello, gitukod nako ang akong website sa joomla… gusto nako gamiton kini nga pamaagi aron ang logo sa akong panid usa ka link sa balay, gisultihan ako nga dili nimo mahimo kini sa joomla apan kini nga artikulo naghatag kanako paglaum! ang tabang pinaagi sa email labi nga mapasalamatan… .thank you

  22. 35

    Kumusta Doug - Naghimo ako usa ka labi ka komplikado nga css-based nga mapa sa imahe nga adunay usab mga hilit nga rollover (sa kini nga kaso, gipakita ang teksto bisan diin sa panid kung imong ibutang ang usa sa mga hotspot sa imahe). Bisan unsang paagiha, nakit-an nako ang imong pananglitan dinhi samtang nagsiksik kana… ug gihunahuna nako nga akong ipaambit ang mosunud nga sulud:

    1. Alang sa pag-access, dili nimo gamiton ang visibility: wala (o ipakita: wala kung giisip nimo kana) aron itago ang teksto dinhi, ingon usa ka elemento nga gisul-uban sa visibility: ang tinago dili mabasa sa mga magbasa sa screen (ang mga nagsunod sa spec) .

    Hinuon, paggamit usa ka labi ka labi ka kusgan nga pamaagi sa pag-ilis sa imahe. Gisugyot ko ang pamaagi sa Phark o Gilder / Levin - kana ang labi ka maayo nga mga dokumentado nga ngalan sa google aron makapangita mga sukaranan nga pamaagi. Gipalabi ko ang G / L tungod kay kini magamit usab sa CSS nga gipagana apan ang mga imahe gipatay.

    2. Samtang wala ko kini nakita nga nagbungkag (gamit ang FF3), ang imong pagpatuman sa pagpahimutang adunay usab mga kinaiyanhon nga risgo. Ang usa ka hingpit nga nakapahimutang nga elemento giposisyon nga adunay kalabotan sa labing duul nga posisyon niini nga ginikanan. Sa panguna, gusto nimo nga tin-aw nga nagtakda usa ka konteksto sa pagbutang pinaagi sa paggamit sa 'posisyon: paryente' sa #subscription. Pagkahuman ang mga bata (ang mga naka-posisyon nga mga link) mahimo nga ibutang sa sulod sa kanang ginikanan. Ang kini nga pamaagi makatabang aron masiguro ang labi ka kasaligan nga mga sangputanan sa tanan nga mga browser.

    Ingon usab, kinahanglan nimo gamiton ang mga deklarasyon sa pagpahiluna sa "top: x" ug "left: x" (diin ang x mao ang offset nga kantidad, isulti sa px) kaysa mga margin aron makontrol ang pagbutang sa posisyon. Pag-usab, dili gyud nako nakita nga nagbungkag kini sa paagi nga adunay ka niini, apan ang sa taas ug wala gibilin alang niini busa ngano nga dili nimo gamiton kini? Dugang pa adunay ka mga float ug margin nga gibutang sa parehas nga elemento, nga sa ilalum sa piho nga mga kondisyon hinungdan sa "doble nga margin" nga bug sa IE6 (gisulayan ba nimo kini didto?) - Samtang adunay pag-ayo, likayan nimo ang kana nga isyu sa hingpit nga paggamit ug nahabilin imbis nga mga margin alang sa pagpwesto sa kini nga kaso.

    3. Sa katapusan, ngano nga dili mogamit usa ka semantikal nga tunog nga wala’y ayo nga lista alang sa mga sumpay sa baylo nga wala’y kahulugan nga div?

    Pasensya sa pag-drone sa… Gusto ko lang ipaambit, b / c Nahibal-an ko gikan sa kasinatian kung giunsa daghang mga lainlaing paagi aron magamit ang CSS aron makuha ang usa ka gitinguha nga sangputanan, apan ang pipila ka mga paagi sa tinuud molihok nga labi ka maayo (labi ka kasaligan, cross-browser) kaysa sa uban. . HTH.

  23. 36
  24. 37
  25. 38

    Salamat kaayo!! Ang imong mga panudlo nakaluwas kanako BULAN sa trabaho… Bag-o pa ako sa web development, ug nag-antus ra ako sa akong una nga dako nga proyekto. Gihimo ko kini… ang kliyente malipayon, nalipay sa tinuud, ug ingon usab ako!

  26. 39

    Kumusta, daghang salamat sa pag-post niini! Paglabay sa mga tuig ug makatabang pa kini… maayo! Naglisud ako nga makuha ang akong imahe nga mapa nga mag-link sa husto nga lugar. Adunay ako usa ka banner ug gusto nako ang mga social icon sa taas nga tuo sa banner nga mag-link gamit ang code nga imong gihatag. Maayo kini nga buhat, gawas kung adunay ako gibuhat nga sayup tungod kay ang akong mga link makita sa labing taas nga wala nga bahin sa screen, dili sa mga sosyal nga mga icon, apan sa logo. Sigurado ako nga kini usa ka butang nga yano, apan dili ko kini masabtan. Gihunahuna ko nga ipaambit kini dinhi kung adunay ka mga panan-aw. Salamat usab sa pag-post niini!

Unsay imong hunahuna?

Kini nga site naggamit sa Akismet sa pagpakunhod sa spam. Hibal-i kon giunsa ang pagproseso sa datos sa imong komento.