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.
- 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)
- 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.
- 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>
- 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!