Volite web dizajn?

Zašto ne podijelite svoje znanje s cijelim svijetom? Svatko može pisati za Kroativ i na taj način se promovirati.

Pomoć potrebitima

http://www.hck.hr

Hrvatski Crveni križ

u službi humanosti od 1878.

Postepeno povećanje slika i css img. preloader, kako?

Autor/ica Weberica

Završila fotografiju na ŠPU, a nakon toga grafički i web dizajn. Rođena, živi i radi u epicentru Zagreba. Stalni član Kroativ mreže i autor mnogih korisnih članaka, radi kao stalni suradnik Web Inkubator studija.

Oglas
Kako napraviti ovaj efekt?

Kako napraviti ovaj efekt?

Surfajući netom naišla sam na stranicu nsftools.com i zgodan JS kod za postepeno povećanje/smanjenje slika na prijelaz mišem.

Autor si je dao truda da svaki dio koda precizno objasni tako da ga razumiju i početnici, a Css, JS i HTML nalaze se na istom dokumentu radi lakšeg snalaženja.

Kod sam isprobala, dodala mu malo blagdanskog ugođaja i preloader slika te ga lijepo zapakirala u .zip paketić vama za poklon 🙂

Ovdje možete pogledati demo

Da bi ovaj efekt bio lijepo izveden svakako treba napraviti preload slika. To se može učiniti na razne načine pa čak i CSS-om, vrlo jednostavno.

U HTML, negdje na kraju footera nabrojimo sve slike koje želimo da se učitaju zajedno sa stranicom a pojavljuju se tek na a:hover, OnMouseover:

<img src="foto-resizer/snowbig.png"
alt="snowman-big" title="snowman-big"
height="128" width="128" class="hiddenpic" />

itd…

u CSS stavimo:

.hiddenpic {display:none;}

Ukoliko želimo (a vjerojatno želimo) da nam sličica bude link na neku drugu stranicu, tada ćemo staviti:

<a href=”http://google.com”>
<img width=”250″ height=”200″ onmouseout=”resizeImg(this)” onmouseover=”resizeImg(this, 200)” src=”http://www.kroativ.net/tutor/fr/foto-resizer/dedamraz.jpg” cachetag=”http://www.kroativ.net/tutor/fr/foto-resizer/dedamraz.jpg~715~260″/>
</a>

I to je sve.

Korištene ikone: Icon Drawer
Foto: nažalost, ne sjećam se gdje sam našla ovu sliku, molim autora da nam se javi 🙂

Označeno s: , , ,
Za ovaj članak možete glasati na CroPortalu i tako pomoći u njegovoj promociji. Ako članak još nije objavljen vi možete biti prvi!
Stavovi i mišljenja izrečena u ovome članku i/ili komentarima odnose se samo na autora/icu članka i/ili komentara, a ne i cijele Kroativ mreže. Zabranjeno je neovlašteno prenošenje članaka u cjelosti bez prethodnog dogovora ili bez istaknutog povratnog linka na www.kroativ.net stranicu te imena autora.
Oglas

Još nema komentara, Vi možete biti prvi!

Ostavite komentar

Autori s više od 10 komentara nemaju tag nofollow na svojim linkovima! Zabranjeno je vrijeđanje, omalovažavanje ili na bilo koji drugi način ometanje normalnog toka komentara. Također je zabranjeno oglašavanje u komentarima i sve druge vrste spam-a.

(*) polja su obavezna

XHTML: Možete koristiti: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">