www.webdeveloper.com
Results 1 to 10 of 10

Thread: Rotating icons links about a fixed image

  1. #1
    Join Date
    Aug 2010
    Posts
    5

    Rotating icons links about a fixed image

    I want to make my web page with image icons rotating about a fixed image like in solar system.
    Please see the attachment of what I want to have,

    http://img101.herosh.com/2010/08/23/788008540.jpg

    Please tell me that how should I start making it. I think that this effect(animation) can be made with java script, if you know other tools to do that please guide me.

    I am in a great need of it. Thanks.......

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,682
    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/

  3. #3
    Join Date
    Aug 2010
    Posts
    5

    Thanks

    Thanks a lot sir for this script, it is 99% what I wanted to have.

    Please tell me how to run the images continuously, they are running with a delay of one second, I want that the images should run continuously.


    I am a newbie to javascript, please help me.

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,682
    use

    http://www.vicsjavascripts.org.uk/El...tEllipseII.htm

    and

    Code:
     E1=new zxcEEllipse('Ellipse1',75);
     zxcEERotate(E1,1,1,20,0); // parameter 4 = the hold duration
    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/

  5. #5
    Join Date
    Aug 2010
    Posts
    5
    Thanks a lot again........

    Please tell me,
    1. how to edit the dimentions of the ellipse i.e., a and b
    where a=vertical size and b=horizontal size of ellipse
    http://img101.herosh.com/2010/08/24/743951564.jpg

    2. Where to place the background image, each rotating icon should be hidden when it goes behind the background image,like this,
    http://img104.herosh.com/2010/08/24/545093419.jpg

    Please send me the working code(I do not have a very much experience of javascript). Thanks.

  6. #6
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,682
    1) from the application notes

    Code:
    // The elements to be displayed in an ellipse are defined in the HTML code
    // These elements must be nested in a parent <DIV>
    // This parent <DIV> must be assigned a unique ID name and must be assigned a
    // style position of 'relative' or 'absolute' and the width and height defined by CSS or inline style.
    // The width will determine the horizontal radius and the height the vertical radius of the ellipse.
    // Each nested element  must be assigned a style position of 'absolute'.
    //
    2) provide a link to or zip of your images and the x and y radius required
    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/

  7. #7
    Join Date
    Aug 2010
    Posts
    5
    OK I will send the zip soon but have you seen my second point that,
    Where to place the background image, each rotating icon should be hidden when it goes behind the background image,like this,
    http://img104.herosh.com/2010/08/24/545093419.jpg

    It is more important than the size of ellipse, sorry I should write this point as the Ist point before.

  8. #8
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,682
    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/

  9. #9
    Join Date
    Aug 2010
    Posts
    5
    Thanks you are great,
    How to zoom the icons now when they come at the bottom centre of the ellipse

  10. #10
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,682
    they are zoomed out at the top of the ellipse using option ZoomOut

    // ZoomOut:75, // (optional) the element 'Zoom Out' as a percentage of the initial size. (digits, default = no zoom out)

    see

    http://www.vicsjavascripts.org.uk/El...tEllipseII.htm
    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/

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