imagen en lugar de botón en un formulario

09/03/2005 - 23:59 por alba | Informe spam

Saludos de nuevo.
Lo que pregunto tiene mas de html que de asp. (Siento si es OT)
Tengo un script que se encarga de leer de una bd y ahora estoy haciendo un
formulario de búsqueda de datos dentro de la misma.
Dentro del form hay un campo de entrada de tipo texto que es lo que quiero
buscar y no pongo ningún botón. En su lugar pongo una imagen que es una
lupa.
Si se escribe la cadena a buscar y se pulsa intro funciona pero ahora estoy
pegándome con la imagen, es decir que al pinchar en ella realice la misma
acción.
¿cómo lo hago?

Pongo el contenido del form:

<form action="<%=Request.ServerVariables("script_name")%>" method="get"
onsubmit="return((this.buscar.value.length>2)?true:(alert('Introduzca la
palabra a buscar') || false))" name="encuentra">
Buscar 
<input name="param1" type="hidden" value="<%=dato1%>">
<input name="param2" type="hidden" value="<%=dato2%>">
<input name="param3" type="hidden" value="<%=dato3%>">
<input name="param4" type="hidden" value="<%=dato4%>">
<input name="param5" type="text" value="<%=buscar%>">

<a href="#" onmouseout="restaura_img()"
onmouseover="cambia_img('lupa','imagenes/lupa_b.jpg')">
<img src="imagenes/lupa.jpg" alt="Buscar" name="lupa" width="26"
height="19" border="0">
</a>
</form>

salu2
alba

Siga el debate

8 respuestas

Tengo una respuesta

Preguntas similare

Formulario con imagen (y no boton SUBMIT)

Leer las respuestas

#1 alba

10/03/2005 - 00:52 | Informe spam

...
<a href="#" onmouseout="restaura_img()"
onmouseover="cambia_img('lupa','imagenes/lupa_b.jpg')">
<img src="imagenes/lupa.jpg" alt="Buscar" name="lupa" width="26"
height="19" border="0">
</a>

Se me olvidaba, he probado con
<input type="image" src="imagenes/lupa.jpg" width="26" height="19"
border="0" alt="Buscar" onmouseout="restaura_img()"
onmouseover="cambia_img('lupa','imagenes/lupa_b.jpg')">

pero no me funciona el onmouseout ni el onmouseover.

salu2
alba

Responder a este mensaje

#2 Miguel Gonzalez

10/03/2005 - 11:08 | Informe spam

Hola Alba.

Tienes varias opciones...

1) Puedes utilizar el objeto "button":

<button type="submit">
<img src="lupa...">
</button>

2) O bien activar el envío del formulario desde la propia imagen (lo que
mantendrá activos los eventos "onmouseout" y "onmouseover" de la imagen
tal como los tienes en tu código):

<img src="lupa..." ... onclick="document.forms[0].submit();">

En el código que envias, probablemente no te funcionen los eventos
"onmouseout" y "onmouseover" sobre el botón tipo "imagen" debido a algún
error en el "javascript".

Por cierto... mejor será que utilices un atributo "id" en vez del "name"
para operar con los objetos mediante "scripts", o bien que optes por
algo más sencillo, como:

<img src="imagenes/lupa.jpg"
onmouseover="this.src='imagenes/lupa_b.jpg';"
onmouseout="this.src='imagenes/lupa.jpg';"
onclick="document.forms[0].submit();"
alt="Buscar">

o bien:

<input type="image" src="imagenes/lupa.jpg"
onmouseover="this.src='imagenes/lupa_b.jpg';"
onmouseout="this.src='imagenes/lupa.jpg';"
alt="Buscar" value="Buscar">

Saludos!
Miguel

alba wrote:

...
<a href="#" onmouseout="restaura_img()"
onmouseover="cambia_img('lupa','imagenes/lupa_b.jpg')">
<img src="imagenes/lupa.jpg" alt="Buscar" name="lupa" width="26"
height="19" border="0">
</a>

Se me olvidaba, he probado con
<input type="image" src="imagenes/lupa.jpg" width="26" height="19"
border="0" alt="Buscar" onmouseout="restaura_img()"
onmouseover="cambia_img('lupa','imagenes/lupa_b.jpg')">

pero no me funciona el onmouseout ni el onmouseover.

Responder a este mensaje

#3 Nuno Santos

10/03/2005 - 11:20 | Informe spam

En el onclick de la imagen deves hacer el submit del form
Algo asin:

<img src="lupa.gif" onclick="if (ValidaForm(form1)==true) form1.submit();"
border=0>

ValidaForm es una función en JS que te permite validar los campos del form:

function ValidaForm (theForm){
//aqui colocas tu validación
if (!theForm.buscar.value.length>2){
alert('Introduzca la palabra a buscar');
theForm.buscar.focus();
return (false);
}
return(true)
}

OJO: No hice el teste del código!!

Nuno Santos

Nuno Santos
nunos7[REMOVER]@hotmail.com

"alba" wrote in message
news:e%LXd.25355$

...
<a href="#" onmouseout="restaura_img()"
onmouseover="cambia_img('lupa','imagenes/lupa_b.jpg')">
<img src="imagenes/lupa.jpg" alt="Buscar" name="lupa" width="26"
height="19" border="0">
</a>

Se me olvidaba, he probado con
<input type="image" src="imagenes/lupa.jpg" width="26" height="19"
border="0" alt="Buscar" onmouseout="restaura_img()"
onmouseover="cambia_img('lupa','imagenes/lupa_b.jpg')">

pero no me funciona el onmouseout ni el onmouseover.

salu2
alba

Responder a este mensaje

#4 alba

10/03/2005 - 13:04 | Informe spam

En el código que envias, probablemente no te funcionen los eventos
"onmouseout" y "onmouseover" sobre el botón tipo "imagen" debido a algún
error en el "javascript".

No he observado ningún error, se usan esas funciones en mas partes del
script y funcionan bien.

Por cierto... mejor será que utilices un atributo "id" en vez del "name"
para operar con los objetos mediante "scripts", o bien que optes por algo
más sencillo, como:

<img src="imagenes/lupa.jpg"
onmouseover="this.src='imagenes/lupa_b.jpg';"
onmouseout="this.src='imagenes/lupa.jpg';"
onclick="document.forms[0].submit();"
alt="Buscar">

o bien:

<input type="image" src="imagenes/lupa.jpg"
onmouseover="this.src='imagenes/lupa_b.jpg';"
onmouseout="this.src='imagenes/lupa.jpg';"
alt="Buscar" value="Buscar">

Con esto último me proporciona el efecto deseado y funciona correctamente.

Lo que si me resulta curioso es que en la llamada me aparece ...&x&y
al final (los números varían).
¿a qué se debe esto?

salu2
alba

Responder a este mensaje

#5 alba

10/03/2005 - 13:05 | Informe spam

Solucionado con el post anterior de Miguel

gracias

salu2
alba

Responder a este mensaje

Ads by Google