Twirly Thingy

**simonjones** · 07-14-2008, 09:02 PM

I’m after an interactive rotating image . . . something like this: http://www.pictures-on-walls.com/Twirly%20thingy.php, only free. Any ideas would be most welcome. Thanks.

simonjones2001uk@yahoo.co.uk

**Nile** · 07-14-2008, 09:08 PM

It'd be pretty easy, I could get it to do only one way if you want. But it would require a lot of images.

**simonjones** · 07-14-2008, 09:20 PM

Sorry, how do you mean, you could get it to do only one way? Excuse me for being dull.

**Nile** · 07-14-2008, 09:36 PM

Like, with this flash applet when you move your cursor right, it moves right. And when you move your cursor left, it moves left. 1) I would do this with javascript 2) It would only go right.

**simonjones** · 07-14-2008, 09:42 PM

That would be great. How many images would you require? This took 36, which I can send to you?

**Nile** · 07-14-2008, 10:04 PM

Ok, send them to : jeremyfifty9@gmail.com, I'll be posting the code here. Not in the email. This way others can see the script.

**Nile** · 07-15-2008, 02:04 PM

Now, my script was this if you were wondering:
Script.js

Code:

var imageSlides = ['01.gif','02.gif','03.gif','04.gif']; //Add as menu as you want, seperate by commas
var tell = true;
function rotateImage(el,rotateNum){
var divEl = document.getElementById(el);
divEl.getElementsByTagName('img')[0].src=imageSlides[rotateNum];
if(tell){
divEl["onmouseover"] = function(){ tell=false };
if(rotateNum == imageSlides.length){
rotateNum = 0;
}
else {
rotateNum += 1;
}
setTimeout("rotateImage('"+el+"',"+rotateNum+")",100); //time delay
}
else {
divEl["onmousemove"] = function() { rotateNum = (rotateNum==imageSlides.length) ? 0 : rotateNum+1; rotateImage(el,rotateNum) };
}
}

Run.html

Code:

<html>
<head>
<title>Image Rotation</title>
<script type="text/javascript" src="script.js">
//Script made by: Niler, visit him at http://Niler.net Please don't remove this notice.
</script>
<style type="text/css">
#rotation {
padding: 15px;
border: 1px solid black;
width: 500px;
text-align: center;
}
</style>
</head>
<body onLoad="rotateImage('rotation',0);">
<div id="rotation"><img src='image.png'/></div>
</body>
</html>

Now, yes. I know. I should've added a <noscript> tag some where. But doesn't really matter to me.

**simonjones** · 07-15-2008, 05:57 PM

Thanks again, looks great

**Nile** · 07-15-2008, 09:24 PM

Ok, simonjones. Please use the following script, this one works in Safari, and Internet Exporer:

Code:

var imageSlides = ['01.png','02.png','03.png','04.png','05.png','06.png','07.png'];
var tell = true;
function rotateImage(el,rotateNum){
var divEl = document.getElementById(el);
divEl.getElementsByTagName('img')[0].src=imageSlides[rotateNum];
if(tell){
divEl["onmouseover"] = function(){ tell=false };
if(rotateNum == imageSlides.length){
rotateNum = 0;
}
else {
rotateNum += 1;
if(imageSlides[rotateNum] == undefined){
rotateNum = 0;
}
}
setTimeout("rotateImage('"+el+"',"+rotateNum+")",100);
}
else {
divEl["onmousemove"] = function() { rotateNum = (rotateNum==imageSlides.length) ? 0 : rotateNum+1; rotateImage(el,rotateNum) };
}
}

Change the highlighted line(first line), with the first line of your other code.