Problemas con mouseout y mouseover

Yedi · #1 (**permalink**) 07/04/2010, 23:52

Hola
Tengo un Menu con imagenes el cual manejo que cuando esta onmouseover -> "Imagen A" y cuando tiene onmouseout -> "Imagen B".

Mi problema es que cuando se de clic en una opcion, esta, se quede con la "Imagen A", y al dar clic en otra opcion vuelva a su estado natural y la nueva imagen tenga el mismo efecto.

Busque aqui en los foros y encontre esta solucion que fue dada por Cap.Buscapina

Código:

<html>
<head>
<title></title>
<script>
var Click="";
function clk(cc){
Click.className="fondo";
Click=cc;
}
function over(c){
c.className="fondo_over";
}
function out(C){
C.className="fondo";
Click.className="fondo_over";
}
</script>
<style type="text/css">
<!--
.fondo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #666666;
	background-color: #FFFFCC;
	background-image: url(fondo.gif);
}
.fondo_over {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #eeeeee;
	background-color: #FF9900;
	background-image: url(fondo_over.gif);
}
-->
</style>
</head>
<body >
<table width="100" border="1" align="center">
  <tr>
    <td width="100" height="40" class="fondo" onclick="clk(this)" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</td>
  </tr>
  <tr>
    <td width="100" height="40" class="fondo" onclick="clk(this)" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</td>
  </tr>
  <tr>
    <td width="100" height="40" class="fondo" onclick="clk(this)" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Lo bueno es q funciona como deseo..lo malo es q cuando intento aplicarlo con 7 imagenes de menu..no se como hacerlo, hize varias pruebas pero no me quedan.

De antemano les agradezco

tempto · #2 (**permalink**) 08/04/2010, 11:39

Yo tuve un problema parecido al tuyo, lo solucioné con jquery. Tenía un menú con 5 opciones y quería que cada vez que se pulsase una, se activara y si se pulsaba otra, ésta nueva se activara y se desactivaran las demás.
Te dejo el código de cómo lo hice:

Código Javascript:

Ver original<script type="text/javascript">
            $(document).ready(function() {
                $(".btn_principal").click(function() {
                    $(this).addClass("activo_principal");
                    $(".btn_historia").removeClass("activo_historia");
                    $(".btn_actividades").removeClass("activo_actividades");
                    $(".btn_grupos").removeClass("activo_grupos");
                    $(".btn_contacto").removeClass("activo_contacto");
                });
                
                $(".btn_historia").click(function() {
                    $(this).addClass("activo_historia");
                    $(".btn_principal").removeClass("activo_principal");
                    $(".btn_actividades").removeClass("activo_actividades");
                    $(".btn_grupos").removeClass("activo_grupos");
                    $(".btn_contacto").removeClass("activo_contacto");
                });
                
                $(".btn_actividades").click(function() {
                    $(this).addClass("activo_actividades");
                    $(".btn_principal").removeClass("activo_principal");
                    $(".btn_historia").removeClass("activo_historia");
                    $(".btn_grupos").removeClass("activo_grupos");
                    $(".btn_contacto").removeClass("activo_contacto");
                });
                
                $(".btn_grupos").click(function() {
                    $(this).addClass("activo_grupos");
                    $(".btn_principal").removeClass("activo_principal");
                    $(".btn_historia").removeClass("activo_historia");
                    $(".btn_actividades").removeClass("activo_actividades");
                    $(".btn_contacto").removeClass("activo_contacto");
                });
                
                $(".btn_contacto").click(function() {
                    $(this).addClass("activo_contacto");
                    $(".btn_principal").removeClass("activo_principal");
                    $(".btn_historia").removeClass("activo_historia");
                    $(".btn_actividades").removeClass("activo_actividades");
                    $(".btn_grupos").removeClass("activo_grupos");
                });
            });  
        </script>

Básicamente, por cada botón tengo dos clases, una con la imagen en estado normal y la otra con la imagen activada, cada vez que se pulsa un botón se "llama" a la clase activa y se "llaman" a las clases normal del resto de botones. Que es lo mismo que tienes en tu código.

Espero que te sea de ayuda