Gracias a los 2, eso es lo que busco, pero quiero que la opcion del menu vuelva a su "estado natural" cuando se pinche en otra opcion.
El menu llama a funciones javacscript, que me van mostrando datos en pantalla, no recargo la pagina, ni llamo a otra ni nada, todo se queda en la misma.
Voy a intentar mandar el codigo que tengo, a ver si le podeis echar un vistazo.
Yo no hago nada de clases (nose mucho de javascript), simplemente busco por "Document.getElementById" y le cambio el style-background. Lo raro de mi problema es que en IE la cosa sale bien pero solo pulsando la primera opcion, en cuando pulso la segunda ya me hace cosas raras.
Index.php
Cita: <div class="mainDiv" id="princ_noticias"
style="background-image:url(menus/submenu.jpg); background-image:menus/impresora_icono.jpg;"
onMouseOver="javascript:this.style.background = 'url(menus/submenu_2.jpg)'"
onMouseOut="javascript:this.style.background = 'url(menus/submenu.jpg)'">
<div class="topItem" classOut="topItem" classOver="topItemOver"
onclick="cambio('noticias', 'index.php');
cambio_contenido(this, 'noticias.htm', '250');">
<img src="menus/noticias_icono.jpg" style="margin-left:2px;" align="middle"> Noticias
</div>
</div>
<div class="mainDiv" id="princ_servicios"
style="background-image:url(menus/submenu.jpg);"
onMouseOver="javascript:this.style.background = 'url(menus/submenu_2.jpg)'"
onMouseOut="javascript:this.style.background = 'url(menus/submenu.jpg)'">
<div class="topItem" classOut="topItem" classOver="topItemOver"
onclick="cambio('servicios', 'index.php');
cambio_contenido(this, 'servicios.htm', '1100');">
<img src="menus/servicios_icono.jpg" style="margin-left:2px;" align="middle"> Servicios
</div>
</div>
<div class="mainDiv" id="princ_nuestra-empresa"
style="background-image:url(menus/submenu.jpg);"
onMouseOver="javascript:this.style.background = 'url(menus/submenu_2.jpg)'"
onMouseOut="javascript:this.style.background = 'url(menus/submenu.jpg)'">
<div class="topItem" classOut="topItem" classOver="topItemOver"
onclick="cambio('nuestra-empresa', 'index.php');
cambio_contenido(this, 'nuestra-empresa.htm', '400');">
<img src="menus/nuestra-empresa_icono.jpg"
style="margin-left:2px;" align="middle"> Nuestra Empresa
</div>
</div>
Javascript.js
Cita: function cambio(familia, url)
{
var gko = navigator.userAgent.toLowerCase();
//En la variable antes, guardo el ID del menu que pinchamos anteriormente
(creo que es aqui donde esta el problema)
var antes = document.getElementById("imagen_ant").title;
//Esto es una chapuza que me he hecho para guardar en este tag el ID
del elemento al que acabamos de pinchar, para en la siguiente entrada a la funcion
pasarselo a la variable antes
document.getElementById("imagen_ant").setAttribute ("title", familia);
//Aqui entra cuando ya tenemos un elemento pinchado y le damos a otro,
es decir, para poner un elemento del menu a su "estado natural"
if (antes != 0 && antes != familia)
{
var elemento_antes = document.getElementById('princ_'+antes);
if (gko.indexOf('gecko')!=-1) //si soporta gecko, es Mozilla, Netscape, Safari, etc {
elemento_antes.setAttribute("style","background-image:url(menus/submenu.jpg);");
elemento_antes.setAttribute("onMouseOut","javascri pt:this.style.background = 'url(menus/submenu.jpg);'");
}
else //es I.Explroer
{ elemento_antes.setAttribute("style","background-image:url(menus/submenu.jpg);");
elemento_antes.onmouseout = function() {elemento_antes.style.background = "url(menus/submenu.jpg)"};
}
}
//Aqui lo que se hace es para dejar la "Imagen Resaltada"
if (gko.indexOf('gecko')!=-1) //si soporta gecko, es Mozilla, Netscape, Safari, etc
{
elemento.setAttribute("style","background-image:url(menus/submenu_2.jpg)");
elemento.setAttribute("onMouseOut","javascript:thi s.style.background = 'url(menus/submenu_2.jpg)'");
}
else //es I.Explroer
{
elemento.setAttribute("style","background-image:url(menus/submenu_2.jpg);");
elemento.onmouseout = function() {this.style.background = "url(menus/submenu_2.jpg)"}
}
}
}
Yo creo que el problema que tengo es al guardar la variable "antes", guardo el id del menu que acabo de pinchar, para que cuando pinche en otro, vuelva a su "estado natural" el que esta en antes.
Bueno, gracias y a ver si podemos resolver este lio.
Aqui os mando la direccion para que lo veais en funcionamiento
http://www.clusterinformatica.com/menu.htm
Ya vereis que cuando se picha en el segundo enlace, el primero no cambia a no ser que paseis el raton por encima
PD-> Con Mozilla funciona bien, no funciona con IE.