SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Apr 2002
    Posts
    395
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Blinking border?

    Hello,

    I want to add a blinking border to some of my images. I looking around for code, and found this semi-working bit:
    HTML Code:
    <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:
    HTML Code:
        .border0 {color: #FFFFFF;}
        .border1 {color: #000000;}
    And the image:
    HTML Code:
    <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. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Addict
    Join Date
    Apr 2002
    Posts
    395
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply.

    I changed the ID to class as such:

    HTML Code:
    <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. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Raffles, it does the same thing in IE7 as in Firefox 2. Therefore neither is wrong, as usual.

    IamAdam, give this a try:
    Code:
    <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. #5
    SitePoint Addict
    Join Date
    Apr 2002
    Posts
    395
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Jim, it works!

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would had personally used window.setInterval for this "cool" effect.

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Agreed Pepejeria


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •