Help With Cycling/Printing Array Data

[juvenall]

Hey guys, I need a little help trying to get something done. Here's the deal..

We have a set of three boxes. In order: a previous, a content box and a next box.

Here we have the HTML for the boxes.

<table id="magic-table">
<tr>
<td align="left" id="sPrevious"><div class="box-fill"><a href="#" style="width:52px;">&nbsp;&lt; Previous</a></div></td>

<td align="center" id="sCenter"><div class="box-fill"><a href="#" style="width:97px;">whatever</a></div></td>

<td align="right" id="sNext"><div class="box-fill"><a href="#" style="width:35px;">Next &gt;&nbsp;</a></div></td></tr>
</table>

Nothing fancy. We just have 3 table cells that, when moused over, highlight (through pure CSS).

Now, here's what I need to figure out. Without using an eventHandler in that html, I need to have that center content change on mouseOver of the Previous/Next cells bassed on an array with just the previous and next like -
browse = ('Previous Item','Next Item');

In other words, when the user mousesOver next, the center box will display the next array item. The previous will show the one before it.

I know that all sounds a little vague, but any help or pointers anyone can throw this JS newb would be greated with many, many thanks!

[RonPK]

Hello juvenall, welcome to WebmasterWorld.

This might set you on the right track:

<script type="text/javascript">
<!-- 
window.onload = function init() {
document.getElementById("sPrevious").onmouseover = altercellcontents;
document.getElementById("sNext").onmouseover = altercellcontents;
}
var mytext = new Array('test one','test two','test three');
var counter = 0;
function altercellcontents(e) {
if (window.event) e = window.event;
var srcID = e.srcElement? e.srcElement.id : e.target.id;
document.getElementById("sCenter").innerHTML = mytext[counter];
srcID == "sNext"? 
(counter == mytext.length - 1? counter = 0 : counter++) : 
(counter == 0? counter = mytext.length - 1 : counter--) ;
}
// -->
</script>

On load, it attaches event handlers to the 'browse' cells. The event handler displays the array element corresponding with the counter variable. Next, that counter gets increased or decreased, with respect for the length of the array. (I hope my gibberish english makes sense...).

I tested it in IE6, Mozilla 1.6 and Opera 7.23, all on Windows. It works, allthough I'm not too happy with the shaky way it works.

[juvenall]

Thanks for the welcome and for the help!

I managed to reproduce it, and I'm sorta understanding what it's doing. Now, how would I go about isolating the toggle? That is, when I tested it out, mouseing over the next button more then once would toggle through all three elements in the array. Any advice here? Ideally, I'd like it to go to "next" (for example) and then stop.

Again though, thanks a TON for the help so far! :D :D

[RonPK]

So, on every page the cell in the middle should change only once? Even if the user hovers the link more than once?

[juvenall]

Bingo! On page load, the default text is shown. When a user does a mouseover on the "Next" cell, the center will only show the text "Next". Mouseing over "Previous" will only show the text "Previous". Nothing too fancy in the end, but a JS newb like myself is easily baffled..lol.

Yet again, thank you for anything you can do!

[RonPK]

So... if a visitor hovers over the 'next' cell, it should say 'next' in the middle cell? Same for 'previous'? That's it?

But why do want to store the texts in an array? It makes me think i'm still not getting it completely...

[juvenall]

The data is going to be created through a backend program and plugged into the array. I'm stuck doing it that way as no one wants to redo that mosnter..lol.