cambio de imágenes en botonera que perduren los cambios

Dundee · #1 (**permalink**) 24/07/2010, 07:46

Hola gente, estoy haciendo una menú que cuando te pones encima cambie a otra imágen, eso ya lo he conseguido pero cuando saco el puntero del ratón de encima vuelve a ponerse como al principio, y yo quiero que se mantenga el cambio hasta que pinche en otro enlace del menú.
¿Alguna idea?.
Lo estoy haciendo de esta forma:
La llamada desde el html a las funciones javascript

Código:

<A href="textos.htm"  onMouseOver="turnOn('image1')" onMouseOut="turnOff('image1')" target="textos" title="textos"><img src="Imagenes/filaArriba/rrrrrfOf.gif" alt="textos" name="image1" border="0" boder="0"></a>

Código:

if (document.images) { 
 image1off = new Image();
 image1off.src = "Imagenes/filaArriba/rrrrrfOf.gif";
 image2off = new Image();
 image2off.src = "Imagenes/filaArriba/dddddOff.gif";
 image3off = new Image();
 image3off.src = "Imagenes/filaArriba/aaaaOff.gif";
 image4off = new Image();
 image4off.src = "Imagenes/filaArriba/PfdfdOff.gif";
 image5off = new Image();
 image5off.src = "Imagenes/filaArriba/EfdfdfesOff.gif";
 image6off = new Image();
 image6off.src = "Imagenes/filaArriba/CffffgOf";
 image7off = new Image();
 image7off.src = "Imagenes/filaArriba/CsssstoOff.gif";


 image1on = new Image();
 image1on.src = "Imagenes/filaArriba/rrrrrffOn.gif";
 image2on = new Image();
 image2on.src = "Imagenes/filaArriba/dddddOn.gif";
 image3on = new Image();
 image3on.src = "Imagenes/filaArriba/aaaaOn.gif";
 image4on = new Image();
 image4on.src = "Imagenes/filaArriba/PfdfdOn.gif";
 image5on = new Image();
 image5on.src = "Imagenes/filaArriba/EfdfdfesOn.gif";
 image6on = new Image();
 image6on.src = "Imagenes/filaArriba/CffffgOn.gif";
 image7on = new Image();
 image7on.src = "Imagenes/filaArriba/CsssstoOn.gif";

}

function turnOn(imageName) { 
	if (document.images) { 
	document[imageName].src = eval(imageName + "on.src"); 
	}
}

function turnOff(imageName) { 
	if (document.images) {
	 document[imageName].src = eval(imageName + "off.src"); 
	}
}

Soy programador php y con javascript aveces me lio un poco todavía a estas alturas.
El tema es que quiero que una vez que la imagen cambie perdure este cambio hasta que pinche en otra imágen/enlace distinto, y entonces que suceda lo mismo.

Un saludo y mil gracias

tredio · #2 (**permalink**) 24/07/2010, 14:30

no uses la funcion turnOff

Adler · #3 (**permalink**) 24/07/2010, 16:06

Hola

A ver si sacas alguna idea de esto

Código Javascript:

