| 1 | <html> |
|---|
| 2 | <head> |
|---|
| 3 | |
|---|
| 4 | <title>AnimatedPng Demo</title> |
|---|
| 5 | |
|---|
| 6 | <script type="text/javascript"> |
|---|
| 7 | |
|---|
| 8 | var djConfig = { |
|---|
| 9 | |
|---|
| 10 | isDebug: true |
|---|
| 11 | }; |
|---|
| 12 | |
|---|
| 13 | </script> |
|---|
| 14 | <script type="text/javascript" src="../../dojo.js"></script> |
|---|
| 15 | <script language="JavaScript" type="text/javascript"> |
|---|
| 16 | |
|---|
| 17 | dojo.require("dojo.widget.AnimatedPng"); |
|---|
| 18 | |
|---|
| 19 | |
|---|
| 20 | dojo.addOnLoad(function(){ |
|---|
| 21 | var params = {src: "images/animatedpng_static.gif", aniSrc: "images/animatedpng_frames.gif", width: 20, height: 20, interval: 50}; |
|---|
| 22 | var widget = dojo.widget.createWidget("AnimatedPng", params, document.getElementById("pngContainer")); |
|---|
| 23 | }); |
|---|
| 24 | </script> |
|---|
| 25 | <style> |
|---|
| 26 | |
|---|
| 27 | </style> |
|---|
| 28 | </head> |
|---|
| 29 | <body> |
|---|
| 30 | <h3>Instantiation from Markup:</h3> |
|---|
| 31 | |
|---|
| 32 | <p>PNGs have great tranparency, but lack animation. This widget lets you point an img tag at an animated gif for graceful degrading, while letting you specify a png containing a grid of cells to animate between.</p> |
|---|
| 33 | |
|---|
| 34 | <img dojoType="AnimatedPng" |
|---|
| 35 | src="images/animatedpng_static.gif" |
|---|
| 36 | aniSrc="images/animatedpng_frames.gif" |
|---|
| 37 | width="20" |
|---|
| 38 | height="20" |
|---|
| 39 | interval="50" |
|---|
| 40 | /> |
|---|
| 41 | |
|---|
| 42 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam facilisis enim. Pellentesque in elit et lacus euismod dignissim. Aliquam dolor pede, convallis eget, dictum a, blandit ac, urna. Pellentesque sed nunc ut justo volutpat egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In erat. Suspendisse potenti. Fusce faucibus nibh sed nisi. Phasellus faucibus, dui a cursus dapibus, mauris nulla euismod velit, a lobortis turpis arcu vel dui. Pellentesque fermentum ultrices pede. Donec auctor lectus eu arcu. Curabitur non orci eget est porta gravida. Aliquam pretium orci id nisi. Duis faucibus, mi non adipiscing venenatis, erat urna aliquet elit, eu fringilla lacus tellus quis erat. Nam tempus ornare lorem. Nullam feugiat.</p> |
|---|
| 43 | |
|---|
| 44 | <h3>Instantiation from Script:</h3> |
|---|
| 45 | <div id="pngContainer"></div> |
|---|
| 46 | </body> |
|---|
| 47 | </html> |
|---|
