[Resolvido] onmouseout ... Não funciona no Fire Fox

[Fábio BN 17]

Olá pessoal.

 

Eu tenho um site, utilizado algumas rotinas com onMouse, só funciona no IE, e não no Fire Fox, segue um exemplo:

 

 

1º Problema, funciona, mas a font não pega formatação do CSS em relação ao tipo da font e tamanho, apenas a formatação da cor aparece, e como a letra fica grande, desalinha minha tabela.

 

 

-------------------------

function mudaMenu(sTexto){

div_menu.innerHTML = '<img border="0" src="imagens/site/seta.gif" width="10" height="10">  '+ sTexto;

}

----------------------------

 

<td colspan="4" bgcolor="#6394CE"> <center>

<font class="branco">

<a href="www.site.com.br" onmouseover="mudaMenu('Volte para a página Principal');" onmouseout="mudaMenu('Seja Bem-vindo ao Nosso Site');" class="menu" target="_self">Página Inicial</a>

<a href="www.site.com.br" onmouseover="mudaMenu('Cadastre-se e participe do nosso Site.');" onmouseout="mudaMenu('Seja Bem-vindo ao Nosso Site');" class="menu" target="_self">Cadastre-se</a></font> </center></td>

-----------------

</td>

<td width="373" background="imagens/descmenu.gif" valign=center><div id="div_menu" name="div_menu" class="verdana 8 preto"> <img border="0" src="imagens/site/seta.gif" width="10" height="10"> 

Seja Bem-vindo ao Nosso Site</div></td>

</tr>

------------------------------

CSS:

 

.8 {font-size: 8pt}

.verdana {font-family: Verdana}

