Small corection needed (Cell Rotation with Javascript)

[RomanRusso]

Hie everybody,
Here at this forum I have found something what I was looking for - rotation of cells in html table, here is the link
http://www.thescripts.com/forum/thre...9304-2-10.html
The gue named RobD posted a nice script there. You can easily modify it for the needs of your table, but one problem occured on my way, maybe somebody can help.
For instance if there is <a> tags inside one table cell, the script willl rotate only the first one. Can anyone give me hint of how to force it to rotate each image I am having in my table.

this.pix.push(c ell.getElements ByTagName('IMG' )[0].src); - this string finds src of the first image only. Maybe I need to change some attributes or something else. I am not really a specialist in Javascript.
thsi string, I guess, write elemenst inside the cell - (el = cell.getElement sByTagName('A')[0]).lastChild.nod eValue =
this.txt[idx];
Can anyone tell me what is lastChild.nodeV alue and [0] ??
Thanks in advance

[Banfa]

getElementsByTa gName returns a collection (or an array) of items the [0] is then referencing the 1st item in that collection, you can access the 2nd item with [1] the 3rd with [2] and so on. You can find the number of items with the length method

[php]
var collection = cell.getElement sByTagName('A') ;

for( var ix=0; ix < collection.leng th; ix++ )
{
alert( "Link " + ix + " = " + collection[ix].value );
}
[/php]

lastChild refers to the last child element of the current element (a child being an element contain by the current element).

[RomanRusso]

Had couple of very busy days in university, there is small break before Psychology test on Thursday.
If you have any chance of answering it would be great.
I will eleborate on what I need to do for this university project.
So I have a html table with cell randomly placed inside of it, every time the page is loaded :D
My cell looks like this
[HTML]<td>
<div>
<img src ="/1.PNG"
width ="200" height ="200" border="0"
usemap ="#1" />
<map id ="1"
name="1">
<area shape ="rect" coords ="0,0,100,10 0"
href ="/info1" target ="_blank"
alt="info 1" />
<area shape ="rect" coords ="100,100,200,2 00"
href ="/info2" target ="_blank"
alt="info 2" />
</map>
</div>
</td>
[/HTML](I would like to link half of image to first page another to second page)

I think I asked a bit wrong question at first, sorry, but what I really need is to rotate href for both areas, as well as other attributes of 2nd area tag. Thanks for giving me a hint but would you specify (I am not programmer, so it is difficult for me) where to put the code you gave me? and you wrote that it is a php code!
Here the script I am using (found on this forum by the way)
<script>

//<![CDATA[
 
/**********************************************/
var table_ids = [ 'maintable' ];
/**********************************************/
 
var alldivs = document.getElementsByTagName('DIV');
 
 
 
 
function Rotator(table_id)
{
this.table = document.getElementById(table_id);
this.cells = this.table.getElementsByTagName('TD');
this.ncells = this.cells.length;
this.pix = [];
this.hrefs = [];
this.id = [];
this.n = [];
this.shapehref = [];
this.coordshref = [];
this.idx_array = new Array(this.ncells);
 
function read()
{
var cell, n = 0;
while (cell = this.cells.item(n++))
{
this.pix.push(cell.getElementsByTagName('IMG')[0].src);
this.hrefs.push(cell.getElementsByTagName('AREA')[0].href);
this.id.push(cell.getElementsByTagName('AREA')[0].alt);
this.n.push(cell.getElementsByTagName('IMG')[0].alt);
this.shapehref.push(cell.getElementsByTagName('AREA')[0].shape);
this.coordshref.push(cell.getElementsByTagName('AREA')[0].coords);
} this.shuffle();
}
this.read = read;
 
function shuffle()
{
var idx, i, ind1, ind2, temp;
for (i = 0; i < this.ncells; ++i)
this.idx_array[i] = i;
for (i = 0; i < this.ncells; ++i)
{
ind1 = Math.floor(Math.random() * this.ncells);
ind2 = Math.floor(Math.random() * this.ncells);
temp = this.idx_array[ind1];
this.idx_array[ind1] = this.idx_array[ind2];
this.idx_array[ind2] = temp;
} this.write();
}
this.shuffle = shuffle;
 
function write()
{
var cell, el, idx, n = 0;
while (cell = this.cells.item(n))
{
idx = this.idx_array[n++];
cell.getElementsByTagName('IMG')[0].src = this.pix[idx];
(el = cell.getElementsByTagName('AREA')[0]).href =
this.hrefs[idx];
(el = cell.getElementsByTagName('AREA')[0]).alt =
this.id[idx];
(el = cell.getElementsByTagName('IMG')[0]).alt =
this.n[idx];
(el = cell.getElementsByTagName('AREA')[0]).shape =
this.shapehref[idx];
(el = cell.getElementsByTagName('AREA')[0]).coords =
this.coordshref[idx];
} alldivs.item(0).style.visibility = 'visible';
}
this.write = write;
 
this.read();
}
 
