Make HTML page with Gif Start &
Stop
Use this feature to generate an HTML page to add the animation to your
website or chm help
project.
HTML page with Gif Start & Stop:
- creates a .png file from the first image of your gif
animation with a Start icon inserted on top,
- adds a Stop icon to the last image of your gif animation,
- generates a HTML page with required jQuery javascript code to
start and stop the gif animation
To start HTML page with Gif Start & Stop,
- on the toolbar, click Export
- click menu item
'HTML page with Gif
Start & Stop'.
A browser opens with the generated HTML page on it.
The used filenames are by default
- [gifname].png - the start image
- [gifname].htm - the generated HTML page
To see the generated page animation working, click on the image with the
Start icon. To stop the animation, click on the animation a second time.
Subsequent clicks Start and Stop the animation.
| Example generated code |
|
<html>
<head>
<meta content="text/html; charset=windows-1252"
http-equiv="Content-Type">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.min.js"
type="text/javascript"></script>
<style type="text/css"> .img-swap {cursor: pointer;}
</style>
<script type="text/javascript">
$(document).ready(function()//preload images
{ $(".img-swap").each(function () {$.ajax({url: this.src})})})
jQuery(function(){
$(".img-swap").live('click', function() {
if ($(this).attr("class") == "img-swap") { this.src =
this.src.replace(".png",".gif"); }
else {this.src = this.src.replace(".gif",".png"); }
$(this).toggleClass("on");});});
</script>
</head>
<body>
<p>
<img alt="video gif animation" class="img-swap" src="addimage.png">
</p>
</body>
</html>
|