Content Marketing

Giunsa Pagtukod ang Mga Rehiyon sa Anchor Tag Sa Usa ka Imahe sa Background Gamit ang CSS

Sa mga adlaw sa Web 1.0, ang usa ka koleksyon sa mga link nga sama niini mahimong matukod pinaagi sa pagdugtong sa imong imahe nga adunay mga link sa matag graphic, unya pagsulay sa pagtahi niini sa tanan uban ang usa ka lamesa. Mahimo usab kini pinaagi sa paggamit sa usa ka mapa sa imahe apan sa kasagaran nanginahanglan usa ka himan aron matukod ang sistema sa koordinasyon.

Paggamit sa Cascading Style Sheet (CSS) naghimo niini nga usa ka tonelada nga mas sayon… walay splicing nga mga hulagway ug walay pagsulay sa pagpangita og himan sa pagtukod sa imong coordinate system! Idugang ra nimo ang usa ka background nga imahe sa usa ka div ug dayon gamita ang hingpit nga pagpoposisyon aron mahibal-an ang gilapdon ug gitas-on sa matag usa sa mga rehiyon nga gusto nimo i-link.

  1. Paghimo sa imahe nga gusto nimong gamiton. Mahimo nimong gamiton kini nga graphic sa ubos (pag-right-click ug i-save aron ma-download)
mga kapilian

  1. 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.
  2. Idugang ang imong HTML. Kini matahum 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="[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 imong Cascading Style Sheet (CSS). Magdugang ka ug 6 ka lainlaing istilo. 1 estilo para sa kinatibuk-ang div, 1 alang sa anchor tag aron dili kini magpakita sa bisan unsa nga text nga dekorasyon, 1 estilo sa pagtago sa teksto (gigamit alang sa accessibility), ug 1 style specification alang sa matag usa sa mga 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 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!

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

Douglas Karr

Douglas Karr mao ang CMO sa OpenINSIGHTS ug ang nagtukod sa Martech Zone. Gitabangan ni Douglas ang daghang mga malampuson nga mga pagsugod sa MarTech, nakatabang sa tungod sa kakugi nga kapin sa $5 bilyon sa mga pagkuha ug pamuhunan sa Martech, ug nagpadayon sa pagtabang sa mga kompanya sa pagpatuman ug pag-automate sa ilang mga estratehiya sa pagbaligya ug pagpamaligya. Si Douglas usa ka internasyonal nga giila nga digital nga pagbag-o ug eksperto ug mamumulong sa MarTech. Si Douglas usa usab ka gipatik nga tagsulat sa usa ka giya ni Dummie ug usa ka libro sa pagpangulo sa negosyo.

Nalangkit nga mga Artikulo

Balik sa ibabaw nga button
Close

Nakit-an ang Adblock

Martech Zone makahatag kanimo niini nga sulod nga walay bayad tungod kay among gi-monetize ang among site pinaagi sa ad revenue, affiliate links, ug sponsorships. Mapasalamaton kami kung imong tangtangon ang imong ad blocker samtang imong gitan-aw ang among site.