CODEWITHSUNDEEP
javascripthtmlimage
Anuj Balan
Anuj Balan

Reputation: 7729

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

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. This blinking should happen based on a specific condition, which means that it can be achieved using javascript.

I have been searching for a while now but is there a way to make an icon appear and disappear every 1 second or so to bring in the blinking effect ?

Upvotes: 1

Views: 18316

Answers (3)

Ryan
Ryan

Reputation: 5682

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.

Upvotes: 5

stu
stu

Reputation: 206

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

Upvotes: 0

Eyal Benishti
Eyal Benishti

Reputation: 31

Small fix

instead

if(img.display == 'hidden')

use

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

Upvotes: 3

Related Questions