designforweb.co.uk/blog

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 so 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:

Javascript

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:

HTML

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.

This entry was posted on Wednesday, January 9th, 2008 at 2:52 am and is filed under Web programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.