• Artykuł

          

Samouczek: Odnośniki graficzne - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Norbert Blandzi

Opublikowano: 2011-09-28

Wiemy już, w jaki sposób tworzyć odnośniki tekstowe. W tym samouczku dowiemy się, jak wykorzystać odnośniki graficzne przy tworzeniu stron. Rozstrzygniemy problem z usunięciem ramki wokół obrazka, a następnie utworzymy odnośniki graficzne, w których tło zmienia się w zależności od stanu, w jakim się one znajdują.

Przed wykonaniem zadania powinieneś przeczytać samouczki:

  1. Podstawy formatowania stron
  2. Grafika na stronie WWW
  3. Odnośniki
  4. Formatowanie odnośników

Po wykonaniu zadań nauczysz się:

  • dodawać odnośniki graficzne,
  • tworzyć mapę odsyłaczy,
  • usuwać ramkę wokół obrazka,
  • tworzyć odnośniki graficzne z obrazkami, zależnymi od stanu, w jakim się znajdują.

Implementacja

Twoim zadaniem jest:

  • dodanie odnośnika graficznego,
  • usunięcie ramki, znajdującej się wokół odnośnika graficznego,
  • dodanie mapy odsyłaczy,
  • utworzenie odnośnika graficznego z obrazkami, zależnymi od stanów odnośnika.

Mapa odsyłaczy

Gdy chcemy wykorzystać jeden obrazek, a umieścić na nim kilka odnośników, z pomocą przychodzą nam mapy odsyłaczy. Działają one podobnie jak odnośnik obrazkowy, z tą różnicą, iż dla każdego fragmentu obrazka możemy wybrać inny odnośnik. Wyobraź sobie obrazek – mapę Europy, w której każdy kraj jest obszarem, który po kliknięciu przekierowuje użytkownika na inną stronę. Więcej na temat odnośników znajdziesz w encyklopedii: Jak tworzyć odnośniki do różnych zasobów.

Efekt końcowy został przedstawiony na Rys. 1.

Rys. 1. Efekt końcowy.

Przygotowanie strony

Przygotujemy podstawowy szkielet strony internetowej. Jeśli będziesz miał problem z tym zadaniem, zobacz pierwszy odcinek samouczka .

  1. Otwórz edytor HTML i utwórz szkielet strony.
<html>
    <head>
        <title>Odnośniki graficzne</title>
    </head>
    <body>
    </body>
</html>
  • Zapisz plik pod nazwą index.html i otwórz w przeglądarce internetowej.
  • Kliknij prawym przyciskiem myszki na obrazek z Rys. 2. Z menu podręcznego wybierz Zapisz obrazek jako i zapisz go w katalogu, w którym umieściłeś plik index.html nadając mu nazwę obrazek.jpg.

Rys. 2. Obrazek obrazek.jpg do umieszczenia na stronie.

Wstawienie odnośnika graficznego

  1. Ustaw kursor za znacznikiem body i dodaj nową linię.
  2. Wpisz:
<a href="http://www.msdn.pl">
    <img src="obrazek.jpg" alt="Nie można wyświetlić obrazka" />
</a>
  1. Zapisz plik index.html i odśwież go w przeglądarce. Sprawdź, czy wygląda tak, jak na Rys. 3.

Rys. 3. Odnośnik graficzny z ramką.

  1. Sprawdź, czy po kliknięciu w obrazek zostaniesz przekierowany na stronę www.msdn.pl.

Usunięcie ramki

Gdy otworzysz plik index.html w przeglądarce, szybko się zorientujesz, że wokół niej znajduje się ramka, która w większości wypadków jest efektem niepożądanym. Aby usunąć ramkę:

  1. W nagłówku strony index.html dodaj:
<style type="text/css">
    img { border: none; } 
</style>
  1. Otwórz plik index.html w przeglądarce i zobacz, czy wygląda tak, jak na Rys. 4.

Rys. 4. Odnośnik graficzny bez ramki.

Wstawienie mapy odsyłaczy

Mapa odsyłaczy umożliwia umieszczenie odsyłaczy na dowolny obrazek na naszej stronie. Możemy umieścić odsyłacze w kształcie prostokąta (rect), koła (circle) lub wielokąta (poly). Więcej o mapie odsyłaczy przeczytasz w encyklopedii Jak dodać mapę odsyłaczy.

W naszym przypadku wykorzystamy obrazek obrazek.jpg. Zobacz Rys. 5. z zaznaczonymi punktami obszarów:

Rys. 5 Obrazek.jpg z zaznaczonymi punktami obszarów.

  1. Otwórz plik index.html i ustaw kursor za dodanym poprzednio znacznikiem.
  2. Wpisz:
<img src="obrazek.jpg" alt="Mapa Odsyłaczy" usemap="#mapa" />
<map name="mapa">
    <area shape="rect" coords="0,0,90,90" 
        href="https://msdn.microsoft.com/pl-pl" alt="MSDN PL" /> 
    <area shape="rect" coords="0,90,90,180" 
        href="https://www.microsoft.com/pl/PL/default.aspx" alt="Microsoft" />
    <area shape="rect" coords="90,0,180,90" 
        href="http://ie.microsoft.com/testdrive/" alt="IE Test Drive" /> 
    <area shape="rect" coords="90,90,180,180" 
        href="https://windows.microsoft.com/pl-PL/" alt="Windows" />
</map>
  1. Zapisz plik index.html i odśwież go w przeglądarce.
  2. Sprawdź, czy mapa odsyłaczy (Rys. 6.) działa poprawnie, klikając w kolejne kwadraty na obrazku i sprawdzając strony, na które jesteś przekierowywany

Rys. 6 Mapa odsyłaczy

