I have working code for a) clicking a button, b) displaying an image for n ms, c) then hide it:
<html>
<body>
<h1>Test</h1>
<p><b>Display Image </b></p>
<p>Click on button to display the image.</p>
<!-- button -->
<button id="btnId1">100 ms</button>
<!-- image to hide and show -->
<img src="img/img-a.jpg" alt="" id="imageID1" width="300" height="300" style="display: none" />
<script>
// add click event to button
document.getElementById("btnId1").addEventListener('click', function() {
//show image
document.getElementById('imageID1').style.display='block';
// hide image after 100 ms.
setTimeout(function() {
document.getElementById('imageID1').style.display='none';
}, 100);
});
</body>
</html>
What I would like to do is
a) Click the button, b) display + hide several .jpg images in sequence, and c) have the control for each image on how long to display it
I have looked through similar topics/posts but haven't found what I'm looking for.
Thanks in advance for any input, -- JW