Index con imagenes en movimiento

[paxarin]

Muy buenas
Tengo pendiente para terminar un proyecto web hacer el index.
El index es la foto de la fachada del restaurante que cambia a determinadas horas de foto con un script, este:
<script language="JavaScript">

function imagen(){
fecha = new Date();

hora = fecha.getHours();

if(hora>=1 && hora<=10){//imagen desde la 1am hasta las 10am
document.getElementById("fondo").style.backgroundI mage="url(img/mañana.jpg)";
}

if(hora>=11 && hora<=18){//imagen desde las 11am hasta las 6pm
document.getElementById("fondo").style.backgroundI mage="url(img/tarde.jpg)";
}

if(hora>=19 && hora<=24){//imagen desde las 7pm hasta las 12pm
document.getElementById("fondo").style.backgroundI mage="url(img/noche.jpg)";
}

}
</script>
Pero el problema es el siguiente.
aparte cambiar cada x horas como ya os comente, deberia de estar la imagen con los zonas link.
El zona de la derecha seria la cafeteria y la zona de la izq el restaurante, como podria hacerlo?
Y la siguiente como hacer que la imagen no se repita?
espero que podais ayudarme, un saludo