Visit the following main content areas of Dynamic Drive:



Strona główna
Nagłówek i treść
Text
Odsyłacze
Tabele
Ramki
Multimedia
CSS i JavaScript
Horizontal i vertical menu
Smooth Navigation. menu
Icon Menu

Kontakt
Czym się zajmujemy
Śledź nas na Facebooku
Gadu-Gadu
Skype

Odsyłacz obrazkowy

Na większości stron WWW można spotkać aktywne obrazki,które symulują przyciski. Po najechaniu na nie kursorem i kliknięciu, zachowują się one jak zwykły odsyłacz (w istocie są one odsyłaczami). Wprowadzenie takich przycisków na stronę jest prostsze niż myślisz - wystarczy pamiętać, że wewnątrz znacznika odsyłacza (pomiędzy <a href="..."> a </a>) można umieszczać nie tylko tekst, ale również inne znaczniki - m.in. odpowiadające za zmianę wyglądu tekstu (pogrubienie, pochylenie itd.), czy też wstawienie obrazka. Ważne jest jedynie, aby nie wstawiać tam elementów wyświetlanych w bloku - jest to niedozwolone!
Żeby stworzyć taki przycisk jak poniżej...

...należy wpisać poniższy skrypt:
<a href="adres"><img src="ścieżka dostępu do obrazka" alt="tekst alternatywny" /></a>

gdzie jako "ścieżka dostępu" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek. Zasady wpisywania adresu są analogiczne jak w przypadku odsyłaczy do: podstrony, etykiety, adresu internetowego, poczty e-mail czy dowolnych innych odsyłaczy (w zależności od wybranego typu odsyłacza).

Rozszerzony odsyłacz obrazkowy

<img src="ścieżka dostępu do obrazka" alt="tekst alternatywny" usemap="#nazwa_mapy" />
<map id="nazwa_mapy" name="nazwa_mapy">
<area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny" />
<area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny" />
(...)
</map>

nazwa_mapy
Dowolny tekst, byleby był on taki sam w pierwszej i w drugiej linii, a dodatkowo w pierwszym wierszu musi być poprzedzony znakiem krzyżyka (#).
Na jednej stronie nie mogą się znajdować dwie mapy o takiej samej nazwie!

Dalsze polecenia typu: <area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny" />, które stworzą następne aktywne pola na obrazku.

kształt
Kształt obszaru w mapie odsyłaczy:
"rect" - pole ograniczone prostokątem
"poly" - pole ograniczone wielokątem nieregularnym
"circle" - koło

współrzędne
  1. "xp,yp, xk,yk" - w przypadku prostokąta (rect):
    • xp - współrzędna pozioma lewego-górnego wierzchołka prostokąta
    • yp - współrzędna pionowa lewego-górnego wierzchołka
    • xk - współrzędna pozioma prawego-dolnego wierzchołka prostokąta
    • yk - współrzędna pionowa prawego-dolnego wierzchołka
  2. "x1,y1, x2,y2, x3,y3..." - w przypadku wielokąta (poly):
    • "xn,yn - współrzędne poziome i pionowe kolejnych wierzchołków wielokąta
  3. "x,y, r" - w przypadku koła (circle):
    • "x,y" - współrzędne środka
    • "r" - długość promienia
We wszystkich przypadkach współrzędne są podawane od lewego górnego wierzchołka obrazka, który stanowi punkt zerowy układu współrzędnych.

Przykład

tekst alternatywny tekst alternatywny tekst alternatywny
Web Design - Mieszko Slaski, Graphics - Magdalena Slaska