Ver original<html>
<style type="text/css">
.sel {color:#FF0000; width:30px;}
.nosel {color:#000000; width:30px;}
</style>
<script type="text/javascript">
var visto_color = null;
function ver(val) {
objhl = document.getElementById(val);
 
objhl.className = (objhl==visto_color) ? 'nosel' : 'sel';
 
    if (visto_color != null) {
        visto_color.className = 'nosel';
    }
 
visto_color = (objhl==visto_color) ? null : objhl;
}
 
</script>
<head>
</head>
<body>
<div id="menu1" class="nosel" onmouseover="ver(this.id)">MENU0</div>
<div id="menu2" class="nosel" onmouseover="ver(this.id)">MENU1</div>
<div id="menu3" class="nosel" onmouseover="ver(this.id)">MENU2</div>
<div id="menu4" class="nosel" onmouseover="ver(this.id)">MENU3</div>
</body>
</html>

Suerte

Dundee · #4 (**permalink**) 25/07/2010, 02:48

Cita:

Iniciado por tredio

no uses la funcion turnOff

¿Porque?

tredio · #5 (**permalink**) 25/07/2010, 09:09

mira el ejemplo que te puso Adler, si prestas un poco de atencion veras que donde estasn los menus el registra el evento onmouseover y lo asocia a la funcion ver que en tu caso seria turnOn.

por que no usar la funcion turnOff?, simplemente por que ella es la que se encarga de volver a colocar la imagen original, y eso es qlo que tu no quieres por lo que entendi. prueba asi como te lo mostro Adler en su ejemplo.

Dundee · #6 (**permalink**) 25/07/2010, 14:12

Cita:

Iniciado por tredio

mira el ejemplo que te puso Adler, si prestas un poco de atencion veras que donde estasn los menus el registra el evento onmouseover y lo asocia a la funcion ver que en tu caso seria turnOn.

por que no usar la funcion turnOff?, simplemente por que ella es la que se encarga de volver a colocar la imagen original, y eso es qlo que tu no quieres por lo que entendi. prueba asi como te lo mostro Adler en su ejemplo.

Creo que eso no sirve para lo que yo quiero.
El tema es que es una web que usa Frames (si, se que no es aconsejable, pero no la he hecho yo); y la botonera esta en un frame, la fila con la botonera tiene 6 imágenes que cuando pinchas en una quiero que se ponga otra imagen casi igual pero roja, y se mantenga mientras no pinche en otro (todos los enlaces cargan en el (creo que se llamaba main) centro) .

Hace mucho que he dejado de usar frames por lo que me parece que el error viene de ahí , el menú tiene una única vista que he creado con php que es llamada cada vez que quiero que se muestre el menú de arriba (include('vista.html.php'); pero el javascript funciona porque sino la imagen no cambiaría al ponerme encima (y si lo hace), pero el problema es que cuando salgo de encima vuelve la orginal y esto no me pasaba antes de haber creado la vista y haber quitado el menú de todas las páginas, ya que estaba repetido 100 veces.

Un saludo

Adler · #7 (**permalink**) 26/07/2010, 05:29

Hola

Cita:

Iniciado por Dundee

Creo que eso no sirve para lo que yo quiero.
El tema es que es una web que usa Frames (si, se que no es aconsejable, pero no la he hecho yo); y la botonera esta en un frame, la fila con la botonera tiene 6 imágenes que cuando pinchas en una quiero que se ponga otra imagen casi igual pero roja, y se mantenga mientras no pinche en otro (todos los enlaces cargan en el (creo que se llamaba main) centro) .

Hace mucho que he dejado de usar frames por lo que me parece que el error viene de ahí , el menú tiene una única vista que he creado con php que es llamada cada vez que quiero que se muestre el menú de arriba (include('vista.html.php'); pero el javascript funciona porque sino la imagen no cambiaría al ponerme encima (y si lo hace), pero el problema es que cuando salgo de encima vuelve la orginal y esto no me pasaba antes de haber creado la vista y haber quitado el menú de todas las páginas, ya que estaba repetido 100 veces.

Es distinto creer que estar seguro. Pruebalo y nos cuenta si se ha disipado esa duda

Suerte

Dundee · #8 (**permalink**) 30/07/2010, 02:23

Vale , ya está solucionado , así de fácil:

Primera opción, crear una vista con PHP y llamarla cada vez que queramos (con sus condicionales para lo que voy a explicar ahora), esta es la forma que más me gusta.

Segunda opción : en cada página (o cargar la vista que creamos previamente con los condicionales según la página en la que nos encontremos) poner el menú con los eventos debajo escritos en cada item de menú ,tanto onMouseOver como onMouseOut:

Código:

 onMouseOver="turnOn('image5')"  onMouseOut="turnOff('image5')"

Salvo si estamos en la página en la que queremos que su enlace cambie (vamos que la imagen cambie) entonces NO PONEMOS onMouseOut="turnOff('imageX')", así mientras estemos en dicha página la imagen del enlace seguirá siendo la que queremos , en este caso una en azul.
En fin era muy fácil.

Un saludo y gracias