Ako vytvoriť oblasti kotviacich značiek na obrázku na pozadí pomocou CSS
V časoch Webu 1.0 bolo možné zostaviť kolekciu odkazov, ako je tento, spojením vášho obrázka s odkazmi na každej grafike a následným pokusom zošiť to všetko späť dohromady pomocou tabuľky. Dalo by sa to dosiahnuť aj použitím an obrazová mapa ale to zvyčajne vyžaduje nástroj na zostavenie súradnicového systému.
Používanie kaskádových štýlov (CSS) je to oveľa jednoduchšie... žiadne spájanie obrázkov a žiadne hľadanie nástroja na zostavenie vášho súradnicového systému! Jednoducho pridáte obrázok na pozadí k prvku div a potom použijete absolútne umiestnenie na určenie šírky a výšky každého z regiónov, ktoré chcete prepojiť.
- Vytvorte obrázok, ktorý chcete použiť. Môžete použiť túto grafiku nižšie (kliknite pravým tlačidlom myši a uložte na stiahnutie)
- Nahrajte svoj obrázok do adresára, ktorý je relatívny k vášmu CSS. Vo WordPress to možno najľahšie urobiť umiestnením do priečinka s obrázkami v adresári tém.
- Pridajte svoj kód HTML. Je to pekné a jednoduché ... div s tromi odkazmi:
<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>
- Upravte svoj kaskádový štýl (CSS). Budete pridávať 6 rôznych štýlov. 1 štýl pre celkový div, 1 pre značku ukotvenia, aby sa nezobrazovala žiadna textová dekorácia, 1 štýl na skrytie textu (používa sa na zjednodušenie prístupu) a 1 špecifikácia štýlu pre každý z odkazov:
#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; }
Umiestnenie je pekné a jednoduché ... pridajte výšku a šírku a potom nastavte ľavý okraj z ľavej strany obrázka a horný okraj z hornej strany obrázka!
AKTUALIZOVANÉ 10. 3. 2007 pre lepšiu dostupnosť s radou od Phil!