Prohlížeč panoramatických obrázků

30. června 2006

•

Jedním ze způsobů využití tohoto řešení je právě prohlížení panoramat. Po drobné úpravě kódu (nahrazení id za class) můžeme prohlížeč použít jako modul a vytvořit například galerii, ve které budou vždy viditelné zhuštěné obrázky a bez kliknutí bude možno prohlédnout jejich detaily.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku A PANORAMIC IMAGE SCROLLER.

CSS

ul, li
{
padding: 0;
}
ul#prohlizec
{
position: relative;
list-style: none;
width: 300px;
_width: 302px; /* IE */
height: 240px;
_height: 242px; /* IE */
border: solid #333 1px;
background: url(103-2.jpg);
}
ul#prohlizec li
{
float: left;
width: 20px;
height: 240px;
background: transparent;
}
ul#prohlizec li a
{
display: block;
width: 20px;
height: 40px;
background: #700;
margin-top: 200px;
cursor: default;
}
ul#prohlizec li a em
{
display: block;
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 200px;
}
ul#prohlizec li a:hover
{
background: #a00;
}
ul#prohlizec li a:hover em
{
background: url(103-1.jpg);
}
ul#prohlizec a:hover em#s01
{
background-position: 0px top;
}
ul#prohlizec a:hover em#s02
{
background-position: -40px top;
}
ul#prohlizec a:hover em#s03
{
background-position: -80px top;
}
ul#prohlizec a:hover em#s04
{
background-position: -120px top;
}
ul#prohlizec a:hover em#s05
{
background-position: -160px top;
}
ul#prohlizec a:hover em#s06
{
background-position: -200px top;
}
ul#prohlizec a:hover em#s07
{
background-position: -240px top;
}
ul#prohlizec a:hover em#s08
{
background-position: -280px top;
}
ul#prohlizec a:hover em#s09
{
background-position: -320px top;
}
ul#prohlizec a:hover em#s10
{
background-position: -360px top;
}
ul#prohlizec a:hover em#s11
{
background-position: -400px top;
}
ul#prohlizec a:hover em#s12
{
background-position: -440px top;
}
ul#prohlizec a:hover em#s13
{
background-position: -480px top;
}
ul#prohlizec a:hover em#s14
{
background-position: -520px top;
}
ul#prohlizec a:hover em#s15
{
background-position: -560px top;
}