Rotating image gallery - highlight border of current image displayed.

Ok, so this is probably something simple, but I'm no javascript queen, so if someone could help me do this I would be so appreciative.

I'm using Javascript to rotate the 5 featured stories I choose via a Wordpress plugin. So right now it looks like this:

http://cssgirl.com/demos/slashfilm/wordpress

I've put the two code samples on pastebin also if that makes it easier for anyone to read (Javascript | HTML )

So, via this plugin I'm given several variables to use to display the image, the title, the tagline and url. I'm using a very simple (and probably really clunky) Javascript to rotate the big image (and it's attributes) every few seconds. What I want to do is have the border of the thumbnail change when the big images matches the thumbnail. So for when the "img5" story shows in the rotater I want the thumbnail of that image to have a border.

This is the javascript I am currently using:

Code:

<script language="JavaScript1.2">

var howOften = 5; //number often in seconds to rotate
var current = 0; //start the counter at 0

// place your images, text, etc in the array elements here
var items = new Array();
    items[0]="<a href=\"<?php ss_get(1, 'story_url'); ?>\"><img src=\"<?php ss_get(1, 'image_url'); ?>\" alt=\"\" style=\"float:left\" id=\"img1\" /><div class=\"rotate-stry-bg\"></div><div class=\"rotate-stry-txt\"><h1><?php ss_get(1, 'heading'); ?></h1><?php ss_get(1, 'subheading'); ?></div></a>";
    items[1]="<a href=\"<?php ss_get(2, 'story_url'); ?>\"><img src=\"<?php ss_get(2, 'image_url'); ?>\" alt=\"\" style=\"float:left\" id=\"img2\" /><div class=\"rotate-stry-bg\"></div><div class=\"rotate-stry-txt\"><h1><?php ss_get(2, 'heading'); ?></h1><?php ss_get(2, 'subheading'); ?></div></a>";
    items[2]="<a href=\"<?php ss_get(3, 'story_url'); ?>\"><img src=\"<?php ss_get(3, 'image_url'); ?>\" alt=\"\" style=\"float:left\" id=\"img3\" /><div class=\"rotate-stry-bg\"></div><div class=\"rotate-stry-txt\"><h1><?php ss_get(3, 'heading'); ?></h1><?php ss_get(3, 'subheading'); ?></div></a>";
    items[3]="<a href=\"<?php ss_get(4, 'story_url'); ?>\"><img src=\"<?php ss_get(4, 'image_url'); ?>\" alt=\"\" style=\"float:left\" id=\"img4\" /><div class=\"rotate-stry-bg\"></div><div class=\"rotate-stry-txt\"><h1><?php ss_get(4, 'heading'); ?></h1><?php ss_get(4, 'subheading'); ?></div></a>";
    items[4]="<a href=\"<?php ss_get(5, 'story_url'); ?>\"><img src=\"<?php ss_get(5, 'image_url'); ?>\" alt=\"\" style=\"float:left\" id=\"img5\" /><div class=\"rotate-stry-bg\"></div><div class=\"rotate-stry-txt\"><h1><?php ss_get(5, 'heading'); ?></h1><?php ss_get(5, 'subheading'); ?></div></a>";

function rotater() {
    document.getElementById("placeholder").innerHTML = items[current];
    current = (current==items.length-1) ? 0 : current + 1;
    setTimeout("rotater()",howOften*1000);
}

window.onload=rotater;
//->
</script>

So I have a <p> tag in my body section and then the large image is rotated via that.

I know the logic of what I want, but I'm not sure how to accomplish that via javascript. I know I want it to say "if the ID of the big image is img1 than put a border on the image with the id of img1_thumb (each of the smaller images has an id of img#_thumb)", if it's img2 than the border goes off img1 and onto img2, etc up until img5/img5_thumb.


This is currently what I have in the body where the image displays:

Code:

<div class="entry">
        <h3>Recent Stories</h3>
<p class="top-feat" id="placeholder"></p>
<p class="sub-feat"><a href="<?php ss_get(1, 'story_url'); ?>"><img src="<?php ss_get(1, 'image_url'); ?>" width="81" height="44" id="img1_thumb" alt="" /></a> <a href="<?php ss_get(2, 'story_url'); ?>" ><img src="<?php ss_get(2, 'image_url'); ?>" width="81" height="44" id="img2_thumb" alt="" /></a> <a href="<?php ss_get(3, 'story_url'); ?>"><img src="<?php ss_get(3, 'image_url'); ?>" width="81" height="44" id="img3_thumb" alt="" /></a> <a href="<?php ss_get(4, 'story_url'); ?>"><img src="<?php ss_get(4, 'image_url'); ?>" width="81" height="44" id="img4_thumb" alt="" /></a> <a href="<?php ss_get(5, 'story_url'); ?>"><img src="<?php ss_get(5, 'image_url'); ?>" width="81" height="44" id="img5_thumb" alt="" /></a></p>

        </div>

I'm in the process of learning Javascript/DOM scripting, but just haven't quite got what it takes to code it without the expert knowledge of others, so again anyone that could help it would be great.

[Join us @ facebook]

Why don't you do that with css? You can just add a border attribute in the style of every img.

Why don't you do that with css? You can just add a border attribute in the style of every img.

Because the thumbnail image would only have the border around it when the larger image is being displayed. The main image rotates between 5 images. As the larger images is on I want the smaller thumbnail to have the border highlighted.

[Join us @ facebook]

Now I got it. You need to add something like this (I am not sure for the attribute) in the rotater() function :

document.getElementById("img" + current + "_thumb").border = 1;
if ( current > 0 ) {
document.getElementById("img" + ( current - 1) + "_thumb").border = 0;
}else{
  document.getElementById("img0_thumb").border = 0;
}

Also to make this work start thumbnails from number 0 instead of 1. I think this will work.

[Guest]

[35.717]

Googlebot, Yahoo crawler, Baidu Spider