With this page you can display some images, even stacks of images, and enable visitors to rotate them interactively.
No Flash or other plugins needed! You can also use your own images! See an explanation in Dutch.

URL options:

w=<n> maximum width in px (optional, used for centering)
t=<string> title or description (optional, URL-encoded string)
bg=<string> document background color (name or hex-without-#, default: black)
img=<string> URL of an image, e.g. simpleALRO1.png
abs=<x,y> Position of the rotation center of the image on the screen, in pixels, left-top=0,0
rel=<x,y> Position of the rotation center of the image relative to left-top of image, in pixels. Optional. Default: width/2,height/2.
opa=<n> Opacity of image, on 0...100 scale. Optional. Default:100
lnk=<i> Links motion of image to that of image i (starts at 1). Use negative index for reversed motion. Optional.
btn=<x,y,...> Coordinates of the part of the image that can be grabbed to rotate the image. Optional. If no btn is specified the image is static. Values of btn can be:
x,y,r: circle with radius r and center x,y (relative to left-top of image). x and y can be the character X or Y (for the image center, see "rel").
x,y,ra,rb: ring with outer radius ra, inner radius rb and center x,y (relative to left-top of image). x and y can be the character X or Y (for the image center, see "rel").
'B',x,y,ra,rb01: broken ring with outer radius ra, inner radius rb, center x,y (relative to left-top of image) and angle from φ0 to φ1 degrees(clockwise). x and y can be the character X or Y (for the image center, see "rel").
x1,y1,x2,y2,...: polygon with coordinates relative to left-top of image.

Compose your own animation:

URL:

w= maximum width in px (optional, used for centering)
t= title or description (optional, will be automatically URL-encoded here)
bg= document background color (name or hex-without-#)
bas= base URL (optional, a prefix for all img URLs)
div= show a pair of dividers at specified absolute y-position (optional, used for sectors)
img= URL of an image
abs= , Position of the rotation center of the image on the screen, in pixels, left-top=0,0
rel= , Position of the rotation center of the image relative to left-top of image, in pixels (optional, default: width/2,height/2)
min=  ° Minimum of allowed rotation, in degrees (optional)
max=  ° Maximum of allowed rotation, in degrees (optional)
opa= Opacity of image, on 0...100 scale. (optional, default:100)
lnk= Links motion of image to that of ith image (i starts at 1). Use negative i for reversed motion. (optional)
btn= Coordinates of the part of the image that can be grabbed to rotate the image. (optional, if omitted the image is static)
btn can be:
x,y,r : circle with radius r and center x,y (relative to left-top of image). x and y can be the character X or Y (for the image center, see "rel").
x,y,ra,rb : ring with outer radius ra, inner radius rb and center x,y (relative to left-top of image). x and y can be the character X or Y (for the image center, see "rel").
'B',x,y,ra,rb01 : broken ring with outer radius ra, inner radius rb, center x,y (relative to left-top of image) and angle from φ0 to φ1 degrees(clockwise). x and y can be the character X or Y (for the image center, see "rel").
x1,y1,x2,y2,... : polygon with coordinates relative to left-top of image.

 


Examples:

click to rotate divider drag divider drag to open/close divider drag to open/close divider
?
×
How to use the sector
Open the sector by dragging one of its legs. It will open symmetrically.
For a sector a pair of dividers is needed.
Place the dividers' points on the desired places by dragging the red circles.
Rotate the dividers as a whole by clicking (or right-clicking) the joint.
Drag the dividers as a whole by grabbing the little stem sticking out of the joint.
Gebruik van een sector
Open de sector door een van de poten te slepen. De sector gaat symmetrisch open.
Voor een sector is een steekpasser nodig.
Plaats de punten van de steekpasser op de gewenste plaatsen door de rode cirkels te slepen.
Roteer de hele steekpasser door op het gewricht te klikken (of met de rechtermuisknop te klikken).
Verplaats de hele steekpasser door het kleine steeltje vast te pakken dat uit het gewricht steekt.