In a web application, how can I flash an image after a user presses a button?

We needed the ability to display an image for only a quarter of a second. This can be done using javascript. After the

tag, add these functions

function displayImage()
{
document.images[0].src = 'flashedImage.jpg'
var t = setTimeout("hideImage()",250)
}

function hideImage()
{
document.images[0].src = 'blank.gif'
}

When the displayImage function is called, it will change the first image on the page to “flashedImage.jpg”. After 250 milliseconds, it will replace this image with a blank image.

A button like this can be used in the body for the user to click on.

<form>
<input type="button" value="Click to view image" onClick="displayImage()" id="displayButton">
</form>

images[0] refers to the first image on the page. If you want a different image to flash, replace 0 with the appropriate number (the first image is 0, the second is 1, …).

Here is a sample page that implements this code.

Back to top