.preto {color:#303030}

----------------------------------------------------------------------------------------------------------------------------

2º Problema, o Menu não muda de cor e nem faz a setinha ao passar o mouse sobre ele.

------------------------------------------------------------------------

function MRP_over(src,clrOver) {

if (!src.contains(event.fromElement)) {

src.style.cursor = 'hand';

src.bgColor = clrOver;

}

}

function MRP_hout(src,clrIn) {

if (!src.contains(event.toElement)) {

src.style.cursor = 'default';

src.bgColor = clrIn;

}

}

---------------------------------------------------

 

<td align="right" onClick="location.href ='www.site.com.br';" onMouseOver="MRP_over(this,'#2872BB');" onMouseOut="MRP_hout(this,'#6394CE');" height="16" bgcolor="#6394CE">

<div align="center"><font class="texto-branco">Cadastro</font></div></td>

--------------------------------------

 

CSS

.texto-branco {color:#FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; font-size: 8pt}

----------------------------------------------

 

Gostaria de saber por que esses comandos funcionam apenas no I.E perfeitamente, e não no Fire Fox, teria por como deixar compatíveis com ambas as plataformas?

 

Obrigado - Fábio!

[Otata 4]

e ai, cara script feito para rodar apenas no IEKA, algumas coisa que vi são

src.contains(event.toElement)

não é padrão então não roda no FF, achei bem bizarro o IE ter isso kkk

 

outra coisa event no FF não funciona desta forma, você tem que passar como parametro

 

function MRP_over(src,clrOver,e)....

onmouseover="MRP_over(this,'#2872BB',event);

t+

[Fábio BN 17]

Olá.

 

Então no caso ficaria assim:

<td align="right" onclick="location.href ='www.site.com.br';" onmouseover="MRP_over(this,'#2872BB',event);" onmouseout="MRP_hout(this,'#6394CE',event);" height="16" bgcolor="#6394CE">

<div align="center"><font class="texto-branco">Cadastro</font></div></td>

?

 

E você sabe por que não estou conseguindo formatar a font da minha primeira dúvida, é como se o CSS não estivesse fazendo efeito.

 

Abraços!

[Otata 4]

Então no caso ficaria assim:

<td align="right" onclick="location.href ='www.site.com.br';" onmouseover="MRP_over(this,'#2872BB',event);" onmouseout="MRP_hout(this,'#6394CE',event);" height="16" bgcolor="#6394CE">

<div align="center"><font class="texto-branco">Cadastro</font></div></td>

?

 

isso.

 

e na classe mude o nome de 8 para oito..não lembro se tive esse problema mas não rola nome de classe começando com número.

 

t+

[Fábio BN 17]

Oi.

Eu fiz um teste usando: MRP_over(this,'#2872BB',event);" mas mesmo assim quando passa o mouse o Menu não muda de cor.

 

Antigamente eu usava um método, mas o problema era que ao clicar sobre o LINK ele fazia um duplo som de clique, não sei por qual motivo, vejam:

 

<td align="right" onClick="location.href ='#';" onMouseOver="MRP_over(this,'#2872BB');" onMouseOut="MRP_hout(this,'#6394CE');" height="16" bgcolor="#6394CE"> 
             <div align="center"><font face="verdana,Arial,Helvetica,sans-serif" size="2"><a href="www.site.com.br" class="menu2" style="color:#000000;text-decoration:none" target="_self"><font color="#FFFFFF">Cadastre-se</font></a></font></div></td>

Abraços - Fábio!

 

Oi.

 

Vou postar o código denovo com algumas alterações:

Agora ele faz a setinha de LINK, mas continua não mudando a cor do menu ao passar o mouse.

   <tr> 
    <td align="right" onClick="location.href ='www.site.com.br/pagina.asp&id=esqueci_a_senha';" onMouseOver="MRP_over(this,'#2872BB');" onMouseOut="MRP_hout(this,'#6394CE');" height="16" bgcolor="#6394CE"> 
      <div align="center"><a href="www.site.com.br/pagina.asp?id=esqueci_a_senha" class="menu_esq" target="_self">Esqueci a Senha</a></div></td>
  </tr>
 
O JS dele é:
 //MENU Esquerdo do Site
function MRP_over(src,clrOver) {
 if (!src.contains(event.fromElement)) {
  src.style.cursor = 'hand';
  src.bgColor = clrOver;
 }
}
function MRP_hout(src,clrIn) {
 if (!src.contains(event.toElement)) {
  src.style.cursor = 'default';
  src.bgColor = clrIn;
}
}

Grato - Fábio

[William Bruno 1501]

bgColor está errado.

 

você deve usar as propriedades css, em camelCase:

backgroundColor

[Fábio BN 17]

Oi.

Um amigo meu do MSN me ajudou a resolver o problema assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
//MENU Esquerdo do Site
function muda(menuover)
{
    if (menuover.bgColor=='#6394ce')
        {
            menuover.bgColor='#2872bb';
        }
    else
        {
            menuover.bgColor='#6394ce';
        }
}

</script>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr> 
    <td align="right" bgcolor="#6394ce" onClick="location.href ='www.site.com.br';" onMouseOver="muda(this);" onMouseOut="muda(this);" height="16"> 
      <div align="center"><a href="www.site.com.br" class="menu_esq" target="_self">Ir para Tela 1</a></div></td>
  </tr>

</table>

</body>
</html>

Agora está funcionando no IE e no FireFox.

 

Agora só falta eu resolver o problema do outro Menu, onde a fonte fica grande e não formatada.

 

function mudaMenu(sTexto){
div_menu.innerHTML = '<img border="0" src="imagens/site/seta.gif" width="10" height="10">  '+ sTexto;
}
----------------------------

<td colspan="4" bgcolor="#6394CE"> <center> 
<font class="branco"> 
<a href="www.site.com.br" onmouseover="mudaMenu('Volte para a página Principal');" onmouseout="mudaMenu('Seja Bem-vindo ao Nosso Site');" class="menu" target="_self">Página Inicial</a> 
<a href="www.site.com.br" onmouseover="mudaMenu('Cadastre-se e participe do nosso Site.');" onmouseout="mudaMenu('Seja Bem-vindo ao Nosso Site');" class="menu" target="_self">Cadastre-se</a></font> </center></td>
-----------------
</td>
<td width="373" background="imagens/descmenu.gif" valign=center><div id="div_menu" name="div_menu" class="verdana 8 preto"> <img border="0" src="imagens/site/seta.gif" width="10" height="10">  
Seja Bem-vindo ao Nosso Site</div></td>
</tr>
------------------------------
CSS:

.8 {font-size: 8pt}
.verdana {font-family: Verdana}
.preto {color:#303030}

Abraços - Fábio