Avtor: -primož- 28.12.09

Vodič vam ponudi kodo za preprosto a učinkovito galerijo. CSS Galerija je sestavljena iz manjših slikic (thumbnailov). Ko greste z miško čez slikico se pokaže večja slika v svoji originalni velikosti. Ob kliku na thumb ostane večja slika prikazana.

CSS galerija - PRIKAZ

galerija.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<style type="text/css">
 
div#prva_slika{height: 388px; background: url(c.jpg) 0 79px no-repeat;}
 
a.povezave img{border: none;}
a.povezave span{display: none;}
a.povezave:active span{display:block; position:absolute; top: 87px; z-index: 100;}
a.povezave:hover span{display:block; position:absolute; top: 87px; z-index: 1000;}
a.povezave:focus span{display:block; position:absolute; top: 87px; z-index: 100;}
 
 
</style>
 
</head>
 
<body>
<div id="prva_slika">
<a class="povezave" href="#"><img src="a_thumb.jpg" width="100" height="75" />
   <span><img src="a.jpg" /></span></a>
<a class="povezave" href="#"><img src="b_thumb.jpg" width="100" height="75" />
   <span><img src="b.jpg" /></span></a>
<a class="povezave" href="#"><img src="c_thumb.jpg" width="100" height="75" />
   <span><img src="c.jpg" /></span></a>
<a class="povezave" href="#"><img src="d_thumb.jpg" width="100" height="75" />
   <span><img src="d.jpg" /></span></a>
</div>
</body>
</html>

PRIKAZ CSS galerije

Razlaga CSS galerije:

Najprej si oglejte HTML kodo. Vidite, da sta za vsako povezavo določeni dve sliki. Prva slika je majhna slikica (thumbnail), ki je vedno vidna. Druga slika je vstavljenja v oznako <span> ... tako jo lahko kontroliramo.

Sedaj pride na vrsto CSS. Na začetku (a.povezava span) je prikaz spana nastavljen na none (display: none; ), kar pomeni, da v galeriji ni prikazan in na spletni strani ne zavzema prostora. Preberite si o display:none.

Ko greste z miško čez thumbnail stopi v veljavo a.povezava:hover span. Tukaj je prikaz nastavljen na block (dislplay: block; ), kar pomeni, da je večja slika prikazana. Tukaj moramo sedaj še pozicionirati večjo sliko, da se bo prikazala pod thumbnaili, zato uporabimo position: absolute in s pomočjo top: nastavimo odmik slike od zgornjega roba. Če vam to ni zadosti lahko s pomočjo left: nastavite še odmik od levega roba.

a.povezava:focus span{} To je bistveni del CSS galerije in razlog, zakaj je ta galerija tako posebna. Focus namreč omogoča, da ob kliku na thumbnail večja slika ostane prikazana. Brez tega bi galerija še vedno delovala a slika nebi ostala vidna.

** #prva_slika - div je tukaj zato, da imamo že na začetku prikazano eno sliko. Če tega ne želite le odstranite <div id="prva_slika">. Slika je v ta div vstavljena, kot ozadje, zato jo slike, ki se prikažejo ob prehodu miške čez thumbnaile, prekrijejo.

** z-index: je preprost in zelo učinkovit del kode. Poskrbi namreč za to, da je span z večjim indexom prikazan nad spanom z manjšim indexom (hover > focus).

Komentiraj:

Sorodni vodiči
Vodoraven CSS meni Zaobljeni robovi s CSSjem list-style Preprosta CSS sredinska poravnava z a img hover 6 CSS namigov	CSS trik s scrollanjem in dvema ozadjema CSS !important Kurzorji na spletnih straneh DIV z drsniki Velike črke, male črke in velika začetnica s CSSjem

Moje-Mesto.com

Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.

Facebook oglaševanje

Izdelava spletnih strani

Ustvari.si

Nescafé

!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved."

Moje-Mesto.com

Oglasi

Naključni CSS vodiči