PDA

View Full Version : Problem with adding link are on JS Rotate



davelf
02-28-2012, 11:09 AM
Hi, i have problem with adding some link on JS Rotate.
Here is the Online Version : rotate image (http://duniagenerasiplatinum.com/rotate/)

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
02-28-2012, 12:01 PM
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
02-29-2012, 01:32 AM
Hi vwphillips thanks for your fast response,

what exactly that i need to work on this project is like this:
http://www.dynamicdrive.com/forums/attachment.php?attachmentid=4376&stc=1&d=1330478923

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
02-29-2012, 03:12 AM
I found another jquery rotate, this one more simple than before.
here is the online (http://metablast.net/rotate2/)

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