onload = function()
{
if (document.getElementById && document.createElement)
for (var i = 0; i < table_ids.length; ++i)
new Rotator(table_ids[i]);
} 
 

If you know the answer, please help. It would be great if I could do this with your help :)

[Banfa]

I will get to this but I just a bit tired right now. It would be helpful if you could post a link to the actual page that needs work or if it is not only yet attach it to a post (you will need to go advanced and rename the file to a text file to do this).

[RomanRusso]

Here I am attaching a text file with some comments inside, I hope everything what is there is pretty clear. English is my second language by the way.
Thanks again for helping, I spent so much time trying to solve this problem...
I really cannot show the page because I had it maybe a week ago (my friend kindly gave me password and I could test it, so I can assure you the script is working), but right now all I can test it on university server only, but I do not think somebody can access it form outside.

[Banfa]

Sorry must of missed the post, unfortunately once again it is midnight here but I will try to look at it tomorrow.

[Banfa]

A-ha, right I can see the problem and I have the answer.

The problem is that when the images are display randomly the 1st link (top left) moves with the image but the second link (bottom right) stays in it's original table cell instead of moving with the image.

The answer is that you are only altering the data for the first link (which I think you knew) and what I have already said does apply, because you are only accessing the first elements in the collections.

In this line (by the way none of what I have posted is php I just use the php tages because it colours the code and makes it easier to follow, it is all Javascript)

[php]
this.hrefs.push (cell.getElemen tsByTagName('AR EA')[0].href);
[/php]

the function call cell.getElement sByTagName('ARE A') returns a collection, as I said. A collection is an array of objects so cell.getElement sByTagName('ARE A')[0] references the first array element or the first AREA tag in the cell. However there are 2 AREA tags in the cell and you wish to swop the href values of both of them so you will need to access the second array element as well cell.getElement sByTagName('ARE A')[1].

To fix the script everywhere you use the this.hrefs0 object you need to double up to handle not just the first href but the second href to so this

[php]
this.hrefs0 = [];

...

this.hrefs0.pus h(cell.getEleme ntsByTagName('A REA')[0].href);

...

(el = cell.getElement sByTagName('ARE A')[0]).href = this.hrefs0[idx];
[/php]

becomes this

[php]
this.hrefs0 = [];
this.hrefs1 = [];

...

this.hrefs0.pus h(cell.getEleme ntsByTagName('A REA')[0].href);
this.hrefs1.pus h(cell.getEleme ntsByTagName('A REA')[1].href);

...

(el = cell.getElement sByTagName('ARE A')[0]).href = this.hrefs0[idx];
(el = cell.getElement sByTagName('ARE A')[1]).href = this.hrefs1[idx];
[/php]

Note, I have left out vast tracts of code to highlight the changes

Also I think this

[php](el = cell.getElement sByTagName('ARE A')[0]).href = this.hrefs0[idx];[/php]

will work just as well if it is written like

[php]cell.getElement sByTagName('ARE A')[0].href = this.hrefs0[idx];[/php]



Lastly at the moment you are swopping the href values of the AREAs, however if you need to have different MAPs associated with each image (i.e. not as it currently stands all MAPs are geometrically the same) then it might be easier to swop the usemap value of each image rather than altering the AREA values directly.

[Banfa]

P.S. here is my altered version of the code you posted

[RomanRusso]

Something weird happens, I was trying to do what you proposed here myself even before you posted the reply, but for some strange reason it cannot do this. Simple can't see another area tag. CHanging [0] to [1] is not working(((((
But as you proposed I was experimenting with usemap, but it cant see it as well. Would you be so kind to make it clear of how to swap usemap since the way I am doing is no good?
Just give me a hint about usemap
Thanks again

P.S. the thing is that when I suplemented my code with all these three line hrefs1 with [1], it stops rotating((((