Envio de datos a un formulario al clickear una imagen

[EzekielCeliz]

Buenas gente, genero este tema en el foro de Javascript pero la verdad no se bien donde ira, la cuestión es así:

Yo tomo un rango de fechas y hago una consulta a la base de datos. La base de datos me trae bien todos los datos, yo los muestro con imágenes (habitaciones, estados, etc). Lo que yo necesito y no se si puede (ojala que si) es que al clickear en alguna habitación o en algún estado me lleve a un formulario (esto pensaba hacerlo como hipervinculo pasándole variables por referencia) pero con los datos de esa fila, incluida la fecha. Se podrá hacer esto? Como hago para identificar donde yo clickeo? Espero que alguien me de una mano! Saludos

PD: En este enlace esta la imagen de la impresion de las habitaciones y la porcion de codigo que las genera: http://img100.imageshack.us/i/asivaquedando.png/

[caricatos]

Hola:

Justamente los input type="image", son entradas submit que a la vez envían las coordenadas x,y de donde se pincha... creo que es lo que quieres...

Saludos

[EzekielCeliz]

Buenas, muchas gracias por tu respuesta. Te comento que todavia no probe tu solucion, sin embargo me parece interesante.
La cuestion es que no se si me pueda servir por completo, quizas si, pero creo que tendria que pensar en hacer varias cuentas para identificar en la fila (fecha) que yo estoy parado.
Esto brinda una gran solución pero si yo tengo imagenes fijas y se de antemano cuantas son y donde estaran posicionadas.
Lo mio puede llegar a ser mas complejo, porque yo si selecciono 3 fechas me traigo 15 filas (correspondientes a las 5 habitaciones que tengo por dia), pero qué pasa si fueran 30 fechas, va a ser 10 veces mayor la cantidad de filas.
En resumen, mis imagenes van a ser variables. Puede llegar a haber alguna solución mas simple? Si no a laburar con esto y tratar de sacarlo...

[caricatos]

Hola:

Soluciones... pueden ser muchas...

Si son imágenes planas, con colores con muy poca diferencia de tonalidad (si lo necesitases)... reconocer un elemento podría ser tan fácil como leer el color del pixel que se pinchó... y con php y las librerías GD es muy fácil.

Ya nos contarás.

Saludos

[EzekielCeliz]

Caricatos, lo del input type=image creo que no me va a servir, estuve leyendo (por cierto encontre muy poca información de esto) y las coordenadas que envia son la posicion donde se clickea en la imagen, lo cual no es lo que yo pensaba que me iba a ayudar, yo creia que era la posicion donde clickeaba dentro de la pagina entera...

Lo de las librerias GD tampoco lo entendi mucho, vi que sirve para crear uno mismo la imagen, tambien se puede poner imagenes de fondos, pero no se me hace claro como me puede ayudar para mi problema.

Por favor mira este enlace en donde esta la salida de mi consulta, en este caso puse que me de del primero de diciembre al 16 del 2010:

[URL="http://www.imaxenes.com/imagen/fechasimaxenes1zi38sz.png.html"]http://www.imaxenes.com/imagen/fechasimaxenes1zi38sz.png.html[/URL]

Bue no entiendo xq no sale la url como hiperviculo... y salen las etiquetas "URL"

[EzekielCeliz]

Si yo identificara cada imagen que cargo con un id/name podria tenerlas identificadas a cada una de las que genero, pero si envio estos datos a un formulario hay alguna manera de extraer la información verificando el ID o el NAME? para saber exactamente cual es la que seleccione?

[caricatos]

Hola:

¡Exactamente... !, al ser un formulario, lo que vale es el name... y se envían de la forma:
name.x y name.y... y si quieres recibirlas con php, los campos que reciben cambian el punto por el guión bajo...

<input name="imagen1"... envían los campos imagen1_x e imagen1_y.

Saludos

[EzekielCeliz]

Iniciado por caricatos

Hola:

¡Exactamente... !, al ser un formulario, lo que vale es el name... y se envían de la forma:
name.x y name.y... y si quieres recibirlas con php, los campos que reciben cambian el punto por el guión bajo...

<input name="imagen1"... envían los campos imagen1_x e imagen1_y.

Saludos

Sigo sin poder hacerlo funcionar, hice un ejemplito rapido para entender el funcionamiento del input type="image":

<html>
<body>
<form>
<input type="image" name="imagen1" src="/imagenes/Garantizada.png">
</form>
</body>
</html>

y al clickear veo que envia por ejemplo: http://localhost/imagen?imagen1.x=8&imagen1.y=20

Ahora bien lo que yo necesito es determinar que imagen es... no donde yo clickeo dentro de la imagen, como puedo verificar cual imagen es la que estoy clickeando?
Puedo verificar si es imagen1 o si es imagen2, etc?

[caricatos]

