3

I have a code below which loads gif animation from an array character, and loads it to class board inside the image src.

I want to play the gif animationonly when i click on that gif displayed.

it is now playing the gif as soon as it loads the gif

How to change my code to display the gif from array as it is doing now but play the gif only when i click on it?

number = 0;
var animations = ['https://image.ibb.co/epha5A/giphy.gif',
  'https://image.ibb.co/epha5A/giphy.gif',
  'https://image.ibb.co/epha5A/giphy.gif'
];

function character() {

  image = document.getElementById('hiddenimageid');
  image.src = animations[number];

  console.log(number);
  number++;


}
.board {
  position: absolute;
  top: 4.3vh;
  left: 10vw;
  cursor: pointer;
}

.board img {
  width: 35.3vw;
  height: 45.5vh;
  border-radius: 15%;
}
<body onload="character();">

  <div class="board">
    <img src="" id="hiddenimageid" />
  </div>
</body>
Jupiter
  • 395
  • 3
  • 15

2 Answers2

4

Here you go :

number = 0;
var animations = ['https://image.ibb.co/epha5A/giphy.gif',
  'https://image.ibb.co/epha5A/giphy.gif',
  'https://image.ibb.co/epha5A/giphy.gif'
];


 var refreshIntervalId = setInterval(function() {
  image = document.getElementById('hiddenimageid');
  image.src = animations[number];
},1)


function character() {
clearInterval(refreshIntervalId);
  image = document.getElementById('hiddenimageid');
  image.src = animations[number];

  console.log(number);
  number++;


}
.board {
  position: absolute;
  top: 4.3vh;
  left: 10vw;
  cursor: pointer;
}

.board img {
  width: 35.3vw;
  height: 45.5vh;
  border-radius: 15%;
}
<body onclick="character();">

  <div class="board">
    <img src="" id="hiddenimageid" />
  </div>
</body>

Using this solution you won't have to convert the image to a png or jpeg. You can simply use your code as it is. I hope this helps you

node_man
  • 1,359
  • 4
  • 23
  • 50
3

I convert yout gif to png using this site:https://image.online-convert.com/convert-to-png

Then set onclick to img that change the src to your gif

Now you can do it to other gif

number = 0;
var animations = ['https://image.ibb.co/epha5A/giphy.gif',
  'https://image.ibb.co/epha5A/giphy.gif',
  'https://image.ibb.co/epha5A/giphy.gif'
];


function character() {

  image = document.getElementById('hiddenimageid');
  image.src = animations[number];

}
.board {
  position: absolute;
  top: 4.3vh;
  left: 10vw;
  cursor: pointer;
}

.board img {
  width: 35.3vw;
  height: 45.5vh;
  border-radius: 15%;
}
<body>
  <div class="board">
    <img src=" https://i.stack.imgur.com/pqbOp.png" id="hiddenimageid" onclick="character();"/>
  </div>
</body>
לבני מלכה
  • 15,925
  • 2
  • 23
  • 47