Kurs HTML
Cześć siódma
Użycie obrazów czułych na stuknięcie myszą
Jedną z form znacznika <img..> jest obrazek czuły na
stuknięcie myszą. W praktyce obrazki takie najczęściej używane są
jako mapy, gdzie po stuknięciu w odpowiedni punkt czy obszar
uaktywniona zostaje funkcja właściwa dla tego punktu rysunku.
Proste menu można graficzne zrobić za pomocą znanych wcześniej metod:
<a href="p1.htm">
<img src="jedynka.gif" alt="1"> </a>
funkcja pierwsza <p>
<a href="p2.htm">
<img src="dwojka.gif" alt="2"> </a>
funkcja druga <p>
<a href="p3.htm">
<img src="trojka.gif" alt="3"> </a>
funkcja trzecia <p>
Efekt wygląda następująco:
funkcja pierwsza
funkcja druga
funkcja trzecia
W powyższym przykładzie pokazałem praktycznie działanie parametru
alt . Zamiast obrazków ilustrujących kolejne podpunkty menu
użyłem zastępującego je tekstu. Tak widzi grafikę użytkownik z wyłączoną
w przeglądarce funkcją ściągania obrazków.
Do zrobienia mapki należy użyć jeszcze dwóch elementów:
- parametru usemap w znaczniku <img..>.
Parametr ten nadaje nazwę obrazkowi, który to zostanie opisany
gdzieś dalej. Może to wyglądać następująco:
<img src="beczki1.gif" usemap="#mapa" width="400" height="280">
Parametr ten nazywa obszar, który potem będzie w dalszym
ciągu zdefiniowany. Przy znaczniku <img..>
ważne jest to, że musimy znać wielkość obrazka w pikselach
bo do tego będziemy dalej się odnosić definiując czułe punkty
obrazka. Są na to dwa sposoby:
- jak w tym przykładzie - nadając mu rozmiar (400x280)
- kadrując lub powiększając go programem graficznym
- drugi element to znaczniki <map..> i
<area..>. Użycie ich wygląda następująco:
<map name="mapa">
<area shape="rect" coords="1,1,200,140" href="a.htm">
<area shape="rect" coords="200,1,399,140" href="b.htm">
<area shape="rect" coords="1,140,199,280" href="c.htm">
<area shape="rect" coords="200,140,399,280" href="d.htm">
</map>
Powyższy przykład odnosi się do zdefiniowanej wyżej mapy. dzieli cały
jej obszar (400x280) na cztery równe prostokąty (200x140). Parametry
znacznika <area..> mają następujące znaczenie:
- shape jest to kształt obszaru czułego na stuknięcie
myszą. W tym przykładzie jest to prostokąt. Może być także:
circle (okrąg) lub poly (wielokąt).
- parametr coords to współrzędne czułego obszaru
(w pikselach).
W przypadku prostokąta są to współrzędne lewego górnego rogu
i prawego dolnego. Podawana jest najpierw odległość od prawej
krawędzi, potem od górnej. W przypadku okręgu podawane są
współrzędne środka i promień okręgu, w przypadku wielokąta
współrzędne wszystkich kolejnych boków.
- parametr href to wskazanie na miejsce gdzie nastąpi
skok po stuknięciu w obszar
- parametr nohref wskazuje na to, że dany obszar nie
jest czuły
- parametr target wskazuje na ramkę, w której nastąpi
umieszczenie ściągniętego elementu, działa w połączeniu
ze znacznikiem <frame..>
Grzegorz Stoler
stoler@kr.onet.pl
[spis treści]
|