ZONER Cookies

Vážený návštěvníku, potvrzením pomocí tlačítka OK udělujete souhlas nám a našim partnerům s použitím cookies pro nezbytné, analytické a marketingové účely na tomto zařízení. Volbou Nastavení můžete sami určit, jaké skupiny cookies je možné zpracovávat, popřípadě jejich zpracování úplně zakázat. Ukládání nezbytných cookies probíhá vždy, a to v zájmu zachování funkčnosti webové prezentace.

V tomto okně můžete zvolit kategorie cookies v souladu s vlastními preferencemi.

Nezbytné

Tyto cookies zajišťují bezchybný provoz našich webových stránek. Umožňují například vložení služby do objednávky, ukládání dat s ohledem na bezpečnost webu, přihlašování k webu a podobně. Nezbytné cookies nelze deaktivovat, jelikož by došlo k narušení správného fungování webu.

Preferenční

Preferenční cookies umožňují, aby si webová stránka zapamatovala informace, které mění, jak se webová stránka chová nebo jak vypadá. Je to například preferovaný jazyk nebo region, kde se nacházíte.

Analytické

Díky nástrojům jakými jsou například Google analytics můžeme sledovat, jak stránky používáte, z jakých zdrojů a technologií. Na základě těchto dat můžeme web neustále vylepšovat, aby byl pro vás co nejpřívětivější. Veškerá data jsou anonymizována, konkrétní uživatele tedy identifikovat nemůžeme.

Marketingové

Společně s nástroji třetích stran můžeme zobrazovat vámi preferované reklamy v partnerských sítích přesně dle vašich zájmů. V případě nesouhlasu je vysoce pravděpodobné, že vaše zájmy a preference nebudou zohledněny a bude se vám reklama zobrazovat plošně. Veškeré profily vašich zájmů jsou pseudonymizované, díky tomu není možná bezprostřední identifikace vaší osoby.

Zoom obrázku

7. prosince 2006
•
Redakce Interval.cz

Obsah

  1. CSS
  2. CSS pro IE
  3. XHTML

Související

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>

Předchozí článek AJAX a PHP - tvoříme interaktivní webové aplikace profesionálně
Další článek adaptic.cz
Štítky: Články, Pro CSS: triky a finty
Redakce Interval.cz

Mohlo by vás také zajímat

Nejnovější

3 komentářů

  1. Yvetta

    Čvn 29, 2011 v 14:03

    Dobrý 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

    Odpovědět

  2. Anonym

    Čvn 30, 2011 v 9:42

    Yvetta: a ciste priklad jako takovy, viz ukazka, vam funguje? Me ano.

    Odpovědět

  3. Yvetta

    Čvc 1, 2011 v 8:30

    Ano, 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.

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *