Hoe kinne jo in ôfbyldkaart bouwe mei CSS

opsjes

Ik woe wat 'geeky' hawwe, dat ik besleat op in grafyske 'pocket' 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 divy 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 tag, sadat dizze gjin tekstdekoraasje werjit, 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 polygoanen kin hawwe, mar ik haw eins net te folle plakken sjoen wêr't dat in must is. Ik fernaam 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 ûnberikber.

    Beskôgje in bline brûker mei in skermlêzer, in brûker mei in blêder allinich foar tekst of elkenien dy't de side besykje sûnder CSS of ôfbyldings ynskeakele (lykas, miskien in mobile brûker op syk nei de keppeling nei jo mobylfreonlike side). Net ien fan harren sil witte oer dy trije keppelings omdat se hawwe gjin tekst. As ôfbyldings út binne, sil in brûker net iens alt-tekst sjen om te beskriuwen wat d'r soe west hawwe, om't it in eftergrûnôfbylding is.

    It soe better wêze om de ôfbyldings te snijen, se te keppeljen, se yn in list te setten en se neist elkoar te driuwen. Of brûk sels tekst foar de keppelings en ferfange de tekst mei in standert technyk foar ferfanging fan ôfbyldings. Dit liket handich, mar it makket dingen folle hurder / ûnmooglik foar dyjingen dy't gjin standert grafyske blêder brûke.

    • 2
      • 3

        Doug,

        JAWS lêst gjin keppelingstitels standert, mar jo hawwe gelyk, it kin dwaan. Wêrom soene jo sykje nei keppelingstitels as jo net wisten dat it d'r wie, en sels as jo wiene, sakket dit grif nei in brûkberensprobleem, wat betsjuttet dat jo minder bekwame brûkers in twadde rate ûnderfining jouwe fan it brûken fan jo side.

        Foar tekstbrowsers lit it artikel dat jo my oanwize dat Lynx ek in list mei keppelingstitels ophelje, mar myn punt bliuwt dat as jo net wisten dat d'r in keppeling wie, om't der yn it foarste plak gjin tekst wie , wêrom soene jo sykje nei titeltekst?

        Uteinlik sille attributen foar linktitel noch altyd net ferskine foar elkenien dy't blêdzje sûnder ôfbyldings ynskeakele of sûnder CSS ynskeakele.

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

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

        • 4

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

          Ik bin it net iens dat de ienige 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 grafiken binne fantastysk en de kodearring is sa ongelooflijk ienfâldich dat it my bang makket (spielje mei CSS en no "krije ik it").

    De koade opknapt om oan myn behoeften te foldwaan, útfûn wêr't it HTML-bit yn moat falle, en earlik sein sjocht it der geweldich út en hat de boppekant fan myn sydbalke skjinmakke dy't my FERGESE DRIFT.

    Miskien moat ik dy kofje noch mar 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 e-post thús feroare en jo opmurken dat ik gewoan oanmelde moast mei myn nije. Ik moat tajaan dat ik in heul tiid hie om de nije funksje op jo side te "ûntdekken" om opnij oan te melden. In part fan dit wie om't de orizjinele keppeling in bytsje tradisjoneeler wie en ik my dy vague ûnthâlde. De oare wie om't de sydlings heale envelope my ynearsten gewoan net as in envelop like. Nei sa'n 5 of mear minuten begon ik myn mûs oer elke ôfbylding te rollen en doe't de titel "Abonnearje mei e-post" ferskynde, wist ik dat ik yn bedriuw wie. Myn brein hat ek útfûn wat de linkfoto wie.

    Mar, teminsten foar my, wie in sideway-envelop gewoan net yntuïtyf foar my as it plak om te abonnearjen op e-postnotifikaasjes. En (om't my ferteld waard altyd mei wat aardichs ôf te sluten) bin ik it hjirboppe mei Phil iens; de metoade is echt ienfâldich en it hiele item wurket geweldich. Ik nim it oan dat jo ûntwerpark holp om jo de krekte ôfmjittings te jaan foar de 3-seksjes; is dat in juste oanname? Ik moat dat oannimme, om't as ik bygelyks in 400 piksel brede ôfbylding hie, soe ik de juste ynstellingen moatte witte, ensfh.

  5. 12
    • 13

      Willem,

      It liket derop dat jo in konflikt hawwe kinne tusken jo opmerkingsklassenammen en de klassenammen yn 'e sydbalkegrafyk. Jo kinne se oars neame om it konflikt op te heljen. Lit my witte as jo in hân nedich hawwe!

      doug

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

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

  12. 20
  13. 21

    hoi Doug,
    Ik liet in eardere opmerking, mar realisearre dat ik amper ynsjoch joech yn myn dilemma. Wy hawwe in WordPress-tema oanpast om ús te helpen ús online sitcom hjir te lansearjen:

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

    No sille jo sjen dat wy in navigaasjebanner oan 'e boppekant hawwe, in ôfbylding dy't wy fan doel wiene yn kaart te bringen lykas wy tsientallen kearen earder hawwe. /palmforehad. Net ien fan ús begrypt CSS echt, mar wy stroffelje genôch om en hawwe oant no ta goed dien. Jo artikel yn 'e IENE fan' e tsientallen dy't levere binne wirklik ynsjoch oer hoe't jo imagemapping yn CSS maklik kinne brûke. Ik eited it stylblêd neffens jo rjochtingen, mar haw gjin idee wêr't te pleatsen de HTML. Alles wat jo seine is "Foegje jo html ta ... It is moai en ienfâldich" en doe krûpte ik om't 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. Set ik de html yn 'e koptekst? De Main Index sjabloan? De funksjes? Ik nim oan dat alle WordPress-brûkers de opsje hawwe om har tema te bewurkjen yn 'e dashboard-bewurker, dy't aardich universeel liket yn funksjonaliteit. As jo ​​​​foarstelle kinne wêr't jo de html pleatse kinne, soe ik oru-koade graach oanpasse wolle foar myn navigaasjebalke.

    Betanke foar it dielen fan jo kennis mei de mienskip. Ik bin bliid om jo in kofje te jaan.

    • 22

      Hi Phay!

      Alle bestannen foar it tema fan jo blog binne beskikber fia it adminpaniel foar bewurkjen. As jo ​​​​klikke op Presintaasje en dan Tema-bewurker, soene jo in list fan jo bestannen rjochts moatte kinne sjen en in bewurker nei lofts.

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

      Ien opmerking: De bewurking fan it stylblêd is relatyf oan jo side, dus jo moatte de foto uploade nei de tema-ôfbyldingsmap as jo it ferwize lykas jo oare ôfbyldings yn jo tema soene.

      Hope dat helpt!

    • 23

      Phay,
      Ik kaam hjoed oer dizze side en hie itselde dilemma as jo. Ik woe ek in ôfbyldingskaart tafoegje oan de koptekst. Nei't ik der in skoft mei boarte, krige ik it goed. Set de div HTML yn de header.php triem. Ik set it tusken en. Net wis oft jo sjabloan dat krekte kodearring hat, mar boartsje dermei yn it header.php-bestân en jo sille it útfine.
      -
      paul

  14. 24

    Tank foar de snelle reaksje!

    Nee, ik woe net dat it yn 'e sydbalke soe wêze, it is oan' e boppekant fan 'e side (jo kinne sjen yn' e keppeling dy't ik joech - de rôze navigaasjebalke dy't kontant seit, oer de show ect..)

    Ik haw de hiele moarn yn it dashboard wurke, spitigernôch, ik bin net wis yn hokker bestân ik de html pleatse, lykas hjirboppe oanjûn, ik haw ferskate, header.php, main index.php, functions.php, footer.php. Ik bin der net wis fan wêr't jo de HTML-koade ynfoegje. (it earste diel dat jo levere, 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 ik it html-diel fan' e koade taheakje kin foar it oanpassen.

    Tige tank foar jo tiid en fragen stelle fan in novice.

    milling

  15. 25

    ... Of miskien kin immen yn 'e opmerkings pleatse oer hokker bestân wy it html-diel fan 'e koade pleatse. In hear in pear berjochten boppe sei dat hy it útfûn. Ik haw net sa gelok hân.

    Phaylen

  16. 26
  17. 27

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

    Help.

    It liket as flash is myn ienige opsje?

    • 28

      Dave,

      As jo ​​​​de ôfbylding yn jo sjabloan pleatse, sil it goed wêze. As jo ​​​​de ôfbyldingskaart yn 'e eigentlike ynhâld pleatse, kinne jo filterproblemen hawwe. De manier wêrop ik dit haw wurke is ferskriklik, mar soms 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 hoe't in ôfbyldingskaart yn html docht

    as ik eftergrûnposysjonearring (sintrum lofts) opnimme foar de ôfbyldingskaart, folget de posisjonearring fan 'e keppelings net op.

    ien of oare manier om dit te kommen? ik bin heul amateur. dankewol.

  19. 31

    Soe in ferlykbere oanpak brûkt wurde foar in gruttere en komplisearre byldkaart lykas ik besykje te brûken?

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

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

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

    Hoewol, kin tinke oer it brûken fan Flash

    Tank.

  20. 33

    Ik brûk op it stuit in sjabloanlayout en bewurkje mei myn eigen guod. Ik wol taheakje in ôfbylding map, mar ik bin der net wis op wêr't te pleatsen it yn de css. de ôfbylding wêrfan ik in kaart meitsje wol is yn it koptekstdiel.

  21. 34

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

  22. 35

    Hoi Doug - Ik bouwe in frij komplekse css-basearre ôfbyldingskaart út dy't ek rollovers op ôfstân hat (yn dit gefal wurdt tekst op oare plakken op 'e side werjûn as jo ien fan' e ôfbyldingshotspots hoverje). Hoe dan ek, ik kaam jo foarbyld hjir tsjin by it ûndersykjen fan dat ... en ik tocht dat ik de folgjende ynput soe diele:

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

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

    2. Wylst ik it net sjoch brekke (mei FF3), hat jo ymplemintaasje fan posysjonearring ek ynherinte risiko's. In absolút gepositioneerd elemint wurdt gepositioneerd relatyf oan syn tichtst gepositioneerd âlder. Yn prinsipe wolle jo eksplisyt in posisjonearringskontekst ynstelle troch 'posysje:relatyf' ta te passen op #subscription. Dan kinne de bern (de pleatste keppelings) binnen dy âlder pleatst wurde. Dizze metoade helpt te garandearjen betrouberere resultaten oer browsers.

    Ek moatte jo dan de posisjonearringsferklearrings fan "boppe: x" en "lofts: x" brûke (wêr't x de offsetwearde is, sis mar yn px) ynstee fan marzjes om dy posisjonearring te behanneljen. Nochris, ik sjoch it net needsaaklik brekke lykas jo it hawwe, mar boppe en lofts binne bedoeld foar dit, dus wêrom brûke se net? Plus jo hawwe driuwers en marzjes ynsteld op itselde elemint, dy't ûnder spesifike betingsten de "dûbele marzje" brek yn IE6 feroarsaakje (hasto dit dêr testen?) - wylst d'r in oplossing is, foarkomme jo dat probleem folslein troch top te brûken en lofts ynstee fan marzjes foar posisjonearring yn dit gefal.

    3. As lêste, wêrom net brûke in semantysk lûd unordered list foar dizze keppelings ynstee fan de betsjuttingsleaze div?

    Sorry foar it droegjen op ... ik diele gewoan, 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 grif better (betrouberder, cross-browser) dan oaren . HTH.

  23. 36
  24. 37
  25. 38

    Tige dank!! Jo ynstruksjes hawwe my oeren wurk bewarre ... Ik bin nij foar webûntwikkeling, en ik haw krekt lijen troch myn earste grutte projekt. Ik makke it ... de klant is lokkich, ekstatysk eins, en ik ek!

  26. 39

    Hallo, tige tank foar it pleatsen fan dit! Jierren letter en it helpt noch ... moai! Ik haw muoite om myn ôfbyldingskaart op it goede plak te keppeljen. Ik haw in banner en ik wol dat de sosjale ikoanen yn 'e rjochter boppekant fan' e banner keppelje mei de koade dy't jo hawwe levere. It wurket geweldich, útsein dat ik wat ferkeard doch, om't myn keppelings op 'e fierste lofterkant fan it skerm ferskine, net oer de sosjale ikoanen, mar oer it logo. Ik bin der wis fan dat it is wat simpel, mar ik kin gewoan net útfine. Ik tocht dat ik it hjir diele soe foar it gefal dat jo ynsjoch hawwe. Nochris tank foar it pleatsen fan dit!

Wat tinksto?

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