Rotate links along a circle

Question

I'm trying to make a website with links rotating around a circle. (Something like this) http://i.imgur.com/i9DzASw.jpg?1 with the different images and texts leading to different urls. The image is one unified image that also rotates as the user scrolls. Is there anyway I can do this? Also is there a way to make the page height infinite so that the user never gets to the bottom of the page as they scroll? Thanks!

Here's the jsfiddle and the code that allows for the rotation of the image. http://jsfiddle.net/kDSqB/135/

var $cog = $('#cog'),
    $body = $(document.body),
    bodyHeight = $body.height();

$(window).scroll(function () {
    $cog.css({
        'transform': 'rotate(' + ($body.scrollTop() / bodyHeight * 30000) + 'deg)'
    });
});

Answer 1

See this : http://jsfiddle.net/F8GTP/, and this final version : http://jsfiddle.net/MjnxP/.

Use WheelEvent like this for infinite scroll :

var $cog = $('#cog'),
    $body = $(document.body),
    bodyHeight = $body.height(),
    rotate = 1;

var wheelEvent = function (event) {
    var delta = 0;
    if (event.wheelDelta) { delta = event.wheelDelta/120; } else if (event.detail) { delta = -event.detail/3; }

    if (delta) {
        rotate += delta * 1.12; //<== Increase speed.
        console.log(rotate, delta);
        $cog.css({ 'transform': 'rotate(' + rotate + 'deg)'});
    }

    if (event.preventDefault) { event.preventDefault(); }
    event.returnValue = false;
};

window.onmousewheel = wheelEvent;
if (window.addEventListener) { window.addEventListener('DOMMouseScroll', wheelEvent, false); }

For detect link use canvas with "collision image", and this is final version :

$cog.click(function(e) {
    if (rotate !== lastrotate) {
        //http://creativejs.com/2012/01/day-10-drawing-rotated-images-into-canvas/
        context.save();
        context.translate((image.width/2), (image.height/2));
        context.rotate(rotate * Math.PI/180);
        context.drawImage(image, -(image.width/2), -(image.height/2));
        context.restore();
        lastrotate = rotate;
    }

    var x = e.pageX, y = e.pageY;    
    console.log(x, y);

    var color = context.getImageData(x, y, 1, 1).data;
    // context.fillRect(x-5, y-5, 1+10, 1+10); <== See cursor position
    if (color[0] == 255 && color[1] == 255 && color[2] == 255) { //white = rgb(255, 255, 255);
        alert("click");
    }
});
function setPixel(imageData, x, y, r, g, b, a) {
    index = (x + y * imageData.width) * 4;
    imageData.data[index+0] = r;
    imageData.data[index+1] = g;
    imageData.data[index+2] = b;
    imageData.data[index+3] = a;
}
var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    image = new Image(),
    lastrotate = null;
image.onload = function(){
    canvas.width = image.width;
    canvas.height = image.height;
    context.drawImage(image, 0, 0, image.width, image.height);
};

// http://i.imgur.com/UfjbW5l.png I use base64 for get image because else console return security error with "getImageData".
image.src = "data:image/png;base64,iVBORw0K...";

For "image.src", use your image in YOUR DOMAIN or use Base64 else this script return security error for convert image to base64 see : http://www.base64-image.de/.

If position of cog isn't (0, 0) replace actual line to this line :

var x_pos = 200, y_pos = 200; // No use .position() or .offset() for get this, or use parent element position.
var x = e.pageX - x_pos, y = e.pageY - y_pos;  

Answer 2

http://jsfiddle.net/Fezjh/1/

I have coloured the div to make it easier to understand how to do it - but you need to think carefully about compatiblity issues (older browsers etc.)

Just remove the background colour to get your desired effect.

A better way would be to split the image into divs and put those divs up against each other.

check http://www.gdrtec.co.uk - you will notice 4 images butted up against each other form the start menu - it would be easy to rotate the containing div and everything will still work as it should.

The code below is just for demonstration purposes and should be replaced with more robust solution.

$('#link1').click(function(){
    alert("openURL");
});

Also consider making sure people don't have to rely on javascript for your site to work.