Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding onmouseout delay to JS.

    The below snippet of js is being used to swap 2 imagemaps upon mouseover and then return to original imagemap after mouseout. I am trying to add a delay to the mouseout (so it stays on the second image for 3 seconds before reverting to previous image). So far, I am not having any success in finding where I can implement the delay(). Any help would be greatly appreciated.

    JS Code:

    [CODE
    <script type="text/javascript">
    function MapRoll( imgId )
    {
    var holder = document.images[ imgId ],
    map = document.getElementsByName( holder.useMap.replace(/^([^#]*#)(.+)/, "$2" ) )[ 0 ],
    areas = map.getElementsByTagName( 'area' /*28632953637269707465726C61746976652E636F6D*/ ),
    args = MapRoll.arguments,
    targetHolder = document.getElementById( args[ 1 ] ) || holder,
    offset = ( targetHolder === holder ? 1 : 2 );
    defSrc = targetHolder.src;

    for( var i = offset, spot, argLen = args.length; i < argLen; i++ )
    {
    ( spot = areas[ i - offset ] ).imgObj = new Image();
    spot.imgObj.src = args[ i ];
    spot.onmouseover = spot.onfocus = swap;
    spot.onmouseout = spot.onblur = back;
    setTimeout(spot.onmouseout, 5000);
    }

    function swap(){ targetHolder.src = this.imgObj.src; }

    function back(){ targetHolder.src = defSrc; }
    }
    </script>
    ]

    Thanks again!
    Last edited by MasterAtreu; 10-14-2012 at 06:06 AM. Reason: Addition

  • #2
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In addition, I can add the HTML I am using to incorporate that would help anyone. I have tried setTimeout function and it does not work. But I am unsure of the exact syntax to use with in the JS function. Again, please any suggestions would be greatly appreciated!

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    0
    Thanked 1 Time in 1 Post
    Yes, could you please post the html you are using.
    That'll make it easier to test the code.

    Also, Code tags are used in the format:

    [code] /* CODE GOES HERE */ [/code]

    -
    Code:
     /* CODE GOES HERE */
    Last edited by keyboard1333; 10-17-2012 at 03:43 AM.


  •  

    Posting Permissions

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