changing image when clicked

i'm currently redesigning my portfolio, and i need a little help with a certain part. i have some simple codes that allows a link to have two targets, which are two iframes in my case. when an image is clicked, two seperate pages are opened in two seperate pages. but i also want the clicked image to change, as well as the links that are to open in the iframes.

preview: http://rockitstudios.890m.com/v3/index.html
codes so far: http://rockitstudios.890m.com/v3/index.txt

if you click the first image on the top banner of 5 images, the very top banner (an iframe) will switch to that image, and the white in the middle of the page (also an iframe) will change to black. so, does anybody know how i could go about randomly changing that thumbed image, with the new thumb having it's own links to open in the iframes?

I did something similar to this a while back.. not entirely though, so I won't post my code & confuse you. Just make sure your final code is compatible with all browsers - an almost impossible feat.

-♥Angie

use this:

Code:

---

function change(n, d) { //n=number of link, d=id of div
  var ls=[
    ["/v3/index/group1/1.png", "/v3/index/group1/1.html", "/v3/black.html"], //format: image location, frame1 location, frame2 location
  ];
  n=--n>=0&&n<ls.length?n:0;
  top.iframe1.location.href = ls[n][1];
  top.iframe2.location.href = ls[n][2];
  clearDiv(d); //clear the div;
  div=document.getElementById(d);
  a=document.createElement("a");
  img=document.createElement("img");
 
  img.src=ls[n][0];
  img.style.border="0";
 
  a.href="javascript:change("+Math.floor(Math.random()*ls.length)+", '"+d+"')";
  a.appendChild(img);
  div.appendChild(a);
}
function clearDiv(d) {
  div=document.getElementById(d);
  while (div.firstChild) {
    div.removeChild(div.firstChild);
  }
}
</script>

---

where the link is javascript:change(number, div id)
and for each link add this to the js var ls:[image src, frame 1 href, frame 2, href]