Advanced Search

Results 1 to 9 of 9

Thread: Twirly Thingy

  1. #1
    Join Date
    Jul 2007
    Posts
    35
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Default Twirly Thingy

    Iím after an interactive rotating image . . . something like this: http://www.pictures-on-walls.com/Twirly%20thingy.php, only free. Any ideas would be most welcome. Thanks.

    simonjones2001uk@yahoo.co.uk

  2. #2
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    It'd be pretty easy, I could get it to do only one way if you want. But it would require a lot of images.
    Jeremy | jfein.net

  3. The Following User Says Thank You to Nile For This Useful Post:

    simonjones (07-14-2008)

  4. #3
    Join Date
    Jul 2007
    Posts
    35
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Default

    Sorry, how do you mean, you could get it to do only one way? Excuse me for being dull.

  5. #4
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Like, with this flash applet when you move your cursor right, it moves right. And when you move your cursor left, it moves left. 1) I would do this with javascript 2) It would only go right.
    Jeremy | jfein.net

  6. The Following User Says Thank You to Nile For This Useful Post:

    simonjones (07-14-2008)

  7. #5
    Join Date
    Jul 2007
    Posts
    35
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Default

    That would be great. How many images would you require? This took 36, which I can send to you?

  8. #6
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Ok, send them to : jeremyfifty9@gmail.com, I'll be posting the code here. Not in the email. This way others can see the script.
    Last edited by Nile; 07-15-2008 at 02:40 AM.
    Jeremy | jfein.net

  9. The Following User Says Thank You to Nile For This Useful Post:

    simonjones (07-14-2008)

  10. #7
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Now, my script was this if you were wondering:
    Script.js
    Code:
    var imageSlides = ['01.gif','02.gif','03.gif','04.gif']; //Add as menu as you want, seperate by commas
    var tell = true;
    function rotateImage(el,rotateNum){
    var divEl = document.getElementById(el);
    divEl.getElementsByTagName('img')[0].src=imageSlides[rotateNum];
    if(tell){
    divEl["onmouseover"] = function(){ tell=false };
    if(rotateNum == imageSlides.length){
    rotateNum = 0;
    }
    else {
    rotateNum += 1;
    }
    setTimeout("rotateImage('"+el+"',"+rotateNum+")",100); //time delay
    }
    else {
    divEl["onmousemove"] = function() { rotateNum = (rotateNum==imageSlides.length) ? 0 : rotateNum+1; rotateImage(el,rotateNum) };
    }
    }
    Run.html
    Code:
    <html>
    <head>
    <title>Image Rotation</title>
    <script type="text/javascript" src="script.js">
    //Script made by: Niler, visit him at http://Niler.net Please don't remove this notice.
    </script>
    <style type="text/css">
    #rotation {
    padding: 15px;
    border: 1px solid black;
    width: 500px;
    text-align: center;
    }
    </style>
    </head>
    <body onLoad="rotateImage('rotation',0);">
    <div id="rotation"><img src='image.png'/></div>
    </body>
    </html>
    Now, yes. I know. I should've added a <noscript> tag some where. But doesn't really matter to me.
    Jeremy | jfein.net

  11. The Following User Says Thank You to Nile For This Useful Post:

    simonjones (07-15-2008)

  12. #8
    Join Date
    Jul 2007
    Posts
    35
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Default

    Thanks again, looks great

  13. #9
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Ok, simonjones. Please use the following script, this one works in Safari, and Internet Exporer:
    Code:
    var imageSlides = ['01.png','02.png','03.png','04.png','05.png','06.png','07.png'];
    var tell = true;
    function rotateImage(el,rotateNum){
    var divEl = document.getElementById(el);
    divEl.getElementsByTagName('img')[0].src=imageSlides[rotateNum];
    if(tell){
    divEl["onmouseover"] = function(){ tell=false };
    if(rotateNum == imageSlides.length){
    rotateNum = 0;
    }
    else {
    rotateNum += 1;
    if(imageSlides[rotateNum] == undefined){
    rotateNum = 0;
    }
    }
    setTimeout("rotateImage('"+el+"',"+rotateNum+")",100);
    }
    else {
    divEl["onmousemove"] = function() { rotateNum = (rotateNum==imageSlides.length) ? 0 : rotateNum+1; rotateImage(el,rotateNum) };
    }
    }
    Change the highlighted line(first line), with the first line of your other code.
    Jeremy | jfein.net

  14. The Following User Says Thank You to Nile For This Useful Post:

    simonjones (07-16-2008)

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
  •