Hi there alphynityx,
and a warm welcome to these forums.
Here is an example that may possibly suit your requirements...
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.coothead.co.uk/images/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
body {
background-color:#020204;
background-image:url(bodyBg.jpg);
}
#container {
position:relative;
width:488px;
height:302px;
border-width:5px;
border-style:solid;
border-color:#4c4c7e #9797fb #9797fb #4c4c7e;
margin:100px auto;
}
#top {
position:absolute;
width:486px;
height:300px;
z-index:1;
}
#bot {
position:absolute;
width:486px;
height:300px;
z-index:0;
}
#container img {
border:1px solid #000;
}
</style>
<script type="text/javascript">
/*************************************************************************************************/
/***************** these values are editable *****************/
var speed=20; /* this is the image fade speed - higher value=slower, lower value=faster */
var timer=3000 /* this is the time that each image is static - 3000=3 seconds */
var pics=new Array();
pics[0]='autumn.jpg';
pics[1]='coloreddog.jpg';
pics[2]='banana.jpg';
pics[3]='lace.jpg';
pics[4]='ten_quid.jpg';
pics[5]='apple.jpg';
pics[6]='girl.jpg';
pics[7]='clouds.jpg';
pics[8]='blood.jpg';
pics[9]='buddha.jpg';
var links=new Array();
links[0]='http://www.google.com/';
links[1]='http://www.htmlforums.com/';
links[2]='http://www.w3schools.com/';
links[3]='http://www.alistapart.com/';
links[4]='http://news.bbc.co.uk/';
links[5]='http://validator.w3.org/';
links[6]='http://en.wikipedia.org/';
links[7]='http://tools.dynamicdrive.com/gradient/';
links[8]='http://www.myfonts.com/';
links[9]='http://www.hoogerbrugge.com/';
/*************************************************************************************************/
var topop=100;
var botop=0;
var topnum=0;
var botnum=1;
var test=0;
function init() {
objt=document.getElementById('top');
objb=document.getElementById('bot');
objl=document.getElementById('link'); /* remove this if links are not required */
fader=setTimeout(function(){fadeout()},timer);
}
function fadeout() {
objl.href='#'; /* remove this if links are not required */
objl.style.cursor='default'; /* remove this if links are not required */
test==0?(topop--,botop++):(topop++,botop--);
if(objt.filters) {
objt.style.filter='alpha(opacity='+topop+')';
objb.style.filter='alpha(opacity='+botop+')';
}
else {
objt.style.opacity=topop/100;
objb.style.opacity=botop/100;
}
if(topop==0){
test=1;
topnum+=2;
if(topnum==pics.length+1) {
topnum=1;
}
if(topnum==pics.length){
topnum=0;
}
objt.src=pics[topnum];
clearTimeout(fader);
return stop();
}
if(topop==100){
test=0;
botnum+=2;
if(botnum==pics.length) {
botnum=0;
}
if(botnum==pics.length+1){
botnum=1;
}
objb.src=pics[botnum];
clearTimeout(fader);
return stop();
}
setTimeout(function(){fadeout()},speed);
}
function stop(){
objl.style.cursor='pointer'; /* remove this if links are not required */
if(test==0){
objl.href=links[topnum];
topop=100;
botop=0;
}
if(test==1){
objl.href=links[botnum]; /* remove this if links are not required */
topop=1;
botop=99;
}
setTimeout(function(){fadeout()},timer);
}
if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
</script>
</head>
<body>
<div id="container">
<a id="link" href="http://www.google.com/"> <!-- remove this if links are not required -->
<img id="top" src="autumn.jpg" alt="">
<img id="bot" src="coloreddog.jpg" alt="">
</a> <!-- remove this if links are not required -->
</div>
</body>
</html>
Add to del.icio.us 
Can you digg it?
Linear Mode
