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;
}

XHTML

<html>
<body>
<ul id=“prohlizec“>
<li><a href=“#“><em id=“s01″></em></a></li>
<li><a href=“#“><em id=“s02″></em></a></li>
<li><a href=“#“><em id=“s03″></em></a></li>
<li><a href=“#“><em id=“s04″></em></a></li>
<li><a href=“#“><em id=“s05″></em></a></li>
<li><a href=“#“><em id=“s06″></em></a></li>
<li><a href=“#“><em id=“s07″></em></a></li>
<li><a href=“#“><em id=“s08″></em></a></li>
<li><a href=“#“><em id=“s09″></em></a></li>
<li><a href=“#“><em id=“s10″></em></a></li>
<li><a href=“#“><em id=“s11″></em></a></li>
<li><a href=“#“><em id=“s12″></em></a></li>
<li><a href=“#“><em id=“s13″></em></a></li>
<li><a href=“#“><em id=“s14″></em></a></li>
<li><a href=“#“><em id=“s15″></em></a></li>
</ul>
</body>
</html>

1 Příspěvěk v diskuzi

Odpovědět