Ayuda sobre menú de imágenes dinámicas

ohcann · #1 (**permalink**) 07/04/2003, 03:49

Estimados amig@s, una vez más recurro a vosotros en busca de ayuda.

Tengo en una página web un menú de opciones formado por botones con imágenes, de forma que cuando el ratón pasa por encima se cambia por otra imagen distinta para destacar el vínculo. El código del enlace es el siguiente:

<a href="Web.htm"><img border="0" id="pena1" onmouseout="pena1.src='botonA.gif' ;" onmouseover="pena1.src=' botonB.gif';" src=" botonA.gif"></a>

Ahora, he cambiado la estructura de mi web y en vez de enlazar a otras páginas, lo que hacen los botones es ‘abrir’ capas dentro de la misma página web.

Lo que me gustaría saber es cómo puedo hacer para que además de que mis botones cambien de imagen cuando paso por encima con el ratón (de imagen A a Imagen B), también cambie a una tercera imagen diferente cuando hago ‘clic’ con el ratón sobre el botón, y que permanezca así hasta que pinche con el ratón en otra opción diferente del menú, momento en el que el enlace anteriormente abierto debe volver a la imagen A.

¿Alguien me puede decir qué código puedo utilizar para esto?

Gracias de antemano y un saludo,
Ohcann

tunait · #2 (**permalink**) 07/04/2003, 05:29

Eso es html dinámico y se trata en el foro de javascript.

Muevo tu pregunta a ese foro

saludos

KarlanKas · #3 (**permalink**) 07/04/2003, 05:47

Mira a ver si esto te sirve:http://www.forosdelweb.com/showthrea...hreadid=121815

ohcann · #4 (**permalink**) 07/04/2003, 07:09

Gracias KarlanKas

Muchas gracias por tu respuesta. Creo que sí es lo que estaba buscando. Pero no me termina de funcionar bien.

Al pasar por encima del vínculo con el ratón no me cambia a la imagen ‘si.gif’. ¿Se te ocurre por qué puede ser?

Y lo ideal sería que cuando pinchas en otra opción del menú, el primer vínculo vuelva a la posición inicial no.gif.

¿Sabes cómo se puede hacer esto?

Esta es la prueba que he hecho:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>VEr</title>
</head>
<body>

<a name="inicio"></a>

<a href="#inicio"><img border="0" src="no.gif"
onclick="this.src=(this.src!='si.gif')?'si.gif':'n o.gif'"
onmouseover="if (this.src=='no.gif'){this.src='hazclick.gif'}"
onmouseout="if (this.src=='hazclick.gif'){this.src='no.gif'}" width="93" height="21"> </a>

<a href="#inicio"><img border="0" src="no2.gif"
onclick="this.src=(this.src!='si2.gif')?'si2.gif': 'no2.gif'"
onmouseover="if (this.src=='no2.gif'){this.src='hazclick2.gif'}"
onmouseout="if (this.src=='hazclick2.gif'){this.src='no2.gif'}" width="93" height="21"> </a>
</body>
</html>

KarlanKas · #5 (**permalink**) 07/04/2003, 08:13

Mucho me temo uqe has tirado del primer ejemplo sin leer más... no te preocupes, prueba este ejemplo. Igual es un poco más complicado pero para lo tuyo viene muy bien:

Código PHP:

  <html>

<head>

 
    <script>

    

    var imagen=new Array;

    imagen[0]=new Image;

    imagen[0].no=new Image();

    imagen[0].pincha=new Image();

    imagen[0].si=new Image();

    

    imagen[1]=new Image;

    imagen[1].no=new Image();

    imagen[1].pincha=new Image();

    imagen[1].si=new Image();

 
    imagen[2]=new Image;

    imagen[2].no=new Image();

    imagen[2].pincha=new Image();

    imagen[2].si=new Image();

 
    imagenAnterior=new Image;

    

    var numeroAnterior=0

//--------- PON AQUÍ LA RUTA DE LAS IMÁGENES (NO HAN DE SER ABSOLUTAS)---------------

    

    imagen[0].no.src="no.gif";

    imagen[0].pincha.src="hazclick.gif";

    imagen[0].si.src="si.gif";

    

    imagen[1].no.src="no1.gif";

    imagen[1].pincha.src="hazclick1.gif";

    imagen[1].si.src="si1.gif";

    

    imagen[2].no.src="no2.gif";

    imagen[2].pincha.src="hazclick2.gif";

    imagen[2].si.src="si2.gif";

    

    

 
//------------------------------------------------------------------------------------    

    function cliqueo(esto,numero){

    imagenAnterior.src=imagen[numeroAnterior].no.src;

    imagenAnterior=esto;

    numeroAnterior=numero

    esto.src=(esto.src!=imagen[numero].si.src)?imagen[numero].si.src:imagen[numero].no.src;

    }

    

    </script>

    </head>

 
<body>

<a onfocus="this.blur()" href=#>

    <img     

            border=0 

            src="no.gif" 

            onclick="cliqueo(this,0)"

            onmouseover="if (this.src==imagen[0].no.src){this.src=imagen[0].pincha.src}"

            onmouseout="if (this.src==imagen[0].pincha.src){this.src=imagen[0].no.src}"

            >

</a>

 
<a onfocus="this.blur()" href=#>

    <img     border=0 

            src="no1.gif" 

            onclick="cliqueo(this,1)"

            onmouseover="if (this.src==imagen[1].no.src){this.src=imagen[1].pincha.src}"

            onmouseout="if (this.src==imagen[1].pincha.src){this.src=imagen[1].no.src}"

            >

</a>

 
<a onfocus="this.blur()" href=#>

    <img     border=0 

            src="no2.gif" 

            onclick="cliqueo(this,2)"

            onmouseover="if (this.src==imagen[2].no.src){this.src=imagen[2].pincha.src}"

            onmouseout="if (this.src==imagen[2].pincha.src){this.src=imagen[2].no.src}"

            >

</a>

</body>

</html>

Ves que hay varios elementos imagen en el array, hay uno por cada enlace, de forma que puedes personalizar cada enlace como quieras (con una imagen para cada click, mouseover y omuyseout). Con estos cambios se consigue lo uqe tú pedías que es que se ponga en no cuando pinches en otra imagen.

Para manejarlo sólo tienes que cambiar las rutas de las imágenes en la lista de la ruta de las mismas que está debajo de "PON AQUÍ LA RUTA DE LAS IMÁGENES (NO HAN DE SER ABSOLUTAS)" y ya está.

Si quieres poner más enlaces sólo tienes que añadir un imagen[3] siguiendo el ejemplo de las anteriores.

Si tienes cualquier duda pregunta que e ayudo con mucho gusto.

Un saludo!

ohcann · #6 (**permalink**) 07/04/2003, 09:36

Mil gracias KarlanKas. Eres un fenómeno. Esta vez si que funciona.

Gracias de nuevo.
Ohcann

KarlanKas · #7 (**permalink**) 07/04/2003, 09:38

De nada, hombre!
A mandar!