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?
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.
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.
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>
I would had personally used window.setInterval for this “cool” effect.