Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Cambiar imagenes en un INPUT

JavaScript - Cambiar imagenes en un INPUT

Volver
Nuevo Tema
<<>>
 
Vista:

Cambiar imagenes en un INPUT

Publicado por Ricky (4 intervenciones) el 15/02/2008 10:52:22
Hola: ¿Alguien me podría indicar si existe algún sistema para conseguir que un boton que está en un INPUT cambie de color (a otra imagen) al pasar el ratón sobre él.

Todos los scripts que conozco, solo funcionan cuando la imagen no está dentro del INPUT.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

RE:Cambiar imagenes en un INPUT

Publicado por ScriptShow (692 intervenciones) el 15/02/2008 14:34:06
Saludos,

<html>
<head>
<script type="text/javascript">
function changeStyle()
{
document.form1.boton.style.backgroundColor="#FFCC00";
document.form1.boton.style.backgroundImage="url(bgimagen.jpg)";
}
</script>
</head>
<body>
<form name="form1">
<input name="boton" type="button" onmouseover="changeStyle()" value="Set background-image" />
</form>
</body>
</html>

Espero te sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:Cambiar imagenes en un INPUT

Publicado por Ricky (4 intervenciones) el 19/02/2008 10:00:40
Gracias por la respuesta. No era ésto exactamente lo que yo pedia, pero por lo menos funciona.

Lo que yo pretendo es cambiar una imagen por otra al pasar el mouse sobre ella. Lo que me estraña es que si pongo lo siguiente, no funciona:

<script type="text/javascript">
function changeStyle()
{
document.form1.boton.style.backgroundImage="url(imagen.jpg)";
document.form1.boton.style.backgroundImage="url(imagen_iluminada.jpg)";
}
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScritShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

RE:Cambiar imagenes en un INPUT

Publicado por ScritShow (692 intervenciones) el 19/02/2008 11:40:30
Saludos Ricky,

A ver si es lo que necesitas.

<script type="text/javascript">
function changeStyle1()
{
document.form1.boton.style.background="url(imagen_iluminada.jpg)";
}

function changeStyle2()
{
document.form1.boton.style.background="url(imagen.jpg)";
}
</script>
<form name="form1">
<input type="button" name="boton" value="boton" style="background-image=url(download_qt.gif);width:100px;height:100px" onmouseover="changeStyle1()" onmouseout="changeStyle2()">
</form>

Espero te sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:Cambiar imagenes en un INPUT

Publicado por Ricky (1 intervención) el 20/02/2008 11:26:37
El ejemplo funciona perfectamente, pero creo que me expliqué mal al poner el post:

Lo que quiero es que en lugar de aparecer el boton gris del INPUT pueda poner una imagen, y ésta cambie de color al pasar sobre ella el ratón.

No me funciona si lo hago así:

<HTML>
<HEAD>
<TITLE>Boton imagen en INPUT</TITLE>
<script type="text/javascript">
function changeStyle1()
{
document.form1.boton.src="url(imagen_iluminada.gif)";
}

function changeStyle2()
{
document.form1.boton.src="url(imagen.gif)";
}
</script>

</HEAD>
<BODY>
<form name="form1" action="#" method="POST">
<input type="image" name="boton" value="boton" src="imagen.gif" onmouseover="changeStyle1()" onmouseout="changeStyle2()">
</form>
</BODY>
</HTML>


LA imagen aparece perfectamente, pero no cambia a la imagen "imagen_iluminada.gif" al hacer OnMouseOver.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScritShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

RE:Cambiar imagenes en un INPUT

Publicado por ScritShow (692 intervenciones) el 20/02/2008 12:44:31
Saludos Ricky,

Veamos si ahora lo entendí bien.

<input type="image" name="image" src="imagen.gif" onmouseover="this.src='imagen_iluminada.gif'" onmouseout="this.src='imagen.gif'">

Si es así, con ésto será suficiente.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:Cambiar imagenes en un INPUT

Publicado por Ricky (4 intervenciones) el 20/02/2008 20:54:09
Gracias por tu atención. Voy a probar
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:Cambiar imagenes en un INPUT

Publicado por Ricky (4 intervenciones) el 21/02/2008 09:22:58
!Eureka!. Perfecto.

Gracias por tu paciencia "ScritShow". En PHP me defiendo aceptablemente, pero el JavaScript lo llevo muy justito.

De todas formas, enhorabuena por tu respuesta porque en otro foro me dijeron que no se podía hacer.

Funciona perfecto así:

<HTML>
<HEAD>
<TITLE>Boton Submit con imagen que cambia al pasar el ratón</TITLE>
<script type="text/javascript">
function changeStyle1()
{
document.form1.boton.src="url(imagen_iluminada.gif)";
}

function changeStyle2()
{
document.form1.boton.src="url(imagen.gif)";
}
</script>

</HEAD>
<BODY>
<form name="form1">
<input type="image" name="image" src="imagen.gif" onmouseover="this.src='imagen_iluminada.gif'" onmouseout="this.src='imagen.gif'">
</form>
</BODY>
</HTML>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar