El problema que refieres de que se "confunden los enlaces" tiene que ver con que las imagenes siguen rotando pero el navegador coje un enlace cuando te colocas sobre la imagen.
Esto se solucionaria deteniendo la rotacion cuando te colocas sobre la imagen (onmouseover) y reanudandola cuando sales de ella (onmouseout)
Aca la solucion a ese problema en especial (probado):
Código Javascript
:
Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Rotación de banners con Javascript</title>
<script>
var estado = true;
//creo array de imágenes
array_imagen = new Array(4)
array_imagen[0] = new Image(120,60)
array_imagen[0].src = "images/lentejas.jpg"
array_imagen[1] = new Image(120,60)
array_imagen[1].src = "images/plato-presentado.jpg"
array_imagen[2] = new Image(120,60)
array_imagen[2].src = "images/Salsa-de-cebolla-con-tomate.jpg"
array_imagen[3] = new Image(120,60)
array_imagen[3].src = "images/compuesto-de-varias-frutas.jpg"
//creo el array de URLs
array_url = new Array(4)
array_url[0] = "http://www.cocina.com"
array_url[1] = "http://www.elgurmet.com/"
array_url[2] = "https://www.google.com.co/search?q=cocinando"
array_url[3] = "http://www.culinario.net"
//variable para llevar la cuenta de la imagen siguiente
contador = 0
//función para rotar el banner
function alternar_banner()
{
var timer
console.log('Estado es '+estado)
if (estado)
{
window.document["banner"].src = array_imagen[contador].src
window.document.links[0].href = array_url[contador]
contador ++
contador = contador % array_imagen.length
timer = setTimeout("alternar_banner();",1500)
}else
clearTimeout(timer)
}
// cross-browser
function addEventHandler(elem,eventType,handler)
{
if (elem.addEventListener)
elem.addEventListener (eventType,handler,false);
else
if (elem.attachEvent) elem.attachEvent ('on'+eventType,handler);
}
// cross-browser
function removeEventHandler(elem,eventType,handler)
{
if (elem.removeEventListener)
elem.removeEventListener (eventType,handler,false);
if (elem.detachEvent)
elem.detachEvent ('on'+eventType,handler);
}
// Mis handlers
function handlerFunction1() {estado=false;}
function handlerFunction2() { estado=true;alternar_banner(); }
function init() {
addEventHandler(document.getElementById('imagen'),'mouseover',handlerFunction1); // desactiva rotacion
addEventHandler(document.getElementById('imagen'),'mouseout',handlerFunction2); // activa rotacion
alternar_banner();
}
</script>
</head>
<body onload="init();">
<a href=""><img src="" name="banner" width=120 height=60 border=0 id="imagen" ></a>
</body>
</html>
Logicamente necesitas las imagenes que aparecen ahi y en el path en que sean accesibles (en mi caso las puse en ./images)