Hoe kinne jo in ôfbyldkaart bouwe mei CSS

opsjes

Ik woe wat 'geeky' hawwe, dat ik besleat op in 'pocket' grafyk dy't alle abonnemethoden foar myn blog befettet.

Yn 'e dagen fan Web 1.0 koe in samling keppelings lykas dit wurde boud troch jo ôfbylding op te splitsen mei keppelings op elke grafyk, en besykje it dan allegear tegearre mei in tafel te naaien. It koe ek wurde berikt troch gebrûk te meitsjen fan in ôfbyldingskaart mar dat freget normaal in ark om it koördinatesysteem út te bouwen. Mei gebrûk meitsje fan kaskadearjende stylblêden makket dit in ton makliker ... gjin ôfbyldings splitsen en gjin besykjen om in ark te finen om jo koördinatsysteem te bouwen!

  1. Bouwe jo ôfbylding dy't jo wolle brûke. Jo kinne dizze grafyk hjirûnder brûke (rjochts klikke en opslaan as te downloaden):
    opsjes
  2. Upload jo ôfbylding nei in map dy't relatyf is oan jo CSS. Yn WordPress kin dit it maklikst wurde dien troch it yn in ôfbyldingsmap yn jo tema-map te pleatsen.
  3. Foegje jo HTML ta. It is moai en ienfâldich ... in div mei trije links deryn:
    > div id = "abonnearje">> a id = "rss" href = "[jo feedlink]" title = "Abonnearje mei RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "e-post" href = "[jo e-post e-post ynskriuwe]" title = "Abonnearje mei e-post" >> span class = "hide"> E-post> / span >> / a>> a id = "mobyl" href = "[jo mobile link]" title = "Besjoch mobile ferzje" >> span class = "hide"> Mobyl> / span >> / a>> / div>
    
  4. Bewurkje jo Cascading Style Sheet. Jo sille 6 ferskillende stilen tafoegje. 1 styl foar de algemiene div, 1 foar de a-tag, sadat dizze gjin tekstdekoraasje werjaan, 1 styl om de tekst te ferbergjen (brûkt foar tagonklikens) en 1 stylspesifikaasje foar elk fan 'e keppelings:
    #subscribe {/ * eftergrûnôfbyldingsblok * / werjaan: blokje; breedte: 215px; hichte: 60px; eftergrûn: url (images / options.png) no-werhelje; marzje-top: 0px; } # abonnearje in {tekst-fersiering: gjin; } .ferbergje {sichtberens: ferburgen; } #rss {/ * RSS-keppeling * / float: lofts; posysje: absolút; breedte: 50px; hichte: 50px; marzje-lofts: 20px; marzje-top: 5px; } #email {/ * E-postlink * / float: lofts; posysje: absolút; breedte: 50px; hichte: 50px; marzje-lofts: 70px; marzje-top: 5px; } #mobile {/ * Mobile Link * / float: lofts; posysje: absolút; breedte: 50px; hichte: 50px; marzje-lofts: 130px; marzje-top: 5px; }

De posysjonearring is moai en ienfâldich ... foegje in hichte en breedte ta en set dan de linkermarge fanôf de linkerkant fan 'e ôfbylding, en de boppemarge fan' e boppekant fan 'e ôfbylding!

Dizze "Hoe" post is foar yngong yn 'e Geeks binne Sexy ultime "How To" Wedstriid! Ien opmerking, it is wier dat in ôfbyldingskaart folle kompleksere polygonen kin hawwe, mar ik haw net echt te folle plakken sjoen wêr't dat in must have is. Ik seach dat grutte RSS-ôfbylding op 'e Geeks Sexy sydbalke binne ... dat is in goed plak foar in keppeling. 😉

UPDATED 10/3/2007 foar bettere tagonklikens mei it advys fan phil!

Sponser: As jo ​​in nijeling binne foar webûntwerp, bou dan jo eigen webside De juste manier mei HTML & CSS, 2nd Edition is in must-have. Yn dizze maklik te folgjen gids learje jo hoe't jo in webside de bêste manier bouwe - troch it sels te dwaan!