Odnośnik graficzny z obrazkiem zależnym od stanu

W poprzednim samouczku Formatowanie odnośników nauczyliśmy się formatowania odnośników w zależności od stanu. Teraz pokażemy, jak wykorzystać to z obrazkami.

  1. Kliknij prawym przyciskiem myszki na obrazek z Rys. 7. Z menu podręcznego wybierz Zapisz obrazek jako i zapisz go w katalogu, w którym umieściłeś plik index.html, nadając mu nazwę LinkN.png.

Rys. 7. Obrazek LinkN.png do umieszczenia na stronie.

  1. Kliknij prawym przyciskiem myszki na obrazek z Rys. 8. Z menu podręcznego wybierz Zapisz obrazek jako i zapisz go w katalogu, w którym umieściłeś plik index.html, nadając mu nazwę LinkO.png.

Rys. 8. Obrazek LinkO.png do umieszczenia na stronie.

  1. Kliknij prawym przyciskiem myszki na obrazek z Rys. 9. Z menu podręcznego wybierz Zapisz obrazek jako i zapisz go w katalogu, w którym umieściłeś plik index.html, nadając mu nazwę LinkA.png.

Rys. 9. Obrazek LinkA.png do umieszczenia na stronie.

  1. Kliknij prawym przyciskiem myszki na obrazek z Rys. 10. Z menu podręcznego wybierz Zapisz obrazek jako i zapisz go w katalogu, w którym umieściłeś plik index.html, nadając mu nazwę LinkW.png.

Rys. 10. Obrazek LinkW.png do umieszczenia na stronie.

  1. Otwórz plik index.html i ustaw kursor za dodanym poprzednio znacznikiem. Wpisz:
<br />
<a id="fun" href="https://www.microsoft.com"></a>
  1. Do znacznika style w nagłówku dodaj:
a#fun {
    text-decoration: none;
    width: 200px;
    height: 100px;
    display: block; }
a#fun:link
    { background-image: url('LinkN.png'); }
  1. Zapisz plik index.html i sprawdź, czy wygląda tak, jak na Rys. 11.

Rys. 11. Plik index.html po dodaniu odnośnika zależnego od stanu.

  1. Odśwież plik index.html w przeglądarce i sprawdź, czy wygląda tak, jak na Rys. 12.

Rys. 12. Widok pliku w przeglądarce po dodaniu odnośnika zależnego od stanu.

  1. Do znacznika style w nagłówku dodaj:
a#fun:hover
{ background-image: url('LinkO.png'); }
  1. Zapisz plik index.html, odśwież go w przeglądarce i sprawdź, czy odnośnik po najechaniu na niego kursorem myszy wygląda tak, jak na Rys. 13.

Rys. 13. Odnośnik po przypisaniu formatowania w stanie hover.

  1. Do znacznika style w nagłówku dodaj:
a#fun:active
    { background-image: url('LinkA.png'); }

W miejscu, które ma przenosić do etykiety wpisz wg schematu:

  1. Zapisz plik index.html, odśwież go w przeglądarce i sprawdź, czy po kliknięciu odnośnika został on sformatowany tak, jak na Rys. 14.

Rys. 14. Odnośnik po przypisaniu formatowania w stanie active.

  1. Do znacznika style w nagłówku dodaj:
a#fun:visited
    { background-image: url('LinkW.png'); }
  1. Zapisz plik index.html i sprawdź, czy wygląda tak, jak na Rys. 15.

Rys. 15. Plik index.html na końcu zadania.

  1. Odśwież plik index.html w przeglądarce. Kliknij na odnośnik prawym klawiszem myszki i otwórz go w nowej karcie. Następnie sprawdź, czy odnośnik został sformatowany jak na Rys.1.

Strona końcowa

Poniżej możesz zobaczyć końcowy kod strony HTML:

<html>
<head>
    <title>Odnośniki graficzne</title>
    <style type="text/css">
        img { border: none; }
        a#fun {
            text-decoration: none;
            width: 200px;
            height: 100px;
            display: block; }
        a#fun:link
            { background-image: url('LinkN.png'); }
        a#fun:hover
            { background-image: url('LinkO.png'); }
        a#fun:active
            { background-image: url('LinkA.png'); }
        a#fun:visited
            { background-image: url('LinkW.png'); }
    </style>
</head>
<body>
    <a href="http://www.msdn.pl">
        <img src="obrazek.jpg" alt="Nie można wyświetlić obrazka" />
    </a>
    <img src="obrazek.jpg" alt="Mapa Odsyłaczy" usemap="#mapa" />
    <map name="mapa">
        <area shape="rect" coords="0,0,90,90" 
            href="https://msdn.microsoft.com/pl-pl" alt="MSDN PL" /> 
        <area shape="rect" coords="0,90,90,180" 
            href="https://www.microsoft.com/pl/PL/default.aspx" alt="Microsoft" />
        <area shape="rect" coords="90,0,180,90" 
            href="http://ie.microsoft.com/testdrive/" alt="IE Test Drive" /> 
        <area shape="rect" coords="90,90,180,180" 
            href="https://windows.microsoft.com/pl-PL/" alt="Windows" />
    </map>
    <br />
    <a id="fun" href="https://www.microsoft.com"></a>
</body>
</html>

Podsumowanie

W tym artykule nauczyliśmy się dodawać odnośnik graficzny, usuwać ramkę wokół niego oraz tworzyć mapę odsyłaczy. Utworzyliśmy także odnośnik graficzny, w którym różne stany odzwierciedlone były różnymi obrazkami.

W kolejnym artykule nauczymy się dodawać tabelę do strony HTML.

Dodatkowo zobacz: