Content Marketing

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ť.

  1. 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)
možnosti

  1. 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.
  2. 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>
  1. 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!

Douglas Karr

Douglas Karr je CMO OpenINSIGHTS a zakladateľ spoločnosti Martech Zone. Douglas pomohol desiatkam úspešných startupov MarTech, asistoval pri due diligence v hodnote viac ako 5 miliárd dolárov v akvizíciách a investíciách Martech a naďalej pomáha spoločnostiam pri implementácii a automatizácii ich predajných a marketingových stratégií. Douglas je medzinárodne uznávaný odborník na digitálnu transformáciu a MarTech a rečník. Douglas je tiež publikovaným autorom príručky Dummie a knihy obchodného vedenia.

súvisiace články

Tlačidlo späť nahor
Zavrieť

Zistený blok reklám

Martech Zone vám tento obsah môže poskytnúť bezplatne, pretože naše stránky speňažujeme prostredníctvom príjmov z reklám, pridružených odkazov a sponzorstiev. Ocenili by sme, keby ste pri prezeraní našej stránky odstránili blokovanie reklám.