Zoom obrázku
Toto řešení ukazuje, jak vytvořit pomocí CSS efekt zvětšení (zoom) obrázku. Příklad využívá pouze jediný obrázek, ten však může být zvětšen až v jedenácti krocích!
Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku SLIDING SCALE IMAGE MAGNIFIER.
CSS
#zvetsovadlo
{
display:inline;
position:relative;
width:240px;
height:205px;
background: url(„gradient.png“) top left no-repeat;
margin:0 20px 10px 5px;
z-index:100;
float:left;
}
#zvetsovadlo img
{
position:absolute;
width:240px;
height:180px;
top:25px;
left:-240px;
}
#zvetsovadlo ul
{
padding:0;
border:0;
margin:0;
list-style-type:none;
}
#zvetsovadlo a
{
display:block;
width:24px;
height:20px;
}
#zvetsovadlo li
{
display:block;
width:24px;
height:20px;
position:absolute;
left:24px;
top:0;
background:transparent;
}
#zvetsovadlo li.jedna
{
left:0;
}
#zvetsovadlo li:hover
{
width:24px;
height:20px;
}
#zvetsovadlo li.jedna:hover img
{
width:280px;
height:210px;
}
#zvetsovadlo li.dva:hover img
{
width:320px;
height:240px;
}
#zvetsovadlo li.tri:hover img
{
width:360px;
height:270px;
}
#zvetsovadlo li.ctyri:hover img
{
width:400px;
height:300px;
}
#zvetsovadlo li.pet:hover img
{
width:440px;
height:330px;
}
#zvetsovadlo li.sest:hover img
{
width:480px;
height:360px;
}
#zvetsovadlo li.sedm:hover img
{
width:520px;
height:390px;
}
#zvetsovadlo li.osm:hover img
{
width:560px;
height:420px;
}
#zvetsovadlo li.devet:hover img
{
width:600px;
height:450px;
}
#zvetsovadlo li.deset:hover img
{
width:640px;
height:480px;
}
#zvetsovadlo li.jedenact:hover img
{
width:240px;
height:180px;
}
#zvetsovadlo table
{
border:0;
padding:0;
margin:0;
border-collapse:collapse;
}
CSS pro IE
<!–[if IE]><style type=“text/css“>
#zvetsovadlo a:hover
{
border:0;
}
#zvetsovadlo a.ajedna:hover img
{
width:280px;
height:210px;
}
#zvetsovadlo a.adva:hover img
{
width:320px;
height:240px;
}
#zvetsovadlo a.atri:hover img
{
width:360px;
height:270px;
}
#zvetsovadlo a.actyri:hover img
{
width:400px;
height:300px;
}
#zvetsovadlo a.apet:hover img
{
width:440px;
height:330px;
}
#zvetsovadlo a.asest:hover img
{
width:480px;
height:360px;
}
#zvetsovadlo a.asedm:hover img
{
width:520px;
height:390px;
}
#zvetsovadlo a.aosm:hover img
{
width:560px;
height:420px;
}
#zvetsovadlo a.adevet:hover img
{
width:600px;
height:450px;
}
#zvetsovadlo a.adeset:hover img
{
width:640px;
height:480px;
}
#zvetsovadlo a.ajedenact:hover img
{
width:240px;
height:180px;
}
</style><![endif]–>
XHTML
<html>
<body>
<div id=“zvetsovadlo“>
<ul>
<li class=“jedna“><a class=“ajedna“ href=“#nogo“><!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td>
<ul>
<li class=“dva“><a class=“adva“ href=“#nogo“><!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td>
<ul>
<li class=“tri“><a class=“atri“ href=“#nogo“><!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td>
<ul>
<li class=“ctyri“><a class=“actyri“ href=“#nogo“><!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td>
<ul>
<li class=“pet“><a class=“apet“ href=“#nogo“><!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td>
<ul>
<li class=“sest“><a class=“asest“ href=“#nogo“><!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td>
<ul>
<li class=“sedm“><a class=“asedm“ href=“#nogo“><!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td>
<ul>
<li class=“osm“><a class=“aosm“ href=“#nogo“><!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td>
<ul>
<li class=“devet“><a class=“adevet“ href=“#nogo“><!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td>
<ul>
<li class=“deset“><a class=“adeset“ href=“#nogo“><!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td>
<ul>
<li class=“jedenact“><a class=“ajedenact“ href=“#nogo“><!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td>
<img src=“horizont.jpg“ alt=“rain“ title=“rain“ />
</td></tr></table><!–[if lte IE 6]></a><![endif]–></li>
</ul>
</td></tr></table><!–[if lte IE 6]></a><![endif]–></li>
</ul>
</td></tr></table><!–[if lte IE 6]></a><![endif]–></li>
</ul>
</td></tr></table><!–[if lte IE 6]></a><![endif]–></li>
</ul>
</td></tr></table><!–[if lte IE 6]></a><![endif]–></li>
</ul>
</td></tr></table><!–[if lte IE 6]></a><![endif]–></li>
</ul>
</td></tr></table><!–[if lte IE 6]></a><![endif]–></li>
</ul>
</td></tr></table><!–[if lte IE 6]></a><![endif]–></li>
</ul>
</td></tr></table><!–[if lte IE 6]></a><![endif]–></li>
</ul>
</td></tr></table><!–[if lte IE 6]></a><![endif]–></li>
</ul>
</td></tr></table><!–[if lte IE 6]></a><![endif]–></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit…</p>
</body>
</html>
Mohlo by vás také zajímat
-
Elektronický podpis – má dnes ještě uplatnění?
16. července 2025 -
Nepodceňte UX na vašem webu: Proč na něm záleží?
10. dubna 2024 -
INNOCN monitory: špičková kvalita za zlomek ceny
5. června 2025 -
Nejnovější
-
Jaké jsou nejlepší nástroje pro tvorbu webového designu
3. října 2025 -
Rozhovor s vývojářem: „AI mi šetří hodiny práce měsíčně“
30. září 2025 -
.ai: Umělá inteligence a tak trošku ukradená doména
17. září 2025 -
Proč jsou důležité správné údaje o vlastnících domén
11. září 2025
Yvetta
Čvn 29, 2011 v 14:03Dobrý den, zaujalo mě toto řešení zoomu obrázku a pokouším se to zabudovat do své stránky. Zatím to nefunguje, nevím, jestli tam nemůže být problém v identifikátoru #nogo, které není v CSS definováno a přitom se v html vyskytuje. Nebo co s tím? Předem díky za laskavou odpověď. YH
Anonym
Čvn 30, 2011 v 9:42Yvetta: a ciste priklad jako takovy, viz ukazka, vam funguje? Me ano.
Yvetta
Čvc 1, 2011 v 8:30Ano, pokud vložím kód do čisté stránky se správným odkazem na svůj obrázek, tak to funguje, ale není vidět to „zvětšovadlo“ nad obrázkem, aby lidem došlo, že musí myší pohybovat doprava. Já tam mám prázdný prostor – čili soudím, že to musí být někde nadefinováno (je to to #nogo) – to nevím, jak.