It appears you have not yet registered with our community. To register please click here.

Origin XT RPG Network Home







XT Project Introduction
Blah blah intro to this place. To be composed later.

Javascript - Rotating Images/Links


Mar 6 2006, 08:05 PM (Post #1)
Member Of The Year 2005
* * * * * * * * *
Posts: 10,363
Cash: -77,174 / 11,869,762
Group: Administrator
Joined: 2/28/03 10:58 AM
Step 1. Envision what you want. For this example, I had 6 images linking to different websites of mine. I wanted them arranged in a clock-formation, with two arrows at the top for rotating the clock, along with a banner in the center, like this:

CODE
< >

+ - 1 - + - 2 - +
6 [...banner...] 3
+ - 5 - + - 4 - +


A picture of the design can be seen here.


Step 2. Create the images. For this example, you will need 4 versions of each image - one the right way up (for the first and second position), one flipped on it's right hand side (for the third position), one upside down (positions four and five) and one flipped on it's other side (the final position).

Step 2a. An easy way to do this is to create the six images as they would appear in position 1. Then save these images as '1a.jpg' through to '6a.jpg'. (You do not need to use .jpg). Then simply just go into MS Paint, open '1a.jpg', press Ctrl + R, select '90 degrees' and then save the rotated image as '1b.jpg'. Press Ctrl + R again, hit '90 degrees' again, and save the now upside down image as '1c.jpg'. Repeat the process a third time, saving the new picture as '1b.jpg', and you now have your four images. Now do this for all 6 pictures.


Step 3. The code. A working example of the above design can be found here. You can have a look at the source code yourself if you like, otherwise follow these steps.

Step 3a. Copy and past this code into the <HEAD> section of your page. If you do not understand what this means, I suggest you read a beginner's guide to HTML.

CODE
<script type='text/javascript'>
arr = new Array("a","b","c","d","e","f");

document.position_a.src = new Image();
document.position_b.src = new Image();
document.position_c.src = new Image();
document.position_d.src = new Image();
document.position_e.src = new Image();
document.position_f.src = new Image();

function rotate(direction)
{
tmp_arr = arr;
tmp_arr[6] = tmp_arr[0];
tmp_arr[7] = tmp_arr[1];
tmp_arr[8] = tmp_arr[2];
tmp_arr[9] = tmp_arr[3];
tmp_arr[10] = tmp_arr[4];
tmp_arr[11] = tmp_arr[5];

if(direction == 'clockwise')
{
// Rotate the array arr clockwise
for(var i = 0; i < 6; i++)
{
arr[i] = tmp_arr[i+5];
}
}
else if (direction == 'counter_clockwise')
{
// Rotate the array arr counter clockwise
for(var i = 0; i < 6; i++)
{
arr[i] = tmp_arr[i+1];
}
}

var prefix = 'URL';
var a = 'a';
var b = 'b';
var c = 'c';
var d = 'd';
var suffix = '.jpg';

document.position_a.src = prefix+arr[0]+a+suffix;
document.position_b.src = prefix+arr[1]+a+suffix;
document.position_c.src = prefix+arr[5]+d+suffix;
document.position_d.src = prefix+arr[2]+b+suffix;
document.position_e.src = prefix+arr[4]+c+suffix;
document.position_f.src = prefix+arr[3]+c+suffix;

}
</script>



Step 3b. Change the line " var prefix = 'URL'; ". Replace URL with the URL of the location of your images. For example, if your picture is stored at http://www.originxt.com/pictures/1a.jpg then change the line to read " var prefix = 'http://www.originxt.com/pictures/'; ".

Step 3c. Copy and paste the following code into the body section of your website.

CODE
<center>

<a href='javascript:void;' onclick='rotate("counter_clockwise")'><img src='http://geocities.com/ftw_devoid/amalgamut/1.jpg' border='0' /></a><img src='http://geocities.com/ftw_devoid/amalgamut/z.jpg' width='300' height='200'><a href='javascript:void;' onclick='rotate("clockwise")'><img src='http://geocities.com/ftw_devoid/amalgamut/2.jpg' border='0' /></a><br>

<img src='http://geocities.com/ftw_devoid/amalgamut/z.jpg' height='30' width='700'><br>

<img src='http://geocities.com/ftw_devoid/amalgamut/2x1.jpg'><img id='position_a' name='position_a' src='http://geocities.com/ftw_devoid/amalgamut/aa.jpg' border='0' /><img src='http://geocities.com/ftw_devoid/amalgamut/2x2.jpg'><img id='position_b' name='position_b' src='http://geocities.com/ftw_devoid/amalgamut/ba.jpg' border='0' /><img src='http://geocities.com/ftw_devoid/amalgamut/2x3.jpg'><br>

<img id='position_c' name='position_c' src='http://geocities.com/ftw_devoid/amalgamut/fd.jpg' border='0' /><img src='http://geocities.com/ftw_devoid/amalgamut/z.jpg' width=50 height=180><img src='http://geocities.com/ftw_devoid/amalgamut/middle.jpg' height=180 width=400><img src='http://geocities.com/ftw_devoid/amalgamut/z.jpg' height=180 width=50><img id='position_d' name='position_d' src='http://geocities.com/ftw_devoid/amalgamut/db.jpg' border='0' /><br>

<img src='http://geocities.com/ftw_devoid/amalgamut/4x1.jpg'><img id='position_e' name='position_e' src='http://geocities.com/ftw_devoid/amalgamut/ec.jpg' border='0' /><img src='http://geocities.com/ftw_devoid/amalgamut/4x2.jpg'><img id='position_f' name='position_f' src='http://geocities.com/ftw_devoid/amalgamut/cc.jpg' border='0' /><img src='http://geocities.com/ftw_devoid/amalgamut/4x3.jpg'>

</center>



Step 3d. In every instance where you see the URL "http://geocities.com/ftw_devoid/amalgamut/", you should replace this with the URL where your images are stored. Using the example in Step 3b, you would change it to read "http://www.originxt.com/pictures/". Also note that there are images 1.jpg, z.jpg, 4x1.jpg, middle.jpg etc. These are the two arrows at the top of the screen, the banner in the middle and the various + and - signs in the border design, as well as a black picture which I used to make placement of the arrows easier.

Step 4. Experiment with your own design and make changes to this code. There are a variety of uses for this code, including portals, games, etc.

It should hopefully be pretty obvious to see the essential workings of this code, even to novices. If you do require some more detailed information, just ask me.

- Chris
chris@originxt.com



(P.S. Many thanks to Grand for helping me with this particular code. I had originally tried to make something that physically rotated the images, but I had to compromise and create this as a trade-off of having less complicated coding. If you wish to read the evolution of this code, please check out these two topics on our forums - http://originxt.com/node/11142 and http://originxt.com/node/11141 )
Post Options

 
Mar 31 2007, 10:42 PM (Post #2)
Member Of The Year 2005
* * * * * * * * *
Posts: 10,363
Cash: -77,174 / 11,869,762
Group: Administrator
Joined: 2/28/03 10:58 AM
Turned it into an Article, Grand sbiggrin.gif hope you like it!
Post Options

Apr 1 2007, 01:26 AM (Post #3)
Not Odd anymore
* * * * * * * * * *
Posts: 45,875
Cash: 1,915,578 / 1,817,041,051
Group: Administrator
Joined: 7/10/02 09:48 PM
sbiggrin.gif I do.

The only problem I see is the non-conventional form of defining images via the src element:
CODE
document.position_a.src = new Image();
document.position_b.src = new Image();
document.position_c.src = new Image();
document.position_d.src = new Image();
document.position_e.src = new Image();
document.position_f.src = new Image();

Instead, I think you should use a for loop and define them without the .src element, so you can have as many images as you want.
Post Options

Apr 1 2007, 02:15 AM (Post #4)
Member Of The Year 2005
* * * * * * * * *
Posts: 10,363
Cash: -77,174 / 11,869,762
Group: Administrator
Joined: 2/28/03 10:58 AM
Give me the new code and I'll test it out then ssmile.gif
Post Options