Guide to playing a gif solely through an onclick event using JavaScript

Below you will find a code that is used to load a gif animation from an array of characters, and then display it within a board class using the image src.

I am looking to make the gif animation play
only when the displayed gif is clicked.

Currently, the gif is automatically playing as soon as it is loaded.

Is there a way to modify the code so that the gif is displayed from the array as it currently does, but only play when it is clicked?

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>

javascripthtmlcss

Answer №1

Here is the code you requested:

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>

By following this solution, you can avoid the need to convert the image to a png or jpeg format. Your current code should work as intended. I hope this information is helpful to you.

Answer №2

To convert your gif to png, I recommend using the following website:

After converting, you can set the onclick event on an image to change the src to your converted gif

This method can be applied to other gif files as well

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.sstatic.net/pqbOp.png" id="hiddenimageid" onclick="character();"/>
  </div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the product percentage discount color in WooCommerce

I am struggling to switch the box color of the percentage discount for each product from green to red. I tried modifying the function I found on Reddit, but I couldn't get it right and it caused a fatal error, crashing the entire website. Here is the ...

htmlcsswordpresswoocommerce

Modifying data on the fly for a Highcharts series

My chart is currently functioning well with data in the options. However, when I leave the data empty for a series and attempt the following code (in order to change the data based on a click event), it fails to work. Any suggestions on how I can rectify ...

javascriptarrayshighchartsboxplot

The access to the HTTP response object is not possible: the property is not found on the Object type

I recently created a response object and assigned it to the "this" object. However, when I try to access the datacentersinfo property, I encounter an error stating that the property does not exist on type Object. Due to this issue, I am unable to generat ...

javascriptangulartypescriptecmascript-6

To restore the position of the chosen object in Three.js after clicking reset

I am facing an issue with resetting the position of my latest Object in three.js. Initially, my code consists of the following: function onDocumentMouseDown( event ) { event.preventDefault(); var vector = new THREE.Vector3( mouse ...

javascriptthree.jsdragevent-listener

What methods work best for retrieving non-API data in Next.js when deploying on Vercel?

Before rendering my application, I am working on fetching my data. Luckily, Next.js offers a method called getStaticProps() for this purpose. Currently, I am utilizing the fs module to retrieve data from a json file in my local directory. export async fun ...

javascriptnext.jsvercel

A specific class has no border on its left side

Is there a way to use CSS to disable the left border to the right of a cell with a specific class? In the scenario shown in this image, the right border appears double due to the combination of the "selected" class border and the default gray border. I wo ...

cssborder

Convenient method for extracting the final element within a jQuery section

I need to determine whether the div with the class "divclass" contains an anchor tag. If it does, I have to run a specific block of JavaScript code; otherwise, no action is required. <div class="divclass"> <span> some text</span> ...

javascriptjqueryhtml

The Chocolat.js Lightbox plugin is experiencing issues with jQuery as it is unable to detect the

I am in the process of integrating chocolat.js into a basic website. An issue I encountered was that the thumbnail was directly processing the anchor link, which resulted in the image opening in a new window instead of launching it in a modal on the screen ...

javascriptjqueryhtmlchocolat.js

basic computation of whole and decimal values using jquery

I'm having trouble multiplying 2 values in my code where the quantity is an integer and credit price is a decimal number. However, when I run the script, nothing seems to happen. Can someone please help me identify and resolve this issue? Any insight ...

javascriptjquery

The div element is persisting despite AJAX attempts to remove it

I am currently developing an application that allows users to post and comment. I have a situation where I need to delete a specific comment by clicking on the associated 'x' button. To achieve this, I am making an Ajax call to the remove-comme ...

javascriptphpjqueryhtmlajax

Troubleshooting problem with transmitting data using the b4j jQuery WebSocket library

I'm seeking guidance on the process of sending data through a custom library that connects to a Java server operating as a WebSocket server. The code I'm using for successful connection is: <script src="https://ajax.googleapis.com/ajax/libs/ ...

javascriptjquerywebsocketb4j

Can the :not pseudo selector be utilized in conjunction with the adjacent sibling combinator?

I am attempting to achieve the following - when the table footer is rendered, I want to remove the border radius from the table cells within the last row inside the table body. I am unsure if the code below will do the trick: table tbody:not(+ tfoot) tr td ...

csscss-selectors

Implementing an interactive tab feature using jQuery UI

Recently, I was working on a project involving HTML and jQuery. Now, my goal is to create a dynamic tab with specific data when a button is clicked. This is my code for the JQuery-UI tab: $(document).ready(function() { var $tabs = $("#container-1 ...

javascriptjqueryhtmljquery-ui

The foundation gem is encountering an issue with incompatible units: 'rem' and 'px'

After installing the foundation gem version 5.5.2.1, I encountered an error when starting the application: Showing /home/user/Scrivania/sites/store/app/views/layouts/application.html.erb where line #9 raised: Incompatible units: 'rem' and &apos ...

cssruby-on-railssasszurb-foundationzurb-foundation-5

Switch out bootstrap icons for angular material icons

I'm currently in the process of transitioning from using Bootstrap to Angular Material in an existing application. I need assistance with replacing the Bootstrap icons with Angular Material icons. Any help is greatly appreciated. <md-button class= ...

javascriptangularjsangular-material

BOOTSTRAP Issue: The sticky footer in the template is not staying sticky

I am at the point where I am tempted to open my window and throw my computer out. I followed a tutorial on Bootstrap for the footer template. Everything looks good, but when my text extends beyond one page, the footer remains stuck in place and does not m ...

htmlcsstwitter-bootstrapbootstrap-5

Guide to displaying Fontawsome icons with CSS2D Renderer/Object

I am trying to display the map-marker-exclamation icon from the FontAwsome library on top of a three.js cube, but unfortunately, the icon is not rendering properly. Can someone guide me on how to successfully render a FontAwsome Icon using three.js? Thank ...

cssthree.jsfont-awesome

I am looking for guidance on the proper way to import MatDrawer and MatDrawerContainer in the app.module.ts file for an Angular

When attempting to implement a side nav using angular material and clicking on the toolbar icon, everything was functioning correctly until I encountered an error while trying to open the navbar: The error message displayed: Unexpected directive 'Ma ...

htmlangulartypescriptwebangular-material

Executing multiple functions with onPress in React Native

When I press onPress using TouchableOpacity, I am attempting to invoke multiple functions. Here's an example: functionOne(){ // perform an action } functionTwo(){ // execute something } <TouchableHighlight onPress{() => this.functionOne()}/& ...

javascriptreactjsreact-native

The XML request fails to retrieve any output from the PHP script

I am seeking tools to enable the calling of .php from .html files. Here is an issue: while this example successfully works in a .php file: <html> <head> <meta http-equiv="content-type" content="text/html" charset="utf-8"> &l ...

javascriptphphtmlxmlhttprequest