Obrázky jsou na webových stránkách dnes již zcela běžnou záležitostí a je jen málo stránek, ...

které by alespoň malý obrázek neobsahovaly. Proto si i mi dnes řekneme, jak vložit takový obrázek na svou stránku.

Vložit obrázek na internetové stránky je docela snadné. Pro vkládání obrázků je v HTML definován tag nepárový <IMG>. Samotným tagem bychom toho moc neudělali, proto má tento tag ještě několik atributů. Ty jsem vypsal zde:

• SRC - tento atribut určuje cestu nebo URL k obrázku, kde je obrázek uložen a odkud se má nahrát, aby se zobrazil.
• WIDTH - nastavuje šířku vloženého obrázku.
• HEIGHT - nastavuje výšku vloženého obrázku.
• BORDER - nastavuje tloušťku rámečku okolo obrázku.
• NAME - nastavuje obrázku jméno. Na toto jméno se pak můžeme odkazovat např v JavaScriptu.
• ALT - nastavuje text, který se zobrazí, pokud se nezobrazí obrázek.
• ALIGN - nastavuje zarovnání. RIGHT (vpravo), LEFT (vlevo), CENTER (na střed).
• HSPACE - nastavuje odsazení od levého okraje v pixelech.
• VSPACE - nastavuje odsazení od horního okraje v pixelech.
• TITLE - nastavuje text, který se zobrazí v "bublině" u kurzoru myši, pokud na tento obrázek najede.

A jelikož nejlepší názornost je vidět na příkladu, jeden zde uvedu:

<IMG src="climg/1649-1.gif" BORDER="0" ALT="Asi není k dispozici" TITLE="Obyčejný obrázek" WIDTH="100" HEIGHT="60">.

Pokud však obrázek není k dispozici, oběví se to, objeví se text, který je v atributu ALT.

Změna obrázku po najetí myši

Zdrojový kód by vypadal takto:

<A href="http://www.pcsvet.cz" onMouseOver="document.obrazek.src='obrazek.gif'" onMouseOut="document.obrazek.src='obr.gif'"><IMG src="obr.gif" NAME="obrazek" BORDER="0" ALT="Asi není k dispozici" TITLE="Obyčejný obrázek" WIDTH="100" HEIGHT="60"></A>

A ještě jedna věc. Pomocí CSS filtrů můžeme snadno obrázek třeba zprůhlednit, nebo převrátit vzhůru nohama, ale o tom jindy.