1. Összegyüjtöd a képeket, és valamilyen képszerkesztõ/konvertáló programmal (javaslom például az Irfanview-t, az XnView-t, vagy a Gimp-pet) megcsinálod a kis méretû indexképeket. Érdemes az indexképek elnevezését az eredeti képekhez viszonyítani - például kep1.jpg -> kep1_small.jpg, kep2.jpg -> kep2_small.jpg,...
2. Létrehozod a HTML struktúrát (nem kell hozzá táblázat):
Mint látható a hiperlink href attribútuma tartalmazza az eredeti képet, az <img> tag src attribútuma meg az indexképet.
3. Hogy a képek 8 oszlopban férjenek el, azt a gallery azonosítójú blokk szélességének beállításával érheted el.
Például ha a képek 75 pixel szélesek, és jobbról balról kapnak 5-5 pixel margót (kitöltést és szegélyt nem), akkor a blokk szélessége (8 * 75 pixel) + (16 * 5 pixel) = 680 pixel. Ezt CSS-sel a következõképp állíthatod be:
#gallery {
width: 680px;
}
#gallery img {
margin: 5px;
}
4. Azt, hogy az indexképekre való rámozduláskor a linkben kép nagyítva jelenjen meg Javascripttel oldható meg. Ehhez javaslom a JQuery függvénykönyvtár használatát, illetve találhatóak hozzá kiegészítõk, amivel létrehozható ilyen effekt.
A HTML kódba némi módosítást kell tenni - ez az adott kiegészítõ leírásában benne van, hogyan kell megtenni.
Informatika és tudomány
