Grafika#
Odsyłacz obrazkowy#
<a href="adres"><img src="ścieżka dostępu do obrazka" alt="tekst alternatywny"></a>
Powyższa konstrukcja pozwala utworzyć "aktywne" obrazki, będące odpowiednikiem przycisków. Po kliknięciu, zachowują się one jak zwykłe odsyłacze. De facto są to odsyłacze. Przypominam, że wewnątrz znaczników <a></a> można umieszczać nie tylko tekst, ale również inne znaczniki. Ważne jest jedynie, aby nie wstawiać tam elementów blokowych, gdyż jest to niedozwolone!
Prosty przykład:
<a href="../../pliki/html/grafika/odsylaczobrazkowy/blazenek.jpg"><img src="../../pliki/html/grafika/odsylaczobrazkowy/blazenek_min.jpg" alt="Błazenek" width="150" height="150" /></a>Efekt (kliknij na miniaturce):
Niektóre przeglądarki (np. Firefox) domyślnie otaczają dodatkowym obramowaniem elementy img umieszczone w a. W celu pozbyć się zbędnego ozdobnika najlepiej skorzystać z arkuszy stylów. Atrybut BORDER dla img jest zdeprecjonowany.
Klikalne zdjęcia mogą prowadzić do różnych zasobów (np. stron WWW lub kolejnych obrazków). Bardzo często wykorzystuję się tę technikę do budowy galerii graficznej. Na głównej stronie umieszczamy miniaturki pierwotnych zdjęć, po kliknięciu których otrzymujemy wersje pełnowymiarowe. Takie rozwiązanie znacznie odciąża łącze internetowe (obrazki w zminimalizowanej postaci zajmują mniej miejsca). Czytelnik sam decyduje, kiedy chce otworzyć (ewentualnie pobrać) grafikę w pełnych wymiarach. Oto prosty przykład (z wyłączonym domyślnym obramowaniem):
<a href="../../pliki/html/grafika/odsylaczobrazkowy/gupik1.jpg"><img src="../../pliki/html/grafika/odsylaczobrazkowy/gupik1_min.jpg" style="border: 0;" alt="Gupik1" width="150" height="150" /></a>
<a href="../../pliki/html/grafika/odsylaczobrazkowy/gupik2.jpg"><img src="../../pliki/html/grafika/odsylaczobrazkowy/gupik2_min.jpg" style="border: 0;" alt="Gupik2" width="150" height="150" /></a>
<a href="../../pliki/html/grafika/odsylaczobrazkowy/gupik3.jpg"><img src="../../pliki/html/grafika/odsylaczobrazkowy/gupik3_min.jpg" style="border: 0;" alt="Gupik3" width="150" height="150" /></a>
<a href="../../pliki/html/grafika/odsylaczobrazkowy/gupik4.jpg"><img src="../../pliki/html/grafika/odsylaczobrazkowy/gupik4_min.jpg" style="border: 0;" alt="Gupik4" width="150" height="150" /></a>Efekt:
To najprostsza wersja galerii jaką można zbudować samemu. Profesjonalne rozwiązania łączą ze sobą style CSS oraz JavaScript, dzięki czemu całość nabiera interaktywności. Można np. klikać zdjęcia i otrzymywać wersje pełnowymiarowe w aktualnej karcie (przysłaniające bieżącą stronę), uruchomić pokaz zdjęć itd. Wszystko zależy od naszej wyobraźni i umiejętności. W zasobach Internetu istnieje wiele gotowych projektów.