Spouštění animovaných obrázků
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>
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