Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 

34 Zeilen
1.2 KiB

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <a href="http://github.com/devongovett/png.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>
  5. <select>
  6. <optgroup label="Static PNGs">
  7. <option>djay.png</option>
  8. <option>djay-indexed.png</option>
  9. <option>laptop.png</option>
  10. <option>trees.png</option>
  11. </optgroup>
  12. <optgroup label="Animated PNGs">
  13. <option>chompy.png</option>
  14. <option>spinfox.png</option>
  15. <option>ball.png</option>
  16. <option>loading.png</option>
  17. </optgroup>
  18. </select><br><br>
  19. <canvas></canvas>
  20. <script src="zlib.js"></script>
  21. <script src="png.js"></script>
  22. <script>
  23. var canvas = document.getElementsByTagName('canvas')[0];
  24. PNG.load('images/djay.png', canvas);
  25. var select = document.getElementsByTagName('select')[0];
  26. select.onchange = function() {
  27. canvas.width = canvas.height = 0;
  28. PNG.load('images/' + select.options[select.selectedIndex].value, canvas);
  29. }
  30. </script>
  31. </body>
  32. </html>