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.

Spouštění animovaných obrázků

8. července 2006
•
Redakce Interval.cz

Obsah

  1. CSS
  2. XHTML

Související

Toto řešení ukazuje dva způsoby, jak pomocí CSS umožnit spouštění nebo zastavování animovaného obrázku. Řešení využívá dva samostatné obrázky. První animovaný a druhý, který je vidět před spuštěním animace (tedy nejčastěji shodný s prvním v animaci).

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

Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku Start/stop animated gifs.

CSS

.obal
{
border: 1px solid #bbb;
padding: 15px 8px 0 8px;
background-color: #e4e4e4;
margin: 40px;
padding: 25px;
text-align: center;
}
.obal a
{
margin:0 auto;
}
.obal h2
{
font-size: 130%;
text-align: center;
background: #f7f7f7;
padding: .5em .5em;
margin: 1em 0 1em;
}
a.klik
{
display: block;
width: 555px;
height: 370px;
background: #fff url(„aurora_start.gif“) no-repeat;
overflow: hidden;
cursor: default;
}
a.klik img
{
visibility: hidden;
}
a.klik:active
{
background: #000;
}
a.klik:active img, a.klik:focus img
{
visibility: visible; border:0;
}
a.hver
{
display: block;
width: 555px;
height: 370px;
background: #fff url(„aurora_start.gif“) no-repeat;
overflow: hidden;
cursor: default;
}
a.hver img
{
visibility: hidden;
}
a.hver:hover
{
background: 0;
}
a.hver:hover img
{
visibility:
visible; border: 0;
}

XHTML

<html>
<body>
<div class=“obal“>
<h2>1. možnost</h2>
<a class=“klik“ href=“#“ title=“Aurora animation“><img src=“aurora.gif“ alt=“Aurora animation“ title=“Aurora animation“ />Aurora animation</a>
<h2>2. možnost</h2>
<a class=“hver“ href=“#“ title=“Aurora animation“><img src=“aurora.gif“ alt=“Aurora animation“ title=“Aurora animation“ />Aurora animation</a>
</div>
</body>
</html>

Předchozí článek linky
Další článek cestynasever.cz
Štítky: Články, Pro CSS: triky a finty
Redakce Interval.cz

Mohlo by vás také zajímat

Nejnovější

1 komentář

  1. Jarda

    Lis 29, 2013 v 14:55

    Řeším podobný problém, ale potřebuji, aby se při najetí myší (over) ten spodní nebo zatím neviditelný gif spustil od začátku. V tomto příkladě a v jiných podobných jede ten gif v nekonečné smyčce nezávisle na tom jestli je vidět nebo ne. Jak udělat, aby gif začal od začátku animace. Možná to umí javascript.
    Poraďte – díky

    Odpovědět

Napsat komentář

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