Kif Tibni Reġjuni Tag Ankra Fuq Immaġni Sfond Bl-użu tas-CSS
Fil-jiem tal-Web 1.0, ġabra ta 'links bħal din tista' tinbena billi tgħaqqad l-immaġni tiegħek b'links fuq kull grafika, imbagħad tipprova tħitha kollha lura flimkien ma 'tabella. Jista 'jsir ukoll bl-użu ta' mappa tal-immaġni iżda li normalment teħtieġ għodda biex tinbena s-sistema ta 'koordinati.
L-użu ta' Folji ta' Stil Cascading (CSS) jagħmel dan ħafna aktar faċli ... l-ebda immaġini splicing u l-ebda tipprova ssib għodda biex tibni sistema ta 'koordinati tiegħek! Sempliċement iżżid immaġni ta 'sfond ma' div u mbagħad tuża pożizzjonament assolut biex tispeċifika l-wisa 'u l-għoli ta' kull wieħed mir-reġjuni li trid tkun marbuta.
- Ibni l-immaġni li tixtieq tuża. Tista 'tutilizza din il-grafika hawn taħt (ikklikkja bil-lemin u ssejvja bħala biex tniżżel)
- Tella 'l-immaġni tiegħek għal direttorju li huwa relattiv għas-CSS tiegħek. Fil-WordPress, dan jista 'jsir l-aktar faċli billi tpoġġiha f'folder tal-immaġini fid-direttorju tat-tema tiegħek.
- Żid l-HTML tiegħek. Huwa sabiħ u sempliċi ... div bi tliet links fiha:
<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>
- Editja l-Iskeda tal-Istil Cascading tiegħek (CSS). Int se żżid 6 stili differenti. Stil 1 għad-div ġenerali, 1 għat-tikketta tal-ankra sabiex ma turi l-ebda dekorazzjoni tat-test, stil 1 biex jaħbi t-test (użat għall-aċċessibbiltà), u speċifikazzjoni tal-istil 1 għal kull wieħed mill-links:
#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; }
Il-pożizzjonament huwa sabiħ u sempliċi ... żid għoli u wisa 'u mbagħad issettja l-marġni tax-xellug mix-xellug tal-immaġni, u l-marġni ta' fuq min-naħa ta 'fuq tal-immaġni!
AĠĠORNAT 10/3/2007 għal aċċessibilità aħjar bil-parir ta ' Phil!