How To Make More Images Appear On The Same Spot??

Hi guys, sorry for the confusing title. I tried posting this in the web design section but obviously noone has a clue.

Anyway, basically what I need to have is an image that changes (first it shows one image, then another, then another, etc.) with an option to set the time difference between the change, of course - and with each image having it's own link!

This link thing is very important. I've actually found a script that changes images, but they all contain one link

Here's my old script:

<a href="my link">
<img src="image source" alt="" width="200" height="220" id="rotator">
<script type="text/javascript">
(function() {
var rotator = document.getElementById('rotator'); // change to match image ID
var imageDir = ''; // change to match images folder
var delayInSeconds = 5; // set number of seconds delay
// list image names
var images = ['test.JPG','jogging.JPG'];

// don't change below this line
var num = 0;
var changeImage = function() {
var len = images.length;
rotator.src = imageDir + images[num++];
if (num == len) {
num = 0;
}
};
setInterval(changeImage, delayInSeconds * 1000);
})();
</script>


How to modify this in a way each picture contains it's own link?

Thank you!