SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Continuous Swap on RollOver

    Hi - So on a webpage I have a link and currently it switches to a different color on RollOver. I want it to keep switching really fast when you Rollover. I know I just need to alter the function a little. Anyone have any idea how I can do that?

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You want us to help you on a function, yet you don't post the code to the function? How am I supposed to know what it does? And what your markup is like, in order to help you?

  3. #3
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry!

    Code:
    <script language="javascript">
    <!-- Begin
    function SwapImage1() {
      document.image1.src="images/enterOver.png";
    }
    function SwapImage1Back() {
      document.image1.src="images/enter.png";
    }
    // End -->
    
    function createWin(popURL, winGame)
    {
    	window.open(popURL,winGame,"top=0,left=0,toolbar=0,location=0,directories=0,status=0,menubar=0,width=700,height=700,scrollbars=no,resizable=yes");
    }
    // -->
    </script>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    link.onmouseover = swapImage;

    function swapImage() {
    swapImage1();
    setTimeout(100, SwapImage1Back);
    setTimeout(200, swapImage);
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hm. That doesn't seem to be working..

  6. #6
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works.. but when I take the cursor off it won't stop.

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    link.onmouseover = swapImage;
    link.onmouseout = stopSwapping;
    
    var currentSwapTimeout;
    
    function swapImage() {
    swapImage1();
    setTimeout(100, SwapImage1Back);
    currentSwapTimeout = setTimeout(200, swapImage);
    }
    
    function stopSwapping() {
      clearTimeout(currentSwapTimeout);
    }

  8. #8
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimfraser View Post
    You mention "link changing color really fast" in your original post (which to me means change the color of some text), but in the code you posted you are swapping an image and opening a popup. So...what is it you are trying to do and where is your code that attempts to do it?
    Yeah. the text is an image. So I want to swap them quickly.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Thanks Jim, now that we have a better idea of what he's after, are there better ways to code that up?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Thanks Jim, now that we have a better idea of what he's after, are there better ways to code that up?
    Code:
    function multiSwap(imgRef, period)
    {
     var timer=null, index=0, theElem=document.getElementById(imgRef),
         defSrc=theElem.src, imgData=[];
    
     for(var i=2,j=0; i<arguments.length; i++,j++)
     {
      imgData[j]=new Image();
      imgData[j].src=arguments[i];
     }
    
     trigElem = (theElem.parentNode.tagName=='A' ? theElem.parentNode : theElem);
    
     trigElem.onmouseout=trigElem.onblur=function(){clearInterval(timer);theElem.src=defSrc;index=0;}
    
     trigElem.onmouseover=trigElem.onfocus=function()
     {
      this.onmouseout();
      timer=setInterval(swap, period);
     }
    
     function swap()
     {
      if(index==imgData.length)
       index=0;  
      theElem.src=imgData[ index++ ].src;
     }
    }
    Usage: multiSwap( imageID, millisecondsPerImage, 'firstImage',....other images........);

    DEMO (It probably isn't coming soon)
    Last edited by Logic Ali; Mar 4, 2008 at 22:01. Reason: Added pre-loader.
    Tab-indentation is a crime against humanity.


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
  •