How to make an icon flash/blink, which is present in a web page

Question

I started working on advanced java few days before(too late to start on that, I know). I am stuck with a specific task of making an icon (which is present on the task bar) blink

Answer 1

Small fix

instead

if(img.display == 'hidden')

use

if(img.style.visibility == 'hidden')

Answer 2

HTML

<img src='image/source' alt='blinking!' id='blinking_image' />

Javascript

var img = document.getElementById('blinking_image');

var interval = window.setInterval(function(){
    if(img.style.visibility == 'hidden'){
        img.style.visibility = 'visible';
    }else{
        img.style.visibility = 'hidden';
    }
}, 1000); //the 1000 here is milliseconds and determines how often the interval should be run.

This creates an anonymous function inside the setInterval that runs every 1 second (1sec == 1000milisec). To see more about setInterval checkout the mdn here on it.

Each time it runs it checks to see if the img is hidden or visible if it's hidden then it shows it if it's visible then it hides it. It does this by checking the style.visiblity property. Which you can learn more about here on the mdn.

Answer 3

You might find opacity works better because the image is still there, which means it is still clickable if necessary. Also you can add a clear interval to stop the flashing.

var mycounter = 0
interval = window.setInterval(function () {
if (img.style.opacity == '0.1') {
            img.style.opacity = '1';

            mycounter = mycounter + 1
            if (mycounter == 7) {
                clearInterval(interval);
            }
        } else {
            img.style.opacity = '0.1';
        }
    }, 500); //the 1000 here is milliseconds and determines how often the interval