HTML/Obrazy

Wstawianie obrazów

Obrazy wstawiamy przez polecenie:

<img src="nazwaobrazka.rozszerzenie">

Co dziwniejsze, poniższy wiersz także jest dozwolony, lecz nie jest zalecany:

<img src="nazwaobrazka.rozszerzenie"></img>

Kiedy w taki sposób zapiszemy kod, pamiętajmy o tym, by pomiędzy tymi znacznikami nic nie wpisywać.
Przypuśćmy, że mamy obraz o nazwie woda z rozszerzeniem jpg. Wtedy piszemy:

<img src="woda.jpg">

Jeżeli obrazek znajduje się na innym serwerze, należy podać jego pełny adres, tak jak w przypadku odnośników.

Komentarze do obrazu

Umiesz już wstawiać obrazki. Co się stanie, jeżeli jakaś osoba wyłączy wyświetlanie obrazów na stronie WWW(chociaż to bardzo mało prawdopodobne)? Co się stanie, jeżeli obraz nie zostanie wyświetlony? Właśnie wtedy, możemy wykorzystać komentarze. Komentarz jest to tekst, jaki zostanie wyświetlony po najechaniu kursorem na obraz. W takim razie jak go umieścić? Jest to oczywiście bardzo proste. Służy do tego opcja alt.

<img src="woda.jpg" alt="Ten obraz przedstawia wodę!">

Efekt możemy zobaczyć, zatrzymując kursor na obrazie. Jednak nie należy w ten sposób tworzyć etykietek/komentarzy pojawiających się przy najechaniu myszką na obraz. Atrybut alt służy do ustalania tekstu wyświetlanego przy wyłączeniu wyświetlania obrazków. Oto poprawny przykład:

<img src="woda.jpg" alt="Ten obraz przedstawia wodę!" title="komentarz"/>

Powinniśmy zawsze dołączać takie komentarze do swoich obrazków, ponieważ jeśli tego nie zrobimy, to osoby niewidome korzystające z programów odczytu ekranu, nie będą wiedziały co jest na obrazku. Opis taki powinien być niezbyt długi i zawierać najważniejsze informacje.

Rozmiary

Obraz jest zbyt duży? Chcesz go zmniejszyć? Żaden problem. Służą do tego dwie proste instrukcje:
width - określa szerokość obrazu
height - określa wysokość obrazu
!UWAGA! Rozmiary podajemy w pikselach!
Przypuśćmy, że nasz obraz jest zbyt duży. Ma wymiary 700 pikseli szerokości i 500 pikseli wysokości. Chcemy, by miał 400 pikseli szerokości i 100 pikseli wysokości. Zatem:

<img src="woda.jpg" alt="Ten obraz przedstawia wodę!" width="400" height="100">

Pamietaj, że nawet jeśli zmniejszysz w ten sposób obrazek, to z serwera przesłany zostanie w pełnych rozmiarach, i przy dużych plikach wydłuży czas wczytywania strony.

Otwieranie obrazu w pełnych rozmiarach

Aby tego dokonać trzeba umieścić obraz w linku. Przypomnijmy, prototyp linku przedstawia się następująco:

<a href="adres">To jest link!</a>

Po kliknięciu na tekst, strona przenosi nas pod podany adres. A teraz zajmijmy się obrazkiem. Instrukcja powinna wyglądać tak:

<a href="woda.jpg"><img src="woda.jpg" alt="Ten obraz przedstawia wodę!" width="400" height="100"></a>

Po kliknięciu na obraz, zostaje on wyświetlony w nowym oknie. Ale można zauważyć niechciany efekt: niebieskie obramowanie. Aby je zlikwidować, trzeba dodać instrukcję border = 0. Tak więc całość będzie wyglądała tak:

<a href="woda.jpg"><img src="woda.jpg" alt="Ten obraz przedstawia wodę!" width="400" height="100" border="0"></a>

Jako href możemy podać też dowolny adres, by klikając na obrazek przejść do innej strony. Tak więc

<a href="http://pl.wikibooks.org"><img src="woda.jpg" alt="Ten obraz przedstawia wodę!" width="400" height="100" border="0"></a>

jest również poprawny.