Hello everyone,
I have three rotating images and I like to have numbers under the image example 1 2 3 that rotates as the image changes. An example is:
http://abcnews.go.com/
So far I am able to show the slide numbers, my problem is to click on the number and to take me to that particular slide. Any clue is greatly apprecitated. Thanks mperez5

Code:
<script>
var my_Dir = new Array();
var martin_message = new Array();
martin_message[1]  = "Description of my first image";
martin_message[2]  = "Second image description"; 
martin_message[3]  = "The prev from the last image description";

var martin_counter = new Array();
martin_counter[1]  = "<u>1</u> 2 3";
martin_counter[2]  = "1 <u>2</u> 3"; 
martin_counter[3]  = "1 2 <u>3</u>";

var my_images = new Array();
var SLIDE_load = new Array();
var SLIDE_status, SLIDE_timeout;
var SLIDE_actual = 1;
var SLIDE_speed = 2000;
var SLIDE_fade = 2;
for (my_Dir = 1; my_Dir <= martin_message.length-1; my_Dir++)
{
  my_images[my_Dir] = 'images2/'+ my_Dir + '.jpg';
  SLIDE_load[my_Dir] = new Image();
  SLIDE_load[my_Dir].src = my_images[my_Dir];
}

for (my_Dir = 1; my_Dir <= martin_counter.length-1; my_Dir++)
{
}
var SLIDE_count = my_images.length-1;

function SLIDE_start()
{
  document.getElementById('SLIDE_play').disabled = false;
  document.images.SLIDE_picBox.src = SLIDE_load[SLIDE_actual].src;
  document.getElementById("SLIDE_textBox").innerHTML= martin_message[SLIDE_actual];
  document.getElementById("SLIDE_counter").innerHTML= martin_counter[SLIDE_actual];
  
  SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_play()
{
  document.getElementById('SLIDE_play').disabled = true;
  document.getElementById('SLIDE_pause').disabled = false;
  SLIDE_actual++;
  SLIDE_slide();
  SLIDE_status = 'SLIDE_play';
  SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_pause()
{
  clearTimeout(SLIDE_timeout);
  SLIDE_status = 'SLIDE_pause';
  document.getElementById('SLIDE_pause').disabled = true;
  document.getElementById('SLIDE_play').disabled = false; 
}
function SLIDE_back()
{
  clearTimeout(SLIDE_timeout);
  SLIDE_actual--;
  SLIDE_slide();
  if (SLIDE_status != 'SLIDE_pause') SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_forward()
{
  clearTimeout(SLIDE_timeout);
  SLIDE_actual++;
  SLIDE_slide()
  if (SLIDE_status != 'SLIDE_pause') SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_slide()
{
  if (SLIDE_status != 'SLIDE_pause')
  {
    document.getElementById('SLIDE_play').disabled = true;
    document.getElementById('SLIDE_pause').disabled = false;
  }
  if (SLIDE_actual > (SLIDE_count)) SLIDE_actual= 1;
  if (SLIDE_actual < 1) SLIDE_actual = SLIDE_count;
  if (document.all)
  {
    document.getElementById("SLIDE_textBox").style.background = "transparent";
    document.images.SLIDE_picBox.style.filter="blendTrans(duration=2)";
    document.images.SLIDE_picBox.style.filter="blendTrans(duration=SLIDE_fade)";
    document.images.SLIDE_picBox.filters.blendTrans.Apply();
  }
    document.images.SLIDE_picBox.src = SLIDE_load[SLIDE_actual].src;
  if (document.getElementById) document.getElementById("SLIDE_textBox").innerHTML= martin_message[SLIDE_actual];
  if (document.getElementById) document.getElementById("SLIDE_counter").innerHTML= martin_counter[SLIDE_actual]; 
  if (document.all) document.images.SLIDE_picBox.filters.blendTrans.Play();
}
function SLIDE_speeds(SLIDE_valgt)
{
  SLIDE_speed = SLIDE_valgt.options[SLIDE_valgt.selectedIndex].value;
}

</script>
</head>
<body bgcolor="#000000" onload="SLIDE_start();">
<center>
<table width="200" border="1">
  <tr>
    <td colspan="2"><img name="SLIDE_picBox" border="0"><font color="#FFFFFF"></td>
  </tr>
  <tr>
    <td height="50" colspan="2">
	<a href="javascript:newpage()"><font color="#FFFFFF"><b><div id="SLIDE_textBox2"></div></b></font></a>
	<font color="#FFFFFF"><b><div id="SLIDE_textBox"></div></b></font><br />
	</td>
  </tr>
  <tr>
    <td>	<font color="#FFFFFF"><b><div id="SLIDE_counter"></div></b></font>    
        </td>
    <td><button type="button" id="SLIDE_back" onclick="SLIDE_back()"> < </button>
        <button type="button" id="SLIDE_play" onclick="SLIDE_play()"> p </button>
        <button type="button" id="SLIDE_pause" onclick="SLIDE_pause()"> || </button>
        <button type="button" id="SLIDE_forward" onclick="SLIDE_forward()"> > </button></td>
  </tr>
</table>
</center>
</body>
</html>