Umetanje slike

Današnji siteovi su nezamislivi bez slika koje prikazuju neke predmete ili sheme i skice koje potkrijepljuju članke i teorije na siteu. U ovom ćete tutorialu naučiti kako umetati slike u HTML-u.

Gdje mora bit slika?
Naravno, da bi se ta slika prikazivala na siteu, ona mora biti uploadana na server. Najbolje je riješenje uploadati slike na server na kojem se nalazi vaš site, no ukoliko ste bilo kako spriječeni, možete slike uploadat na free image hostinge (poput Imageshack) kojih danas ima mnogo. Isto možete kopirati link slike koju ste pronašli na internetu i iskoristiti tu sliku, ali savjetujem vam da prvo pitate autora dali smijete tu sliku koristiti. Kad je slika jednom na internetu, idemo na slijedeći korak.

Kod za umetanje slike
Slike se umeću pomoću taga <img>. Osnovni parametri koji mogu biti u <img> tagu su:

src - skraćenica od rijeći source; parametar kojim definirate putanju slike (npr. src="/slika.jpg" mce_src="/slika.jpg")
border - parametar kojim definirate veličinu okvira slike (npr. border="1px")
bordercolor - parametar kojim definirate boju okvira (npr. bordercolor="red")
width - parametar kojim definirate širinu slike (npr. width="100px")
height - parametar kojim definirate visinu slike (npr. height="40px") 
alt - parametar kojim definirate opis slike (npr. alt="Opis slike") - najčešće se prikazuje prelaskom miša preko slike  

To bi bili osnovni parametri, a o ostalima ćemo nešto više reći kasnije. Sada ćemo napisati primjer koda za umetanje slike pod nazivom "slika.jpg" koja se nalazi u istom folderu kao i stranica na koju umećete sliku. Širina slike će biti 200px, a visina 80px. Okvir će biti debljine 2px crvene boje, a opis slike će biti "Ovdje opišete vašu sliku". Pa generirajmo kod:

<img src="/slika.jpg" mce_src="/slika.jpg" width="200px" height="80px" border="2px" bordercolor="red" alt="Ovdje opišete vašu sliku"> 

Kod je uspješno generiran! 

Linkanje slika
Kod izrade stranica se često koriste i slike sa linkom - slike na koje možete kliknuti i odvedu vas na neki site, ili povećaju sliku ili vas odvedu na neki dio sitea. Takva se metoda koristi i kod izrade navigacije sitea. Sada ćete naučiti kako to napraviti. Prvo morate znati kako napraviti link što možete pročitati ovdje ako već niste. Kad ste naučili kako umetnuti link, idemo na slijedeći korak. Kod za sliku ćemo umetnuti unutar <a></a> (kao i za link, samo što umjesto teksta između <a></a> dolazi kod za sliku). Pa isprobajmo to na kodu koji smo gore generirali. Želimo da se na klik slika otvori u originalnoj veličini u browseru:

<a href="/slika.jpg" mce_href="/slika.jpg"><img src="/slika.jpg" mce_src="/slika.jpg" width="200px" height="80px" border="2px" bordercolor="red" alt="Ovdje opišete vašu sliku"> </a> 

Kod je uspješno generiran! Kao što ste primjetili, za putanju do linka smo postavili putanju do slike, što će, kad netko klikne, otvoriti samu sliku u browseru u njenoj originalnoj veličini. Naravno, vi umjesto toga možete staviti i putanju do nekog sitea (npr. <a href="http://www.iteracija.com" mce_href="http://www.iteracija.com"></a>).

Umetanje slike u Dreamwaweru
Ukoliko ne kodirate ručno nego koristite poznati program za izradu web stranica Macromedia Dreamwawer, umetanje slike će vam biti jednostavnije. 

Kako bi umetnuli sliku u Dreamwaweru, odaberite poziciju gdje će stojati vaša slika i u izborniku Insert odaberite Image. Dobili ste dijaloški okvir u kojem se od vas traži da odaberete putanju do slike. Možete to učiniti pomoću foldera (da ju sami pronađete) ili ručno; upisivanjem putanje u polje URL. Kad ste upisali ili odabrali, kliknite na OK. Slika će vam se pojaviti na siteu, i sada ju možete ručno rastezati i prilagođavati ili otići u pogleda koda i tamo ručno uređivati.

Umetanje rollover slika u Dreamwaweru
Vjerojatno se često na netu susrečete sa web siteovima gdje se buttoni u navigaciji promjene kad pređete mišem preko njih. To je rollover button i radi na principu da dok nema pokazivača miša na njemu prikazuje jednu sliku, a kad pređete mišem preko njega, on pokaže drugu sliku (tzv. over sliku). Naravno, ne mora sve biti preko rollovera, jer tu postoji i mogućnost kod tablica da pomoću komande u CSS "a:hover" namjesite boju pozadine tablice i ostalo. No ako koristite slike, tu je rollover. U ovom tutorialu ćete naučit kako ga napraviti.

Pošto je kod dosta dugačak i kompliciran, ja si često pomažem sa Dreamwawerom i tamo kreiram Rollover button. Sada ćete naučiti kako to vrlo jednostavno napraviti. Prvo morate, naravno kreirati običnu i over sliku. Kad ste ih napravili (nacrtali, kreirali), odaberite poziciju gdje će sllika stojati i u izborniku Insert i u pod izborniku Image Objects odaberite Rollover image. Sada ste dobili dijaloški okvir u kojem se traži od vas da upišete neke parametre, a to su sljedeći:
Image name - ovdje unesite ime vaše cijelokupne rollover slike
Original image - ovdje unesite putanju do originalne slike
Rollover image - ovdje unesite putanju do rollover slike
Preload rollover image - ukoliko ovu funkciju uključite, over slike će vam se učitati prilikom učitavanja samog sitea, tako da u slučaju većih slika nebi došlo do sporog učitavanja pri prelaskom mišem
Alternate text - tzv. alt parametar - tekst koji opisuje vašu sliku (kod prelaska mišem preko slike)
When clicked, Go to URL - tzv. linkana slika; ovdje upišete URL do kojega želite da vas odvede klik na sliku

Kada ste sve popunili, kliknite na OK i vaš button će biti generiran! 

Sada ste naučili kako umetati slike u vaše siteove! Ukoliko imate nejasnoća, pitanja, problema i primjedbi, možete nam se slobodno obratiti na našem Forumu.