www.webdeveloper.com
Results 1 to 7 of 7

Thread: Blinking image

  1. #1
    Join Date
    Apr 2006
    Posts
    27

    Blinking image

    Hello all,

    I have tried several js scripts to make images blink. None have worked in my IE6 browser. Does anyone have a good script for this function that allows flexibility in the blink rate? I don't want to overly annoy viewers with rapid distractions. Yes, I agree that blinking should be banned but my client insists!

    Thanks

  2. #2
    Join Date
    May 2003
    Location
    Between Baltimore and DC
    Posts
    3,579
    Very basic function, could be done tons of ways.

    Code:
    function changeImg(){
      document.getElementById("imgId").src = (document.getElementById("imgId").src.indexOf("OnPic.gif") == -1)?"OnPic.gif":"OffPic.gif"; 
    }
    window.onload = function(){
      var xTimer = window.setInterval("changeImg()",2000);
    }
    If you need to do it with multiple images, you can make it OO or just add more statements in the function referencing the images.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint] | twitter | linkedin | http://www.pascarello.com

  3. #3
    Join Date
    Apr 2006
    Posts
    27
    Thanks Eric. As you can tell, I know just enough js to get myself in trouble. Following up:

    Does all this code go into the <head>? How do I call this function in the <body>?

    Thanks

  4. #4
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    It all goes in the head and the function call is already included in the code so you don't need to add anything else.
    Stephen

  5. #5
    Join Date
    Apr 2006
    Posts
    27
    Quote Originally Posted by A1ien51
    Very basic function, could be done tons of ways.

    Code:
    function changeImg(){
      document.getElementById("imgId").src = (document.getElementById("imgId").src.indexOf("OnPic.gif") == -1)?"OnPic.gif":"OffPic.gif"; 
    }
    window.onload = function(){
      var xTimer = window.setInterval("changeImg()",2000);
    }
    If you need to do it with multiple images, you can make it OO or just add more statements in the function referencing the images.

    Eric
    Eric - I cut/pasted the above code from your reply into the header area of my page and changed the image names to those on my server. When I display the page in an IE browser the code text is displayed on the page across the top. No blinking anything. Am I missing some of the code?

    BTW, how does the browser know where to place the image? I thought I would have to put a call to the function in the page code where I wanted the image placed although you did say the function is automatically called when the page is opened.

    Thanks, hope you don't mind the back and forth.

  6. #6
    Join Date
    May 2003
    Location
    Between Baltimore and DC
    Posts
    3,579
    It is not that complicated. Change the images to the names it should be and give the image an id.

    Working example below:

    Code:
    <html>
      <head>
        <script type="text/javascript">
          function changeImg(){
            document.getElementById("imgId").src = (document.getElementById("imgId").src.indexOf("OnPic.gif") == -1)?"OnPic.gif":"OffPic.gif"; 
          }
          window.onload = function(){
            var xTimer = window.setInterval("changeImg()",2000);
          }
        </script>
      </head>
      <body>
        <img id="imgId" src="OnPic.gif" />
      </body>
    </html>
    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint] | twitter | linkedin | http://www.pascarello.com

  7. #7
    Join Date
    Apr 2006
    Posts
    27
    Thanks for your patience in helping me, Eric. Finally got it working. I wasn't including the id and of course the script wan't being called.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles