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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Dec 2009
    Posts
    173
    Thanks
    24
    Thanked 1 Time in 1 Post

    How can i create this?

    How can i create an image rotator just like in redtube.com.

    When mouseenter it changes the img's src.
    When mouseleave it returns the default src.


    Ps: sorry abou the website font.hehe

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Have you tried Google or the Search feature of this forum? Example:- http://odetocode.com/Blogs/scott/arc...ouseenter.aspx

    Do you mean "How do I go about writing the necessary code" or do you mean "I want someone to write the code for me"?

    mouseenter and mouseleave are supported only by IE and Opera (but not Firefox or Chrome). And jQuery.


    It is your responsibility to die() if necessary….. - PHP Manual
    Last edited by Philip M; 12-12-2011 at 12:37 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Cycle(obj,ary,ms,cnt){
     clearTimeout(obj.to);
     if (!obj.lst){
      obj.lst=obj.src;
     }
     if (ary){
      cnt=cnt||0;
      ms=ms||500;
      obj.src=ary[cnt];
      cnt=++cnt%ary.length;
      obj.to=setTimeout(function(){ Cycle(obj,ary,ms,cnt); },ms);
     }
     else {
      obj.src=obj.lst;
     }
    }
    
    
    /*]]>*/
    </script>
    </head>
    
    <body>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg"
    onmouseover="Cycle(this,['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg'],1000);"
    onmouseout="Cycle(this);"
    />
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    Regular Coder
    Join Date
    Dec 2009
    Posts
    173
    Thanks
    24
    Thanked 1 Time in 1 Post
    Thanks its worked perfectly! But could u pls explain the code? I couldnt understand ****.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Cycle(obj,ary,ms,cnt){
     clearTimeout(obj.to); // stop the timeout of image object property .to
     if (!obj.lst){     // save the original imgage src to the image object property .lst
      obj.lst=obj.src;
     }
     if (ary){    // is an array has been passed
      cnt=cnt||0;  // start the count at 0
      ms=ms||500;  // the default ms argument is 500
      obj.src=ary[cnt];  // change the image object src
      cnt=++cnt%ary.length;  // increment the count snd if it = ary.length set to 0
      obj.to=setTimeout(function(){ Cycle(obj,ary,ms,cnt); },ms);  // assign the timeout to the image object property.to and recall the function
     }
     else {
      obj.src=obj.lst;  // change the image object src to .lst
     }
    }
    
    
    /*]]>*/
    </script>
    </head>
    
    <body>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg"
    onmouseover="Cycle(this,['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg'],1000);"
    onmouseout="Cycle(this);"
    />
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    sorlaker (12-12-2011)

  • #6
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by sorlaker View Post
    How can i create an image rotator just like in redtube.com.
    You say "Let there be rotation".

    Oh wait... only God can do that.

    Nevermind.
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov


  •  

    Posting Permissions

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