Nilalaman Marketing

Paano Gumawa ng Mga Rehiyon ng Anchor Tag Sa Isang Background na Larawan Gamit ang CSS

Sa mga araw ng Web 1.0, ang isang koleksyon ng mga link na tulad nito ay maaaring mabuo sa pamamagitan ng pag-splice ng iyong larawan ng mga link sa bawat graphic, pagkatapos ay subukang tahiin muli ang lahat ng ito kasama ng isang mesa. Maaari rin itong maisakatuparan sa pamamagitan ng paggamit ng isang mapa ng imahe ngunit iyon ay karaniwang nangangailangan ng isang tool upang mabuo ang coordinate system.

Paggamit ng Cascading Style Sheet (CSS) ginagawa itong isang toneladang mas madali... walang mga larawang pinag-splice at walang sinusubukang humanap ng tool para buuin ang iyong coordinate system! Nagdaragdag ka lang ng larawan sa background sa isang div at pagkatapos ay gumamit ng ganap na pagpoposisyon upang tukuyin ang lapad at taas ng bawat isa sa mga rehiyon na gusto mong i-link.

  1. Buuin ang larawan na gusto mong gamitin. Maaari mong gamitin ang graphic na ito sa ibaba (i-right click at i-save bilang upang i-download)
pagpipilian

  1. I-upload ang iyong imahe sa isang direktoryo na may kaugnayan sa iyong CSS. Sa WordPress, magagawa itong pinakamadali sa pamamagitan ng paglalagay nito sa isang folder ng mga imahe sa iyong direktoryo ng tema.
  2. Idagdag ang iyong HTML. Maganda at simple ... isang div na may tatlong mga link dito:
<div id="subscribe">
    <a id="rss" href="[your feed link]" title="Subscribe with RSS"><span class="hide">RSS</span></a>
    <a id="email" href="[your 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>
  1. I-edit ang iyong Cascading Style Sheet (CSS). Magdaragdag ka ng 6 na magkakaibang istilo. 1 istilo para sa pangkalahatang div, 1 para sa anchor tag para hindi ito magpakita ng anumang dekorasyong teksto, 1 istilo para itago ang text (ginagamit para sa accessibility), at 1 detalye ng istilo para sa bawat link:
#subscribe { /* background image block */
    display: block;
    width: 215px;
    height: 60px;
    background: url(https://martech.zone/wp-content/uploads/2007/10/options.png) no-repeat; 
    margin-top: 0px; }
#subscribe a { text-decoration:none; } 
.hide { visibility:hidden; } 
#rss { /* RSS Link */ 
    float: left;
    position:absolute; 
    width: 50px; 
    height: 50px; 
    margin-left: 20px;
    margin-top: 5px; } 
#email { /* Email Link */ 
    float: left; 
    position:absolute; 
    width: 50px; 
    height: 50px; 
    margin-left: 80px; 
    margin-top: 5px; } 
#mobile {  /* Mobile Link */ 
    float: left; 
    position:absolute; 
    width : 50px; 
    height: 50px; 
    margin-left: 150px; 
    margin-top: 5px; }

Ang pagpoposisyon ay maganda at simple ... magdagdag ng taas at lapad at pagkatapos ay itakda ang kaliwang margin mula sa kaliwang bahagi ng imahe, at ang tuktok na margin mula sa tuktok na bahagi ng imahe!

Nai-UPDATE 10/3/2007 para sa mas mahusay na kakayahang mai-access sa payo ng Phil!

Douglas Karr

Douglas Karr ay CMO ng OpenINSIGHTS at ang nagtatag ng Martech Zone. Nakatulong si Douglas sa dose-dosenang matagumpay na mga startup ng MarTech, tumulong sa angkop na pagsusumikap ng higit sa $5 bil sa mga pagkuha at pamumuhunan ng Martech, at patuloy na tinutulungan ang mga kumpanya sa pagpapatupad at pag-automate ng kanilang mga diskarte sa pagbebenta at marketing. Si Douglas ay isang kinikilalang internasyonal na digital na pagbabago at eksperto at tagapagsalita ng MarTech. Si Douglas ay isa ring nai-publish na may-akda ng isang Dummie's guide at isang business leadership book.

Kaugnay na Artikulo

Bumalik sa tuktok na pindutan
Pagsasara

Natukoy ang Adblock

Martech Zone ay kayang ibigay sa iyo ang nilalamang ito nang walang bayad dahil pinagkakakitaan namin ang aming site sa pamamagitan ng kita ng ad, mga link na kaakibat, at mga sponsorship. Ikinalulugod namin kung aalisin mo ang iyong ad blocker habang tinitingnan mo ang aming site.