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

Origin XT RPG Network Home

A Strange HTML/Javascript/ WEBSITE question


Mar 19 2005, 07:13 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
Hey there, I am going to be making a new website. I will have it laid out like a 'links' section to 6 other websites. But I need some help with the coding.

Now I will attach an image, so it would be smart to open said image before continuing.

Attached File  meh.jpg ( 14.07k ) Number of downloads: 3


Right, now what I want to do is have the users click '1' and '2' and make the order of the pictures (a-f) to change. ie if I clicked on '2' then everything would move clockwise, a would now be in b's place, b in c's, c in d's etc etc. And anti-clockwise for '1'.

Now, I could do this easily with HTML, but it would mean that the page would have to reload every time you clicked '1' or '2'. This wont be much of a problem for broadband users, and people with the images stored in cache, but for a first time visitor to my site, with 56k dial up, it would be hellish to have to reload about 8 images each time, just to get things to move.

So I was wondering if someone knew how to code this better, so that the images moved as opposed to loading a different page with the images in a different order, as I would have done originally with HTML.

All ideas are welcome ssmile.gif and if you want a more detailed design I will see what I can do.

This post has been edited by Garlic Junior: Mar 19 2005, 07:13 PM
Post Options

 
Mar 19 2005, 09:16 PM (Post #2)
Not Odd anymore
* * * * * * * * * *
Posts: 45,875
Cash: 1,915,578 / 1,817,041,051
Group: Administrator
Joined: 7/10/02 09:48 PM
add a name and id tag onto the IMG tags.

Then refer to that, and set .location = 'new_image.gif'
Post Options

Mar 19 2005, 10:21 PM (Post #3)
Member Of The Year 2005
* * * * * * * * *
Posts: 10,363
Cash: -77,174 / 11,869,762
Group: Administrator
Joined: 2/28/03 10:58 AM
Sorry, that went all over my head. Could you please give me the full code? I assume it is Javascript? I suck at that stongue.gif so yeah, could you please type out the code for me?
Post Options

Mar 19 2005, 10:48 PM (Post #4)
Not Odd anymore
* * * * * * * * * *
Posts: 45,875
Cash: 1,915,578 / 1,817,041,051
Group: Administrator
Joined: 7/10/02 09:48 PM
so, let's say you got the following, for position_a, which has a default set at image_a.gif (ok?)

CODE:
<img src='image_a.gif' border='0' />


You can add an ID and NAME tag so it can be referred to, in Javascript:

CODE:
<img id='position_a' name='position_a' src='image_a.gif' border='0' />


Add the ID and NAME tags onto all 6 images, so all 6 can be referred to, through javascript.

And change the link from (example)

CODE:
<a href='~~~~~~~' onclick='some_function()'><img src='1.gif' border='0' /></a>


(Keep in mind 1.gif is the <| arrow... and it's an example. You can name the |> arrow image 2.gif)

to:

CODE:
<a href='javascript:void;' onclick='rotate("counter_clockwise")'><img src='1.gif' border='0' /></a>


for <| (image 1.gif)

and

CODE:
<a href='javascript:void;' onclick='rotate("clockwise")'><img src='2.gif' border='0' /></a>


for |> (Image 2.gif)

And in a script tag

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

function rotate(direction)
{


if(direction == 'clockwise')
{
// Rotate the array arr clockwise
}
else if (direction == 'counter_clockwise')
{
// Rotate the array arr counter clockwise
}

// and set it to the images a through f
}
</script>
Post Options

Mar 19 2005, 11:09 PM (Post #5)
Member Of The Year 2005
* * * * * * * * *
Posts: 10,363
Cash: -77,174 / 11,869,762
Group: Administrator
Joined: 2/28/03 10:58 AM
Didn't work. Tried:

CODE
<html>
<head>

<title>Untitled</title>

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

function rotate(direction)
{


if(direction == 'clockwise')
{
// Rotate the array arr clockwise
}
else if (direction == 'counter_clockwise')
{
// Rotate the array arr counter clockwise
}

// and set it to the images a through f
}
</script>

<body>
<a href='javascript:void;' onclick='rotate("counter_clockwise")'><img src='http://geocities.com/ftw_devoid/1.jpg' border='0' /></a>

<a href='javascript:void;' onclick='rotate("clockwise")'><img src='http://geocities.com/ftw_devoid/2.jpg' border='0' /></a><br><br><br>

<img id='position_a' name='position_a' src='http://geocities.com/ftw_devoid/a.jpg' border='0' />
<img id='position_b' name='position_b' src='http://geocities.com/ftw_devoid/b.jpg' border='0' />
<br><br>
<img id='position_c' name='position_c' src='http://geocities.com/ftw_devoid/c.jpg' border='0' />
<img id='position_d' name='position_d' src='http://geocities.com/ftw_devoid/d.jpg' border='0' />
<br><br>
<img id='position_e' name='position_e' src='http://geocities.com/ftw_devoid/e.jpg' border='0' />
<img id='position_f' name='position_f' src='http://geocities.com/ftw_devoid/f.jpg' border='0' />


</body>
</html>


Saved as http://geocities.com/ftw_devoid/testi.html

What have I done wrong?
Post Options

Mar 20 2005, 01:14 AM (Post #6)
Not Odd anymore
* * * * * * * * * *
Posts: 45,875
Cash: 1,915,578 / 1,817,041,051
Group: Administrator
Joined: 7/10/02 09:48 PM
bigeyes.gif;;; I was expecting you to write the rotate function... I just wrote in the comments so you would know what to do.

You got the basic idea right though. Just finish the rotate function, and place the JS part in the HEAD section...

If you don't know how to finish the rotate function... then reply.
Post Options

Mar 20 2005, 01:29 PM (Post #7)
Member Of The Year 2005
* * * * * * * * *
Posts: 10,363
Cash: -77,174 / 11,869,762
Group: Administrator
Joined: 2/28/03 10:58 AM
I ... don't ... know ... Javascript.
I ... want ... you ... to ... write ... the whole ... code ... out ... for ... me.

P ... l ... ea ... s ... e.
Post Options

Mar 20 2005, 09:18 PM (Post #8)
Not Odd anymore
* * * * * * * * * *
Posts: 45,875
Cash: 1,915,578 / 1,817,041,051
Group: Administrator
Joined: 7/10/02 09:48 PM
I'll work on it when I come home from my CM tests ssmile.gif I'll need to think a lil, though... because my JS is very rusty
Post Options

Mar 21 2005, 06:59 PM (Post #9)
Member Of The Year 2005
* * * * * * * * *
Posts: 10,363
Cash: -77,174 / 11,869,762
Group: Administrator
Joined: 2/28/03 10:58 AM
0_0 please hurry
Post Options

Mar 22 2005, 12:21 AM (Post #10)
Not Odd anymore
* * * * * * * * * *
Posts: 45,875
Cash: 1,915,578 / 1,817,041,051
Group: Administrator
Joined: 7/10/02 09:48 PM
QUOTE (Garlic Junior @ Mar 19 2005, 03:08 PM)
Didn't work. Tried:

CODE
<html>
<head>

<title>Untitled</title>

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

function rotate(direction)
{


if(direction == 'clockwise')
{
// Rotate the array arr clockwise
}
else if (direction == 'counter_clockwise')
{
// Rotate the array arr counter clockwise
}

// and set it to the images a through f
}
</script>

<body>
<a href='javascript:void;' onclick='rotate("counter_clockwise")'><img src='http://geocities.com/ftw_devoid/1.jpg' border='0' /></a>

<a href='javascript:void;' onclick='rotate("clockwise")'><img src='http://geocities.com/ftw_devoid/2.jpg' border='0' /></a><br><br><br>

<img id='position_a' name='position_a' src='http://geocities.com/ftw_devoid/a.jpg' border='0' />
<img id='position_b' name='position_b' src='http://geocities.com/ftw_devoid/b.jpg' border='0' />
<br><br>
<img id='position_c' name='position_c' src='http://geocities.com/ftw_devoid/c.jpg' border='0' />
<img id='position_d' name='position_d' src='http://geocities.com/ftw_devoid/d.jpg' border='0' />
<br><br>
<img id='position_e' name='position_e' src='http://geocities.com/ftw_devoid/e.jpg' border='0' />
<img id='position_f' name='position_f' src='http://geocities.com/ftw_devoid/f.jpg' border='0' />


</body>
</html>


Saved as http://geocities.com/ftw_devoid/testi.html

What have I done wrong?
*




CODE
<html>
<head>

<title>Untitled</title>

</head>
<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[-1] = tmp_arr[5];
tmp_arr[6] = tmp_arr[0];

if(direction == 'clockwise')
{
// Rotate the array arr clockwise
for(var i = 0; i < 6; i++)
{
arr[i] = tmp_arr[i+1];
}
}
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 = 'http://geocities.com/ftw_devoid/';
var suffix = '.jpg';

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

}
</script>

<body>
<a href='javascript:void;' onclick='rotate("counter_clockwise")'><img src='http://geocities.com/ftw_devoid/1.jpg' border='0' /></a>

<a href='javascript:void;' onclick='rotate("clockwise")'><img src='http://geocities.com/ftw_devoid/2.jpg' border='0' /></a><br><br><br>

<img id='position_a' name='position_a' src='http://geocities.com/ftw_devoid/a.jpg' border='0' />
<img id='position_b' name='position_b' src='http://geocities.com/ftw_devoid/b.jpg' border='0' />
<br><br>
<img id='position_c' name='position_c' src='http://geocities.com/ftw_devoid/c.jpg' border='0' />
<img id='position_d' name='position_d' src='http://geocities.com/ftw_devoid/d.jpg' border='0' />
<br><br>
<img id='position_e' name='position_e' src='http://geocities.com/ftw_devoid/e.jpg' border='0' />
<img id='position_f' name='position_f' src='http://geocities.com/ftw_devoid/f.jpg' border='0' />


</body>
</html>


Not sure if that works... At least the "document.position_a.location" part. Otherwise I think I got it.
Post Options

Mar 23 2005, 08:09 PM (Post #11)
Member Of The Year 2005
* * * * * * * * *
Posts: 10,363
Cash: -77,174 / 11,869,762
Group: Administrator
Joined: 2/28/03 10:58 AM
Clockwise works fine, Counter Clockwise doesn't. I tried changing some things but nothing worked. It seems to have a problem with negative numbers. When I click on it, it turns them all to 'f' o_0 similarly, if I click clockwise ... say twice, so a = c , b = d and so on, if I then click counter clockwise they all turn to b (ie f = b now ive clicked clockwise twice).

o_0 any clues as to how to fix this?
Post Options

Mar 24 2005, 04:20 AM (Post #12)
Not Odd anymore
* * * * * * * * * *
Posts: 45,875
Cash: 1,915,578 / 1,817,041,051
Group: Administrator
Joined: 7/10/02 09:48 PM
shifty.gif You're right. There's a problem with negative numbers...

There's another way: Do a check, and if i-1<0, then i=6...
Post Options

Mar 24 2005, 07:55 PM (Post #13)
Member Of The Year 2005
* * * * * * * * *
Posts: 10,363
Cash: -77,174 / 11,869,762
Group: Administrator
Joined: 2/28/03 10:58 AM
WTF


Dude, I know the maths, but for the last time - I don't know Javascript. You can't explain it to me, YOU have to write the code IN FULL for me. Please.

{Edit - OMG at last. I have been puzzling over this for about 24 hours now, and finally I got a solution. Instead of making it "i-1" (which was obviously where the problem lay), I made it "i+5", keeping it all positive.

So 0 would now become 5 (like it should), 1 would become 6 which would become 0 (still all positive and all correct), and with the addition of:

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];

.. well to cut a long story short, 0 becomes 5, 1 = 0 , 2 = 1, 3 = 2, 4 = 3, 5 = 4, and Chris = Happy ssmile.gif thanks a bunch Grand, you did the most work, but between us maths genii we completed the equation whilst staying in the positive throughout sbiggrin.gif good job ... grand job stongue.gif

*goes off to work on GFX now*

This post has been edited by Garlic Junior: Mar 24 2005, 08:18 PM
Post Options

Mar 25 2005, 12:03 AM (Post #14)
Not Odd anymore
* * * * * * * * * *
Posts: 45,875
Cash: 1,915,578 / 1,817,041,051
Group: Administrator
Joined: 7/10/02 09:48 PM
That works too...

Ok, topic closed.


(Edit- Correction, it works ... not too, as yours doesnt work ... stongue.gif (garlic))

This post has been edited by Garlic Junior: Mar 25 2005, 08:45 PM
Post Options