Como se hace este menu?

Hola!

Alguien sabe como se hace el menu de los modelos de la moto en esta página?
El menu que pasas el cursor por arriba de los distintos modelos y se cambia la imagen.

http://www.honda-montesa.es/castellano/modelos/SuperSport/index.html

Tiene un comprotamiento parecido al de flash pero es hecho en CSS (creo)

Muchas gracias, y saludos

El que pueda con esto es un maestro!

Lo único que pude observar es que utiliza una función javascript "pintamoto" la cual se manda llamar con el evento "onmouseover" aplicado a una etiqueta <a, es decir a la liga.

Dicha función recibe dos id's como parámetros, el primero es el que tiene la descripción de cada una de las motos y el segundo es el id del div contenedor.

En cada uno de los div de las motos, utilizan otra funcion "swapmoto" que en realidad no sé que haga.

Bien, sé que esto no resuelve tu duda, pero por lo menos ya sabes que no está hecho solo con css, javascript hace su trabajo también. Sería bueno que alguien pueda explicarnos más a detalle porque está interesante lo que hacen.

Saludos.

Es la combinación de funciones de javascript con css, búscate: httpINNER y funciones de javascript para manejar css y hay tienes tu respuesta.

Saludos

Es sencillo.. es un conjutno de capas o imagenes q estan ocultas mediante display:none... luego con JS a una de las capas se le va ponieneod display:block...

Si tenemos una lista de imagenes con estas caracteristicas

Código :

<img src="imagen1.jpg" class="ocultar" id="img1"/>
<img src="imagen2.jpg" class="ocultar" id="img2"/>
<img src="imagen3.jpg" class="ocultar" id="img3"/>
<img src="imagen4.jpg" class="ocultar" id="img4"/>

y tenemos una serie de links q llaman a una funcion JS

Código :

<a href="#" onclick="cambiar(1);return false;">link1</a>
<a href="#" onclick="cambiar(2);return false;">link2</a>
<a href="#" onclick="cambiar(3);return false;">link3</a>
<a href="#" onclick="cambiar(4);return false;">link4</a>

y por ultimo tenemos una funcion JS encargada de mostras y ocultar las imagenes

Código :

<script>
var actual = null; //aca vamos a guarar la imagen mostrada con anterioridad
function cambiar(pos){
    if(actual!=null)
        actual.style.display = "none";  //ocultamos la imagen q estaba 
 
   actual = document.getElementById("img"+pos);
   actual.style.display = "block";
}
</script>

Espero q te sirva..

Saludos