Blink The *.gif Image

**Dilruba** · 08-07-2007, 05:31 AM

Want to blink the "image.gif" image for certain condition.

For example, if i upload the new data, then there will be dataNew.gif file, that will blink. Otherwise it will not blink.

**tech_support** · 08-07-2007, 06:58 AM

Add this to your page:

Code:

<script type="text/javascript">
var hideorshow="hidden"
function blinkImg(imgname) {
var obj = document.images[imgname]
obj.style.display=hideorshow
if (hideorshow=="visible") { hideorshow="hidden" }
else { hideorshow="visible" }
}
</script>

And add name="whatyouwanttocallit" to your image tag and call the JS function blinkImg('whatyoucalledtheimage') whenever you want it to blink.

**jscheuer1** · 08-07-2007, 07:37 AM

Originally Posted by tech_support

Add this to your page:

Code:

<script type="text/javascript">
var hideorshow="none"
function blinkImg(imgname) {
var obj = document.images['imgname']
obj.style.display=hideorshow
if (hideorshow=="block") { hideorshow="none" }
else { hideorshow="block" }
}
</script>

And add name="whatyouwanttocallit" to your image tag and call the JS function blinkImg('whatyoucalledtheimage') whenever you want it to blink.

That won't blink. It won't do anything because var obj = document.images['imgname'] will not represent any image passed to the function unless its name is literally 'imgname'. You should have left the quotes off. Even if it did 'work', it would take the image out of the page flow or put it into the page flow once and once only per execution, disrupting the flow of the document.

This works:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var blinkImg = function (imgname, s) {
	clearTimeout(blinkImg['blinking' + imgname]);
	var obj = document.images[imgname];
	if (arguments[1] === 'blink') {
		obj.style.visibility = !(blinkImg[s + imgname] = !blinkImg[s + imgname])? '' : 'hidden';
		blinkImg['blinking' + imgname] = setTimeout(function(){blinkImg(imgname, s);}, 350);
	}
	else {
		blinkImg['blink' + imgname] = false;
		obj.style.visibility = '';
	}
};
</script>
</head>
<body>
<img name="blinker1" src="some.gif"><br>
<input type="button" onclick="blinkImg('blinker1', 'blink');" value="Blink"> 
<input type="button" onclick="blinkImg('blinker1', 'stop');" value="Stop">
</body>
</html>

**dave23913** · 07-18-2016, 08:36 PM

John - I'm a newbie with JavaScript. Can you please describe how I can run your blinking script automatically when the page loads? I've tried the window.onload command but haven't had any luck. Thanks!

**jscheuer1** · 07-18-2016, 08:50 PM

Add the highlighted after the image (preferably just before the closing </body> tag) as shown.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var blinkImg = function (imgname, s) {
	clearTimeout(blinkImg['blinking' + imgname]);
	var obj = document.images[imgname];
	if (arguments[1] === 'blink') {
		obj.style.visibility = !(blinkImg[s + imgname] = !blinkImg[s + imgname])? '' : 'hidden';
		blinkImg['blinking' + imgname] = setTimeout(function(){blinkImg(imgname, s);}, 350);
	}
	else {
		blinkImg['blink' + imgname] = false;
		obj.style.visibility = '';
	}
};
</script>
</head>
<body>
<img name="blinker1" src="some.gif"><br>
<input type="button" onclick="blinkImg('blinker1', 'blink');" value="Blink"> 
<input type="button" onclick="blinkImg('blinker1', 'stop');" value="Stop">
<script type="text/javascript">
if(document.images['blinker1'].complete){
	blinkImg('blinker1', 'blink');
} else {
	document.images['blinker1'].onload = function(){
		blinkImg('blinker1', 'blink');
	}
}
</script>
</body>
</html>

NOTES: The buttons are no longer required, but may remain if desired. If the image is missing or doesn't load for some reason, the added code will do nothing.

Thread: Blink The *.gif Image

Thread Tools

Search Thread

Blink The *.gif Image

Bookmarks

Bookmarks

Posting Permissions