Currently in the process of creating a fundraising webpage for charity, I have chosen to display an animated rabbit making its way Around The World.
My progress so far includes a non-looping gif that plays on click, with a limitation on how often it can be clicked. You can view the webpage here.
This is a preliminary version of what the final result will resemble. However, I am looking to incorporate a click counter into the image, so that every time the rabbit jumps, the count increments by one. Eventually, this count will become universal (but that's a task for another day). See this link for the JSFiddle containing the codes I've implemented thus far (excluding some minor adjustments). How can I integrate a click counter into this script? Feel free to utilize the JSFiddle link and explore the page!
Below is the complete script for the current state of the page:
<html>
<head>
<title>Around The World</title>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<style type="text/css">
body {margin:0; }
</style>
<script>
$(function(){
var image = new Image();
image.in_action = false; // flag to determine current state. Initialize to ready to animate.
image.duration = 750; // This is rough, if you are creating the gif you can peg this to the proper duration
image.src ='transparent.gif';
$('#img').click(function(){
if (!image.in_action) {
image.in_action = true; // Set the image as in progress
$(this).attr('src',image.src);
window.setTimeout(function() {
image.in_action = false; // After image.duration amount of miliseconds, set as finished
}, image.duration);
}
});
});
</script>
<style>
img {
position: relative;
top: 100px;
width:150px;
height:206px;
}
</style>
</head>
<body bgcolor="00FFFF">
<center>
<img id = "img"
src = "still.png">
<center>
</body>
</html>
Appreciate all the help in advance!