Hola:

No parece muy difícil de deducir... simplemente ponle distintos nombrea a las imágenes... sólo se enviará la que se pinche... tan solo debes deducir el nombre desechando la parte x,y

Saludos

[EzekielCeliz]

Iniciado por caricatos

Hola:

No parece muy difícil de deducir... simplemente ponle distintos nombrea a las imágenes... sólo se enviará la que se pinche... tan solo debes deducir el nombre desechando la parte x,y

Saludos

Como hago para deducir el nombre con codigo, desechando la partes x,y?

Tengo 4 habitaciones y 5 posibles estados para cada una de ellas,
Nombres de habitaciones: Prado, Nube, Chocolate y Dorada,
Nombre de estados: Disponible, Reservada, Garantizada, Ocupada y Cancelada

Por fecha muestro todas las habitaciones y el estado de cada una de ellas en esa fecha, tenia pensado ponerle por ejemplo a Prado: input type="image" name="<? echo "$nombreimafecha"; ?>" src="/imagenes/Prado.png"> ...

Asi despues cuando clickeo en alguna fecha me sepa decir que es Prado en ESA FECHA y asi consultar el estado, etc.

[caricatos]

Hola:

Un par de formas de hacerlo... con un campo hidden, y aprovechar el evento de clickearlo para llenarlo con el nombre de esa imagen:

<input type="hidden" name="destino" />
<input name="Prado" type="image" onclick="destino.value = this.name" />

Es la opción usando javascript, ya que estamos en este foro... el nombre también podría tener otras referencias tal como mencionas, por ejemplo "Dorada_Ocupada", así sería más fácil en destino...

Y con php con un simple if animado...

if (isset($_POST["Dorada_x"])) //se pinchó en dorada
elseif (isset($_POST["Chocolate_x"])) //se pinchó en chocolate
...

Igual sea más seguro hacer las dos implementaciones...

Saludos

[EzekielCeliz]

Iniciado por caricatos

Hola:

Un par de formas de hacerlo... con un campo hidden, y aprovechar el evento de clickearlo para llenarlo con el nombre de esa imagen:

<input type="hidden" name="destino" />
<input name="Prado" type="image" onclick="destino.value = this.name" />

Es la opción usando javascript, ya que estamos en este foro... el nombre también podría tener otras referencias tal como mencionas, por ejemplo "Dorada_Ocupada", así sería más fácil en destino...

Y con php con un simple if animado...

if (isset($_POST["Dorada_x"])) //se pinchó en dorada
elseif (isset($_POST["Chocolate_x"])) //se pinchó en chocolate
...

Igual sea más seguro hacer las dos implementaciones...

Saludos

Exelente caricatos!!!! esta vez si funciono! envio la variable con todos los datos que yo necesito segun donde yo clickee , pego el codigo:

<?
$result = mysql_query("SELECT * FROM Disponibilidad WHERE FECHA LIKE '$fechactual' ORDER BY Habitaciones_ID ASC");
echo '<table bordercolordark="#610B0B" bordercolorlight="#610b0b" border="2"><tr><td width="322" bgcolor="#A9A9F5" align="center"><b><font siz$
echo '<table bordercolordark="#610B0B" bordercolorlight="#610b0b" border="2"><tr><td width="120" bgcolor= "#A9A9F5" align="center"><b><font si$
while($row = mysql_fetch_array($result)) {
$habi = $row[Habitaciones_ID];
$esta = $row[ESTADO];

$nombre = mysql_result(mysql_query("SELECT Habitaciones_Nombre FROM Habitaciones WHERE Habitaciones_ID LIKE '$habi'"),0,0);
$habima = mysql_result(mysql_query("SELECT Habitacion_Imagen FROM Habitaciones WHERE Habitaciones_ID LIKE '$habi'"),0,0);
$estaima = mysql_result(mysql_query("SELECT Estados_Imagen FROM Estados WHERE Estados_Nombre LIKE '$esta'"),0,0);

$estaname = $nombre . $esta . $fechactual; //concateno todos los datos que necesito para enviar al formulario de reservas, en donde desgloso esta variable :) //

echo '<table bordercolordark="#610B0B" bordercolorlight="#610b0b" border="2"><tr><td width="80">
<input type="image" name="'."$nombre".'" src="'."$habima".'" onclick="destino.value = this.name">
</td><td><input type="image" name="'."$estaname".'" src="'."$estaima".'" onclick="destino.value = this.name"><td></td>
<td>Ya veremos que sigue aca</td></tr>';

//aca tengo dos input type="image" con el primero solo envio el nombre de la habitacion para mostrar la info de la misma, fotito linda, precios y servicios. El segundo es para enviar al formulario de reserva :) //

}
?>

Despues de tantas idas y vueltas me funciono, muchas gracias caricatos por tu disposición!!! saludos!!