Foros del Web » Creando para Internet » HTML »

Boton con imagen y todas las funcionalidades

Estas en el tema de Boton con imagen y todas las funcionalidades en el foro de HTML en Foros del Web. Estimados Tengo un boton echo con una imagen, pero me gustaria que tubieran todas las funcionalidades de un boton html, es decir la que mas ...
  #1 (permalink)  
Antiguo 29/03/2011, 13:37
 
Fecha de Ingreso: julio-2010
Mensajes: 59
Antigüedad: 13 años, 8 meses
Puntos: 0
Boton con imagen y todas las funcionalidades

Estimados

Tengo un boton echo con una imagen, pero me gustaria que tubieran todas las funcionalidades de un boton html, es decir la que mas me interesa es que cuando se haga boton derecho sobre el mismo, se pueda poner "abrir en nueva pestaña". De esta forma tenfria una funcionalidad muy completa y un buen estilo. Muchas gracias y espero sugerencias.
  #2 (permalink)  
Antiguo 29/03/2011, 14:39
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: Boton con imagen y todas las funcionalidades

entonces no es un botón, es una imagen linkada
  #3 (permalink)  
Antiguo 29/03/2011, 15:30
 
Fecha de Ingreso: julio-2010
Mensajes: 59
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Boton con imagen y todas las funcionalidades

Mi boton es de la siguiente forma

<input title='boton comprar' alt=' bonton comprar ' src='verproducto.jpg' type='image'>

Este funciona bien como boton submit, que es lo que preciso ya que el mismo es parte de un formulario por el cual se envia una consulta a otra pagina por post y este da la orden de enviar.

Creo que con <a href =""><img .....></a> no me funciona dentro de un formulario y enviando el dato.
  #4 (permalink)  
Antiguo 29/03/2011, 16:28
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: Boton con imagen y todas las funcionalidades

creo recordar que los button image dan problemas en algunos navegadores. con un link sí se puede enviar un formulario, no te lo recomiendo, usando el método submit() de objeto form.

la leyenda un button submit no tiene las opción "abrir en nueva pestaña", esa opción sólo aparece con los links. de cualquier modo, que propósito tendría??
  #5 (permalink)  
Antiguo 30/03/2011, 06:42
 
Fecha de Ingreso: julio-2010
Mensajes: 59
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Boton con imagen y todas las funcionalidades

Este es el codigo con el cual mi base de datos carga un producto en pantalla.
Código HTML:
Ver original
  1. echo "<td><table border = '0'><form method='POST' action='mostrar.php'>  \n";
  2.  
  3.             echo "<tr><td><input type = 'hidden' name='T1' value = '".$row["id"]."'></td></tr> \n";
  4.  
  5.             echo "<tr><td><img src='".$row["fotochica"]."' border='1' alt='1'cellpadding='1' cellspacing='1'></td> \n";            
  6.            
  7.             echo "<td><center><b><h4>".$row["Nombre"]."</h4></b></center> \n";
  8.  
  9.             echo "<form method='post' action='mostrar.php'>
  10. <input type = 'hidden' name='T1' value = '".$row["id"]."'>
  11.         <input title='boton comprar' alt=' bonton comprar ' src='verproducto.jpg' type='image'>
  12.  
  13. </form>";


y luego al apretar el boton con la imagen ver producto

<input title='boton comprar' alt=' bonton comprar ' src='verproducto.jpg' type='image'>se envia el mismo con el dato T1 que es el id del producto atravez del cual puedo ver el producto en la siguiente pantalla. Mi problema es que hay gente que le gusta abrir productos en varias pantallas, apretando boton secundario "abrir en una nueva pestaña" pero con un boton de imagen no me permite hacerlo. Es la unica funcionalidad que precisaria y de esa forma no perderia mi estilo de pagina.
  #6 (permalink)  
Antiguo 30/03/2011, 09:35
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 13 años, 9 meses
Puntos: 63
Respuesta: Boton con imagen y todas las funcionalidades

y ¿por que no envías T1 como parámetro GET dentro de la URL? después de todo un id no es tan critico como para tener que enviarlo por POST y así puedes usar fácilmente una imagen linkada como dice IsaBelM.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #7 (permalink)  
Antiguo 30/03/2011, 11:50
 
Fecha de Ingreso: marzo-2011
Mensajes: 184
Antigüedad: 13 años
Puntos: 11
Respuesta: Boton con imagen y todas las funcionalidades

Me parece que puedes utilizar css para cambiar el estilo del botón para que no sea una imagen sino que ésta quede en el fondo del botón. Es cosa de investigar por ese camino.

Saludos!
__________________
“Un estómago vacío, es un mal consejero.” Albert Einstein

Reflexiones, humor gráfico, chistes, Deporte, Consejos y tips
  #8 (permalink)  
Antiguo 30/03/2011, 12:55
 
Fecha de Ingreso: julio-2010
Mensajes: 59
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Boton con imagen y todas las funcionalidades

Muchas gracias a ambos, no me habia dado cuenta que de esa forma se solucionaba el problema, han colaborado mucho a mejorar mi pagina y nuevamente les agradesco. Dejo el codigo arreglado por si alguien mas tiene este problema pueda solucionarlo.

Código HTML:
Ver original
  1. echo "<td><table border = '0'><form method='POST' action='mostrar.php'>  \n";
  2.  
  3.             echo "<tr><td><img src='".$row["fotochica"]."' border='1' alt='1'cellpadding='1' cellspacing='1'></td> \n";            
  4.            
  5.             echo "<td><center><b><h4>".$row["Nombre"]."</h4></b></center> \n";
  6.  
  7.             echo "<form method='post' action='mostrar.php'>
  8. <input type = 'hidden' name='T1' value = '".$row["id"]."'>
  9.        
  10.  
  11.  
  12. <a href='mostrar.php?T1=".$row["id"]."'><img alt='verproducto' src='verproducto.jpg'></a>
  13.  
  14. </form>";


Porsupuesto no hay que olvidarce de cambiar el post por get en el archivo de destino.
  #9 (permalink)  
Antiguo 30/03/2011, 13:06
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 13 años, 9 meses
Puntos: 63
Respuesta: Boton con imagen y todas las funcionalidades

me alegra haber ayudado a mejorar tu pagina, aunque deberias limbiar un poco el codigo, ya que no vas a enviar el dato desde un formulario ¿por que mantenerlo?

Código PHP:
<td><table border = '0'>
    <tr><td><img src='"<?php echo$row["fotochica"?>"' border='1' alt='1'cellpadding='1' cellspacing='1'></td>
    <td><center><b><h4>"<?php echo $row["Nombre"?>"</h4></b></center>
    <a href='mostrar.php?T1="<?php echo $row["id"?>"'><img alt='verproducto' src='verproducto.jpg'></a>";
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #10 (permalink)  
Antiguo 30/03/2011, 14:49
 
Fecha de Ingreso: julio-2010
Mensajes: 59
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Boton con imagen y todas las funcionalidades

Si tienes razón debo limpiarla un poco, es que uno a mil aveces no se da cuenta, en ralidad no preciso el <form> asi que lo quitare,pero el resto si lo necesito, ya que son datos que se cargan para que vea el usuario y sepa si es el producto que desea, por eso estan ahì. Es hora de que me valla a hacer un poco de limpieza entonces jeje, muchas gracias nuevamente.
  #11 (permalink)  
Antiguo 30/03/2011, 14:56
 
Fecha de Ingreso: julio-2010
Mensajes: 59
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Boton con imagen y todas las funcionalidades

Muchas gracias a ti tambien GatoGordo disculpa que no habia visto tu mensaje y parecio que te habia ignorado, tomare en cuenta tu sugerencia y investigare un poco porque quizas me sirva para mejorar alguna otra cosa. En resumen muchas gracias a los tres por la ayuda.
  #12 (permalink)  
Antiguo 30/03/2011, 15:53
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: Boton con imagen y todas las funcionalidades

tienes varias opciones

input submit con css aplicas el fondo. algo como esto
Cita:
<input type="submit" value="enviar" style="background:url(imagen.jpg) no-repeat 0 0; text-align:center; border:0; width: 30px; padding: 2px; /*para centrar la imagen */" />
botón con imagen
Cita:
<button type="submit" style="background-color:transparent; border:0;"><img src="imagen.jpg" alt="" /></button>
  #13 (permalink)  
Antiguo 31/03/2011, 10:04
 
Fecha de Ingreso: julio-2010
Mensajes: 59
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Boton con imagen y todas las funcionalidades

Muchas gracias Isabel, luego los revisare, creo que el segundo me debe servir para los botones flash y eso tambien me va a ser de mucha utilidad.
Les dejo mi pagina web, se aceptan criticas constructivas, ya que la estoy mejorando de apoco, asi que si tienen alguna sugerencia, mandenmela por interno si quieren www.jdm.com.uy.
Ah y les mando una ayuda para mejorar su karma.

Etiquetas: todas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:10.