41 Comments

  1. 1

    Doug, dat liket in moaie metoade, mar it is heul ûntagonklik.

    Tink oan in bline brûker mei in skermlêzer, in brûker mei allinich in tekstbrowser as ien dy't de side besiket sûnder CSS of Ofbyldings ynskeakele (lykas, miskien in mobile brûker op syk nei de link nei jo mobile freonlike side). Nimmen fan har sil oer dizze trije links witte, om't se gjin tekst hawwe. As ôfbyldings út binne, sil in brûker net iens alt-tekst sjen om te beskriuwen wat der west hie, om't it in eftergrûnôfbylding is.

    Better soe wêze om de ôfbyldings te snijen, te keppeljen, yn in list te pleatsen en se neist elkoar te sweven. Of sels tekst brûke foar de keppelings en ferfange de tekst mei in standertôfbyldingferfangingstechnyk. Dit liket handich, mar it makket dingen folle hurder / ûnmooglik foar dyjingen dy't gjin standert grafyske browser brûke.

    • 2
      • 3

        Doug,

        JAWS lêst keppelingstitels net standert, mar jo hawwe gelyk, it kin. Wêrom soene jo nei titels op 'e keppeling sykje as jo net wisten dat it der wie, en sels as jo wiene, dan falt dit grif nei in brûkberensprobleem dat betsjut dat jo minder bekwame brûkers in twadde taryf ûnderfining jouwe fan it brûken fan jo side.

        Foar tekstbrowsers lit it artikel dat jo my rjochtsje op dy Lynx jo ek in list mei keplingtitels opbringe, mar myn punt bliuwt dat as jo net wisten dat d'r in link wie, om't d'r yn 't earstoan gjin tekst wie , wêrom soene jo nei titeltekst sykje?

        Uteinlik sille keatlingattributen noch net ferskine foar ien dy't browset sûnder ôfbyldings ynskeakele of sûnder CSS ynskeakele.

        Dat ja, keppelings mei titels binne better dan dy sûnder, mar yn dit gefal is it mar marginaal.

        Dêrom is it brûken fan in ôfbylding, sadat alt-tekst kin wurde lêzen, of ferfanging fan ôfbylding, sadat de tekst der is, in folle feiliger, tagonkliker en brûkberder opsje.

        • 4

          Goede ynfo, Phil. Ik sil dit besykje te ferbetterjen mei tekst, mar gewoan de tekst ferbergje - op dy manier sil in tagonklik produkt lykas JAWS de keppelingstekst lêze en de tekst wurdt werjûn as CSS as Ofbyldings binne útskeakele.

          Ik bin it der net mei iens dat de iennichste tagonklike oplossing soe wêze om in ôfbylding mei in keppeling te pleatsen.

  2. 5
  3. 8

    Ik haw it stellen. Dêr sei ik it.

    Doug, de grafyk is fantastysk en de kodearring is sa ûnbidich ienfâldich dat it my bang makket (mei CSS spielje en no "krij ik it einliks").

    Tweaked de koade oan om oan myn behoeften te foldwaan, útfûn wêr't de HTML-bit yn falle moast, en eerlijk gezegd sjocht it der geweldich út en hat dy top fan myn sydbalke skjinmakke dy't my INSANE hat riden.

    Ik moat miskien noch krekt dy kofje foar jo keapje!

  4. 10

    Doug,

    Ik sil in ôfwikende stim wêze, mei myn ûnderfining as foarbyld. Ik herinner my ús e-mails doe't myn thús-e-post feroare en jo stelden dat ik gewoan moast ynskriuwe foar myn nije. Ik moat tajaan dat ik in heule tiid hie "ûntdek" de nije funksje op jo side om opnij te kiezen. Diel hjirfan wie om't de orizjinele keppeling in bytsje tradisjoneel wie en ik dy vaag ûnthâlde. De oare wie om't de sydlike heale envelop my earst net like op in envelop. Nei sawat 5 of mear minuten begon ik myn mûs oer elke ôfbylding te rôljen en doe't de titel "Abonnearje mei e-post" sjen liet, wist ik dat ik yn bedriuw wie. Myn harsens fûn ek út wat de linkfoto wie.

    Mar, teminsten foar my, wie in sydlingse envelop gewoan net yntuïtyf foar my as it plak om te abonnearjen op e-postmeldingen. En (om't my waard ferteld om altyd mei wat moais te einigjen) bin ik it hjir mei Phil iens; de metoade is echt ienfâldich en it heule item wurket geweldich. Ik nim it oan dat jo ûntwerp ark holp om jo de krekte dimensjes te jaan foar de 3 seksjes; is dat in juste oanname? Ik moat dat oannimme, want as ik, sis mar, in ôfbylding fan 400 piksels hie, soe ik de juste ynstellings moatte wite, ensfh.

  5. 12
    • 13

      William,

      It liket derop dat jo in konflikt hawwe kinne tusken jo nammen fan jo kommentaarklasse en de nammen fan 'e klassen yn' e sydbalke-grafyk. Jo kinne se oars beneame om it konflikt op te romjen. Lit my witte as jo in hân nedich binne!

      doug

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

    Moaie oanpak, mar ik haw wat nedich foar in topografyske kaart, dus ik kin gjin rjochthoekige gebieten brûke ... Ik tink dat ik de âlde styl imagemap mei koördinaten moat brûke, mar ik sil wierskynlik in bytsje djipper grave ...

  11. 19

    Tank foar dizze ynfo, Doug. Ik hie hjir earder west en frege my ôf hoe't jo it diene. Wy woenen in kaart lykas dizze meitsje om nei ús berjochten yn te foegjen, en no't wy de middelen hawwe, kinne wy ​​it dwaan. Bravo!

  12. 20
  13. 21

    Hoi Doug,
    Ik haw in foarige reaksje efterlitten, mar realisearre my dat ik hast gjin ynsjoch oanbean yn myn dilemma. Wy hawwe in WordPress-tema oanpast om ús te helpen ús online sitcom hjir te starten:

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

    No sille jo sjen dat wy in navigaasjebanner oer de boppekant hawwe, in ôfbylding dy't wy fan doel wiene yn kaart te bringen lykas wy tsientallen kearen earder hawwe. / palmforehad. Nimmen fan ús begrypt CSS net echt, mar wy stroffelje genôch en hawwe oant no ta goed dien oant dit punt. Jo artikel yn 'e ALLEEN ien fan' e tsientallen dy't levere is wirklik ynsjoch oer hoe't jo maklik yn kaart bringe kinne yn CSS. Ik haw it stylblêd oanjûn neffens jo oanwizings, mar ha gjin idee wêr't de HTML te pleatsen. Alles wat jo seine is "Foegje jo html ta ... It is moai en ienfâldich" en doe krimp ik yn omdat ik tocht .. "net ienfâldich genôch foar my!" Ik wist net dat ik html koe tafoegje oan ien fan dizze php-siden yn 'e tema-bewurker. Pleats ik de html yn 'e koptekst? De sjabloan Main Index? De funksjes? Ik gean der fan út dat alle WordPress-brûkers de opsje hawwe om har tema te bewurkjen yn 'e dashboard-editor, wat frij universeel liket yn funksjonaliteit. As jo ​​suggerearje wêr't jo de html pleatse, soene ik de oru-koade graach oanpasse wolle foar myn navigaasjebalke.

    Betanke foar it dielen fan jo kennis mei de mienskip. Ik bin bliid dat jo in kofje krije.

    • 22

      Hoi Phay!

      Alle bestannen foar it tema fan jo blog binne te krijen fia it adminpaniel foar bewurkjen. As jo ​​klikke op Presintaasje en dan Theme Editor, soene jo in list kinne sjen fan jo bestannen rjochts en links in bewurker.

      As jo ​​wolle dat dit yn jo sydbalke leit, hawwe jo wierskynlik in sydbalke-side. Klikje om it te bewurkjen en set dan de levere HTML binnen de side wêr't jo it wolle.

      Ien opmerking: de bewurkjen fan stylblêd is relatyf oan jo side, dus jo moatte de ôfbylding uploade nei de map fan ôfbyldings fan tema's as jo der nei ferwize lykas oare ôfbyldings yn jo tema.

      Hope dat helpt!

    • 23

      Phay,
      Ik kaam dizze side hjoed tsjin en hie itselde dilemma as jo. Ik woe ek in ôfbyldingkaart tafoegje oan 'e koptekstôfbylding. Nei in skoftke mei it spieljen haw ik it goed. Set de div HTML yn it header.php-bestân. Ik set it tusken en. Net wis as jo sjabloan dy krekte kodearring hat, mar spielje dermei yn 't header.php-bestân en jo sille it útfine.
      -
      paul

  14. 24

    Tank foar it rappe antwurd!

    Nee, ik woe net dat it yn 'e sydbalke stie, it is boppe oan' e pagina (jo kinne sjen yn 'e keppeling dy't ik levere - de rôze navigaasjebalke dy't kontant seit, oer de show ens ..)

    Ik haw de heule moarn yn it dashboard wurke, spitigernôch, ik bin net wis yn hokker bestân ik de html pleatst, lykas hjirboppe neamd, ik haw ferskate, header.php, haad index.php, functions.php, footer.php. Ik bin net wis wêr't jo de html-koade ynfiere moatte. (it earste diel dat jo joegen, ik haw de rest al yn myn stylblêd ynfoege) Ik haw myn ôfbylding dêr op 'e webside, alles is klear om te gean, ik moat gewoan witte wêr't it html-diel fan' e koade ta te foegjen is foar oanpassing.

    Tige tank foar jo tiid en fjildfragen fan in begjinner.

    Phay

  15. 25

    ... Of miskien koe immen yn 'e opmerkingen pleatse oer hokker bestân wy it html-diel fan' e koade pleatse. In gentleman dy't in pear berjochten opstelde, sei dat hy it útfûn. Ik haw net sa lokkich west.

    Phaylen

  16. 26
  17. 27

    Ik haw in heul tiid tiid om in manier te finen om in klikbere ôfbyldingskaart yn te setten yn wordpress, om't it html-kaarttags stript. Jo manier soe wurkje, mar in kaart fan 'e FS is fansels in manier om te kompleks te meitsjen mei dizze manier. Ik bin ferdwaald.

    Help.

    It liket derop dat flits myn iennichste opsje is?

    • 28

      Dave,

      As jo ​​de ôfbylding yn jo sjabloan pleatse, sil it goed wêze mei jo. As jo ​​de ôfbyldingskaart yn 'e werklike ynhâld sette, kinne jo filterproblemen hawwe. De manier wêrop ik dit haw wurke is ferskriklik, mar bytiden haw ik in iframe brûkt.

      doug

  18. 29

    Hoi,

    it liket derop dat de ôfbyldingskaart en de keppelings twa ferskillende dingen binne, se wurkje net gear lykas in ôfbyldkaart yn html docht

    as ik eftergrûnposysje opnimme (midden links) foar de ôfbyldingskaart, folget de posysje fan 'e keppelings net op.

    elke manier om dit te krijen? ik bin heul amateur. Dankewol.

  19. 31

    Soe in soartgelikense oanpak wurde brûkt foar in gruttere en yngewikkelder ôfbyldingskaart lykas ik besykje te brûken?

    As jo ​​myn side besjogge, klikje dan op links nei links en jo sille de ôfbylding sjen dy't ik besykje as ôfbyldingskaart te brûken (ûnder it Tekstalfabet).

    Yn prinsipe besykje de ôfbylding te brûken om nei elke seksje fan dizze list per letter te gean.

    Blykber haw ik 20 minuten in kaart boud mei GIMP, en dan ferwideret WP de kaarttags, dus dat is hoe't ik jo side fûn.

    Hoewol, kin oerweagje Flash te brûken

    Tank.

  20. 33

    ik brûk op it stuit in sjabloanopmaak en bewurkje mei myn eigen guod. Ik wol in ôfbyldingskaart tafoegje, mar ik bin net wis wêr't ik dizze yn 'e css moat pleatse. de ôfbylding wêrfan ik in kaart meitsje wol is yn 'e koptekst.

  21. 34

    hallo, ik haw myn webside boud op joomla ... ik wol dizze metoade brûke om it logo fan myn pagina in keppeling nei hûs te meitsjen, my is ferteld dat jo dit net kinne dwaan mei joomla, mar dit artikel jout my hope! help fia e-post soe in soad wurdearre wurde ... .tanke

  22. 35

    Hoi Doug - Ik bou in frijwat komplekse css-basearre ôfbyldkaart út dy't ek rollovers op ôfstân hat (yn dit gefal wurdt tekst earne oars op 'e pagina werjûn as jo ien fan' e ôfbyldingshotspots bewege). Hoe dan ek, ik kaam jo foarbyld hjir tsjin doe't ik dat ûndersocht ... en ik tocht dat ik de folgjende ynput diele soe:

    1. Foar tagonklikens moatte jo sichtberens net brûke: gjin (of werjaan: gjin as jo dat beskôgje) om de tekst hjir te ferbergjen, as in elemint stylearre mei sichtberens: ferburgen sil net wurde lêzen troch skermlêzers (dyjingen dy't folgje op spesifikaasje) ,

    Brûk ynstee in mear robúste technyk foar ferfanging fan ôfbyldings. Ik stel foar of de Phark-metoade as Gilder / Levin - dat binne gewoan de better dokuminteare nammen om te googlejen om de basistechniken te finen. Ik haw leaver G / L, om't it ek wurket mei CSS ynskeakele, mar ôfbyldings binne útskeakele.

    2. Hoewol ik it net brek sjoch (FF3 brûke), hat jo ymplemintaasje fan posysjonearring ek ynherinte risiko's. In absolút posysjeare elemint is posysjeare relatyf oan syn tichtst posysjoneare âlder. Yn prinsipe wolle jo eksplisyt in posysjonearringskontekst ynstelle troch 'posysje: relatyf' oan te passen op # abonnemint. Dan kinne de bern (de pleatste keppelings) binnen dy âlder wurde pleatst. Dizze metoade helpt soargje foar betrouberere resultaten yn browsers.

    Jo moatte dan ek de posysjedeklaraasjes fan "top: x" en "lofts: x" brûke (wêr't x de offsetwearde is, sis yn px) ynstee fan marzjes om dizze posysje te behanneljen. Nochris, ik sjoch it net needsaaklik brekke sa't jo it hawwe, mar boppe en lofts binne hjirfoar bedoeld, dus wêrom se net brûke? Plus, jo hawwe driuwers en marzjes ynsteld op itselde elemint, dat ûnder spesifike omstannichheden de bug "dûbele marzje" yn IE6 feroarsaakje (hawwe jo dit dêre test?) - wylst d'r in oplossing is, foarkomt jo dat probleem folslein troch top te brûken en lofts ynstee fan marzjes foar posysjonearring yn dit gefal.

    3. As lêste, wêrom net in semantysk lûd net oardere list brûke foar dizze keppelings ynstee fan 'e sinleaze div?

    Sorry foar dronjen op ... Ik wol gewoan diele, b / c Ik wit út ûnderfining hoe't d'r in protte ferskillende manieren binne om CSS te brûken om in winske resultaat te krijen, mar guon manieren wurkje wis better (betrouberder, cross-browser) dan oaren , HTH.

  23. 36
  24. 37
  25. 38

    Tige dank!! Jo ynstruksjes besparre my OEREN wurk ... Ik bin nij foar webûntwikkeling, en ik haw krekt lijen troch myn earste grutte projekt. Ik makke it ... de kliïnt is lokkich, ekstatysk, en ik ek!

  26. 39

    Hallo, tige tank foar it pleatsen fan dit! Jierren letter en it helpt noch ... leuk! Ik wrakselje om myn ôfbyldingskaart op it juste plak te keppeljen. Ik haw in banner en ik wol dat de sosjale ikoanen yn 'e boppeste rjochterkant fan' e banner keppele wurde mei de koade dy't jo hawwe levere. It wurket geweldich, útsein as ik wat ferkeard doch omdat myn links ferskine oan 'e heule lofterkant fan it skerm, net oer de sosjale ikoanen, mar oer it logo. Ik bin wis dat it wat ienfâldich is, mar ik kin it gewoan net útfine. Tocht dat ik it hjir diele soe yn it gefal dat jo ynsjoch hawwe. Tank wer foar it pleatsen fan dit!

Wat tinksto?

Dizze side brûkt Akismet om spam te ferleegjen. Learje hoe't jo kommentaargegevens ferwurke wurde.