Jak zbudować regiony znaczników kotwicy na obrazie tła za pomocą CSS
W czasach Web 1.0 zbiór takich linków można było zbudować, łącząc obraz z linkami na każdej grafice, a następnie próbując zszyć to wszystko razem ze stołem. Można to również osiągnąć za pomocą mapa obrazu ale zwykle wymaga to narzędzia do zbudowania układu współrzędnych.
Korzystanie z kaskadowych arkuszy stylów (CSS) sprawia, że jest to o wiele łatwiejsze… bez łączenia obrazów i szukania narzędzia do zbudowania układu współrzędnych! Wystarczy dodać obraz tła do elementu div, a następnie użyć pozycjonowania bezwzględnego, aby określić szerokość i wysokość każdego regionu, który ma być połączony.
- Stwórz obraz, którego chcesz użyć. Możesz wykorzystać tę grafikę poniżej (kliknij prawym przyciskiem myszy i zapisz jako do pobrania)
- Prześlij swój obraz do katalogu, który jest powiązany z Twoim CSS. W WordPress można to zrobić najłatwiej, umieszczając go w folderze obrazów w katalogu motywów.
- Dodaj swój kod HTML. To ładne i proste… div z trzema linkami:
<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>
- Edytuj swój kaskadowy arkusz stylów (CSS). Będziesz dodawać 6 różnych stylów. 1 styl dla całego div, 1 dla tagu kotwicy, aby nie wyświetlał żadnej dekoracji tekstowej, 1 styl do ukrywania tekstu (używany do ułatwień dostępu) i 1 specyfikacja stylu dla każdego z linków:
#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; }
Pozycjonowanie jest przyjemne i proste… dodaj wysokość i szerokość, a następnie ustaw lewy margines od lewej strony obrazu i górny margines od górnej strony obrazu!
ZAKTUALIZOWANO 10 dla lepszej dostępności dzięki poradom Phil!