Problem with adding link are on JS Rotate

[davelf]

Hi, i have problem with adding some link on JS Rotate.
Here is the Online Version : rotate image

I need the link, follow the rotation of the image too. Any idea?
I try to put position:absolute with z-index:9999, but it doesn't work too.

thanks in advance.

[vwphillips]

your image rotates by 90 degrees in effect allowing 4 links

it would be possible to have one of 4 links on each rotation, is this what you want?

           window.onload = function () {
                var src = document.getElementById("bee").src,
                    angle = 0;
                var obj=document.getElementById("holder");
                obj.innerHTML = "";
                document.getElementById('link').onmouseup=function(){ Link(); }
                var R = Raphael("holder", 850, 850);
                var img = R.image(src, 0, 0, 850, 850);
                var butt1 = R.set(),
                    butt2 = R.set();
                butt1.push(R.circle(24.833, 26.917, 26.667).attr({stroke: "#ccc", fill: "#fff", "fill-opacity": .4, "stroke-width": 2}),
                           R.path("M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z").attr({stroke: "none", fill: "#000"}),
                           R.circle(24.833, 26.917, 26.667).attr({fill: "#fff", opacity: 0}));
                butt2.push(R.circle(24.833, 26.917, 26.667).attr({stroke: "#ccc", fill: "#fff", "fill-opacity": .4, "stroke-width": 2}),
                           R.path("M37.566,9.551c9.331,6.686,11.661,19.471,5.502,29.014l2.36,1.689l-4.893,2.262l-4.893,2.262l0.568-5.36l0.567-5.359l2.365,1.694c4.657-7.375,2.83-17.185-4.352-22.33c-7.451-5.338-17.817-3.625-23.156,3.824C6.3,24.695,8.012,35.06,15.458,40.398l-2.857,3.988C2.983,37.494,0.773,24.109,7.666,14.49C14.558,4.87,27.944,2.658,37.566,9.551z").attr({stroke: "none", fill: "#000"}),
                           R.circle(24.833, 26.917, 26.667).attr({fill: "#fff", opacity: 0}));
                butt1.translate(10, 181);
                butt2.translate(10, 245);
                butt1[2].click(function () {
                    angle -= 90;
                    cnt--;
                    clearTimeout(Link.to);
                    img.stop().animate({transform: "r" + angle}, 1000, "<>");
                }).mouseover(function () {
                    butt1[1].animate({fill: "#fc0"}, 300);
                }).mouseout(function () {
                    butt1[1].stop().attr({fill: "#000"});
                });
                butt2[2].click(function () {
                    angle += 90;
                    cnt--;
                    clearTimeout(Link.to);
                    img.animate({transform: "r" + angle}, 1000, "<>");
                }).mouseover(function () {
                    butt2[1].animate({fill: "#fc0"}, 300);
                }).mouseout(function () {
                    butt2[1].stop().attr({fill: "#000"});
                });
                // setTimeout(function () {R.safari();});
            };

                    var cnt=0;
                    var links=[
                     'http://www.dynamicdrive.com/forums/',
                     'http://www.dynamicdrive.com/dynamicindex2/fadescroll.htm',
                     'http://www.dynamicdrive.com/forums/forumdisplay.php?f=23',
                     'http://duniagenerasiplatinum.com/rotate/'
                    ];
function Link(){
 var nu=Math.abs(cnt%4);
 if (links[nu]){
  Link.to=setTimeout(function(){ window.top.location=links[nu]; },500);
 }
}

        <div  style="width:850px;height:850px;background-Color:red;" onmouseup="Link();">
        <div id="holder"  >
        	<img src="http://duniagenerasiplatinum.com/rotate/map.png" alt="Bee" width="850" height="850" border="0" id="bee">
        </div>
        </div>

[davelf]

Hi vwphillips thanks for your fast response,

what exactly that i need to work on this project is like this:


i have to put some link / maparea on the object, and when it rotate so does the maparea.

So do you have an idea to put this together?

[davelf]

I found another jquery rotate, this one more simple than before.
here is the online

if you click on the center it will rotate 0 to 180 degree.
So i try to make 2 button.
first button: rotate it from 0 to 180
second button: rotate it from 180 to 360

But it don't work like i expect. So how to make those 2 button work? Is that something wrong with my script here:

$("#rotate1").click(function() {
	$("#img").rotate({ 
	   bind: 
		 { 
			click: function(){
				$(this).rotate({ angle:0,animateTo:180,easing: $.easing.easeInOutExpo })
			}
		 }    
	}); 
});

$("#rotate2").click(function() {
	$("#img").rotate({ 
	   bind: 
		 { 
			click: function(){
				$(this).rotate({ angle:180,animateTo:360,easing: $.easing.easeInOutExpo })
			}
		 }    
	}); 
});

Thank you