Blinking border?

JavaScript
1

Hello,

I want to add a blinking border to some of my images. I looking around for code, and found this semi-working bit:


<head>
<script type="text/javascript">

function borderchange1() {
document.getElementById("bordereffect").className="border1";
setTimeout("borderchange2()",1000);
}

function borderchange2() {
document.getElementById("bordereffect").className="border0";
setTimeout("borderchange1()",1000);
}
</script>

</head>

<body onload=“borderchange1();”>

In my stylesheet:

    .border0 {color: #FFFFFF;}
    .border1 {color: #000000;}

And the image:

<img id="bordereffect" src="somepic.jpg">

I have several images with id=“bordereffect”, and it works in Firefox, but only on the 1st image. So, 1st image in order of html code has a blinking border, and other do not. In IE it doesn’t seem to work.

Is there a better code that would work? Or maybe somehow modify this code?

2

Big Error #1 is that the HTML specification says that only one element in an HTML document can have a particular ID. It is unique. Therefore Firefox is correct, and IE is wrong (as usual). Safari and Opera are probably also going to be correct.

A potential Big Error #2 is that blinking borders are likely to be very annoying.

Instead of ID, you’ll want to use a class instead. Then loop through the elements with the class “bordereffect” and apply your effect. However, before you do this, please refer to potential Big Error #2. Most things that blink are very irritating and will drive away portions of your visitors. This is why <blink> and <marquee> are deprecated and don’t even work in most decent modern browsers.

3

Thanks for the reply.

I changed the ID to class as such:


<script type="text/javascript">

function borderchange1() {
document.getElementByClass("bordereffect").className="border1";
setTimeout("borderchange2()",1000);
}

function borderchange2() {
document.getElementByClass("bordereffect").className="border0";
setTimeout("borderchange1()",1000);
}
</script>

But I don’t how to make it loop? Can you show me the looped version?

About the problem #2, I’m trying to get a good time-offset and a good color mix to make the blinking not annoying at all, I think it will work well in my site design.

4

Raffles, it does the same thing in IE7 as in Firefox 2. Therefore neither is wrong, as usual.

IamAdam, give this a try:


<html>
<head>
<script type="text/javascript">
var imgList = [];

function createImgList() {
	// create an array of images to apply the border effect
	var imgs = document.body.getElementsByTagName("img");
	for (var i=0; i < imgs.length; i++) {
		if (imgs[i].className == "border0") {
			imgList.push(imgs[i]);
		}
	}
	borderchange(1);
}

function borderchange(n) {
	for (var i=0; i < imgList.length; i++) {
		imgList[i].className = "border" + n;
	}
	setTimeout(function () {borderchange(Math.abs(n-1));},1000);
}

window.onload = createImgList;
</script>
<style type="text/css">
.border1 {
	border: 4px solid red;
}
.border0 {
	border: 4px solid green;
}
</style>
</head>
<body>
	<img class="border0" src="http://www.sitepoint.com/forums/image.php?u=91093&dateline=1182278167" />
	<img class="border0" src="http://www.sitepoint.com/forums/image.php?u=91093&dateline=1182278167" />
</body>
</html>
5

Thanks Jim, it works!

6

I would had personally used window.setInterval for this “cool” effect.

7

Agreed Pepejeria