Iluminar input button

kikeking1 · #1 (**permalink**) 11/06/2009, 04:36

Hola, soy nuevo posteando aunque un fiel seguidor del foro y en mas de una ocasion me ha salvado el pellejo, hoy escribo aqui haber si podeis propocionarme algo ayuda que me esta volviendo loco.

Tengo unos botones, que quieros que al pasar por encima el raton cambien de color (creando el tipico efecto de iluminacion). Emplee javascript para realizar este efecto y sorprendentemente para mi en IE funcionan perfectamente, pero en Firefox no (aun me queda por conprobrar en safari ya contare la experiencia en cuanto tenga la ocasion)

Me es de vital importancia que estos botones funcionen correctamente en firefox, ya que es el navegador que recomiendo se use para una correcta visualizacion (por temas de contenedores y tamaños variables (width='100%'))

El codigo es el siguiente:

Código:

<div align='left' ><input type='submit' name='abopro' value='Abogados & Procuradores'   style='background-color: #fbf0ce;	color:  #474201;	font-family: Arial; 	font-size: 11px; 	border: 1px solid #f8e603;  ;	width:90%;	display:block;	text-decoration: none;	font-weight: bold;	padding: 3px; 	margin-bottom: 4px;' onmouseover='cambia()' onMouseOut='vuelve()' /></div>




<script language="JavaScript"> 

function cambia(){
	document.getElementById('abopro').style.backgroundColor = "f8e603";}
	
function vuelve(){
	document.getElementById('abopro').style.backgroundColor = "fbf0ce";}

</script>

quimfv · #2 (**permalink**) 11/06/2009, 06:21

Código HTML:

<!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=iso-8859-1" />
<title>solo numeros</title>
<script language="JavaScript" type="text/JavaScript">
function cambia(){
	document.getElementById('abopro').style.backgroundColor = "#f8e603";
	}
	
function vuelve(){
	document.getElementById('abopro').style.backgroundColor = "#fbf0ce";
	}

</script>
<style type="text/css">
<!--
.botoncolor {
background-color: #fbf0ce;
color:  #474201;
font-family: Arial;
font-size: 11px;
border: 1px solid #f8e603;
width:90%;
display:block;
text-decoration: none;
font-weight: bold;
padding: 3px;
margin-bottom: 4px;
}
-->
</style>
</head>
<body>
<div align='left' ><input type="submit"  id="abopro" name="abopro" value="Abogados & Procuradores" onmouseover="cambia()" onMouseOut="vuelve()" class="botoncolor" /></div>

</body>
</html>

No he cambiado casi nada... solo he puesto los # en el color y he sacado la definicion del style fuera del tag... cosa harto aconsejable solo por la comodidad de trabajar en distintas lieneas... ademas es reutilizable... incluso lo pondria en un .css....

Ha IMPORTATE si usas document.getElementById(....) hay que poner id a las cosas ( id="abopro") aún que parezca reiterativo con el name="abopro"...

Si he tocado cosas...

Quim

kikeking1 · #3 (**permalink**) 12/06/2009, 02:25

Muchisimas gracias me ha sido de mucha utilidad y funciona perfectamente y ya para aprender por si otra vez me encontrara en la misma situacion ¿porque no me tiraba en firefox?
¿porque no tenia expecificado el 'id' con el nombre del elemento?
¿o por tener la clase en un style?

quimfv · #4 (**permalink**) 12/06/2009, 05:09

No se en el style habia algun error de sintaxis ... un ; de más...

Y en principio sin id no deberia funcionar pero... no se...

Quim

adiazm · #5 (**permalink**) 12/06/2009, 14:25

y no has probado con css??..

input.boton
{
background:#F1F1F1;
}

input.boton:hover
{
background:#F0F0F0;
}

input.boton:focus
{
background:#F0F0F0;
}

kikeking1 · #6 (**permalink**) 16/06/2009, 01:34

No no habia probado en css. pues no sabia que los elementos hover, Focus.. y demas se pudiera aplicar al evento Button. Aunque tambien es otra buena opcion, gracias de nuevo por vuestros consejos.