Animace části velkého obrázku

Animované GIFy mohou být velkou předností webové stránky. Zároveň jsou však náročné na velikost souboru, obzvlášť jsou-li vytvářeny z velkých obrázků. Obrázek proto rozdělíme na několik částí a animujeme jen jednu, menší část obrázku. Touto technikou dosáhnete toho, že:
Soubory budou malé. Animace pouze části velkého obrázku pomáhá redukovat dobu natažení, přestože vizuální stránka zůstává výrazná.
Větší obrázky ožijí. Můžete vzít třeba portrét a nechat ho koulet očima, anebo nakreslit psa, jak vrtí ocasem.
Přitáhnete oko diváka. Náznak pohybu v jinak nehybném obrázku určitě upoutá divákovu pozornost.
Vytvoření animace velkého obrázku:

1. V grafickém editoru vytvořte obrázek a rozdělte ho na animované a statické části.

2. Části obrázku sestavte vedle sebe
pomocí tabulky s atributy BORDER=0 CELLPADDING=0 CELLSPACING=0 a s atributy ALIGN=left|center|right VALIGN=top|middle|bottom podle polohy v tabulce.
Vídeňská Kärntner Strasse Vídeňská Kärntner Strasse Vídeňská Kärntner Strasse
Vídeňská Kärntner Strasse
Vídeňská Kärntner Strasse
Vídeňská Kärntner Strasse
Vídeňská Kärntner Strasse
Vídeňská Kärntner Strasse
Vídeňská Kärntner Strasse
Vídeňská Kärntner Strasse
Vídeňská Kärntner Strasse

Příklad:
< TABLE align=center width=400 height=600 border=0 
cellpadding=0 cellspacing=0>< TR>< TD rowspan=9 align=left>
< IMG src="animace/leva.gif" width=109 height=600>< /TD>
< td valign=bottom align=center>
< IMG src="animace/horni.gif" width=114 height=102>< /td>
< td rowspan=9 align=right>
< IMG src="animace/pravap.gif" width=177 height=600>< /td>
< /TR>< TR>< td valign=middle align=center>¨
< IMG src="animace/d7.gif" width=114 height=38>< /td>< /TR>
< TR>< td valign=middle align=center>
< IMG src="animace/d6.gif" width=114 height=38>< /td>< /TR>
< TR>< td valign=middle align=center>
< IMG  src="animace/d5.gif" width=114 height=35>< /td>< /TR>
< TR>< td valign=middle align=center>
< IMG  src="animace/d4.gif" width=114 height=169>< /td>< /TR>
< TR>< td valign=middle align=center>
< IMG src="animace/d3.gif" width=114 height=36>< /td>< /TR>
< TR>< td valign=middle align=center>
< IMG src="animace/d2.gif" width=114 height=21>< /td>< /TR>
< TR>< td valign=middle align=center>
< IMG src="animace/d1.gif" width=114 height=13>< /td>< /TR>
< TR>< td valign=top align=center>
< IMG src="animace/dolni.gif" width=114 height=148>< /td>
< /TR>< /TABLE>
Takhle to vypadá Začátek
Další
Předchozí