[SOLUCIONADO] Utilizando <map> y <area> para luego hacer REQUEST ???

[jordy48]

Hola buen dia!

Veran, estoy haciendo una especie de web y me he enfrentado con un problemita:

Para empezar, tengo en una página una imagen, a esta imagen la he mapeado con <map> y ya le he seleccionado sus <area>, ahora bien, quiero que al hacer click, se envie alguna informacion del area que fue seleccionada (ya sea su id, title, etc) para que digamos en la otra página a donde nos mande hagamos un _REQUEST("title") (por ejemplo) y asi saber a que parte de la imagen el usuario ha dado el click y a su vez manipular esta información.



La imagen que empleo es la siguiente y un usuario alumno desea consultar la información acerca de la materia a la que él le ha dado el click






Bueno, esa viene siendo la parte uno, poder detectar a que le dió click y enviar esta informacion.

La razón por la que quiero esta info es para la parte dos la cual consiste en que al enviar esa info, se lo mando a un php que haga ese _REQUEST y con esa información hacer una consulta en la base de datos de ahi, regresarme a la misma página (la anterior) y mostrar a un lado de la imagen el resultado de la consulta en la BD.


No se si me he explicado muy bien, soy muy novato en esto de las aplicaciones web. Cual quier detalle que tenga que aclarar diganme, pues esta tarea me urge y he puesto mi duda aqui porque he visto que hay muchos expertos en el asunto


GRACIAS

[marlanga]

Los <area> tienen un atributo href que es el enlace a donde te mandará cuando pinches sobre ese elemento. Pon en cada enlace, el parámetro que le quieras pasar. Pero no a otra página, si no a sí misma. Es decir, que se queden así: href="?curso=0A0C"

Esa página, mediante PHP, haz que esté atento a si llega el parámetro curso, usando $_GET["curso"]. Si no llega, dibuja sólo tu mapa de enlaces. Si llega, dibuja el mapa de enlaces y también el div ese que necesitas con los datos recuperados de la BD.

[IsaBelM]

el elemento area admite el atributo alt y un evento, de tal modo que puedes hacer algo como esto

<area shape="" coords="" onclick="fnc(this.alt)" alt="lo que sea">

a partir de aquí es usar ajax

[jordy48]

IsaBelM, perdona pero no entendí nada de lo que me dijiste y no se que es ajax


marlanga, lo que dices suena interesante pero no se si podrias explicarte un poco mas. Por lo que te entiendo a primera vista es que dentro de href envie el ID de la materia, y con eso hacer la consulta en la BD, es correcto?

Empezare a probar a ver que pasa pero MUCHAS GRACIAS por sus respuestas

[marlanga]

En una url se pueden pasar parámetros al servidor.

Se hace así:

www.mipagina.com?parametro1=5&parametro2=hola

Con eso le he pasado dos parámetros al servidor, parametro1 y parametro2. Si el servidor está preparado, y hace un $_GET["parametro1"], recuperará el valor 5, idem con parámetro 2.

Por otro lado, si una página quiere poner un enlace a sí misma, mandándose parámetro, suponiendo que estemos en www.mipagina.com, pondría:

Código HTML:

<a href="www.mipagina.com?parametro1=5&parametro2=hola">Misma pagina</a>
 

O de forma resumida

Código HTML:

<a href="?parametro1=5&parametro2=hola">Misma pagina</a>
 

Por eso el enlace que puse en el primer post tiene esa forma.

Así que básicamente, tienes que enviar como parámetro en cada HREF de cada <area> (que en el fondo, son enlaces) el identificador de su curso correspondiente.
Todo esto se hace en HTML plano, manualmente.

Y en ese mismo archivo, pero en la parte de PHP, tendrás que comprobar si te llega el parámetro "curso". isset($_GET["curso"]) te dice si ese parámetro existe. Si existe, utulizas ese identificador para recuperar la información del curso de la base de datos, y imprimir esa información en el div correspondiente, debajo del mapeado de la imagen, en un lateral, o donde veas apropiado. Y si no existe la variable curso, o la consulta te dice que no hay ningun curso con ese ID, dejas el div vacío. Todo esto se hace con PHP y un poco de mysql. Es básico, pero si no tienes nociones de proramación, pide ayuda en la facultad de informática xd.

[jordy48]

Se de programar, pero en mi curso de aplicaciones web de la carrera de programación el profe que me imparte la clase es pésimo entonces no se mucho y se me dificulta.


Gracias me ha quedado mas claro, pero te queria preguntar sobre el detectar si existe, medio te entendi

Entonces seria algo como:

Código HTML:

//Codigo php
if ("curso".isset($_GET["curso"])) 
{
      $curso = $_GET["curso"];
      $consulta = //Usamos $curso
 
      //Hacemos la consulta en la BD y mostramos
}
else
{
//No hacemos nada
}
 

Por cierto, porque utilizaste <a href="">
??? no deberia ser area?



Muchisimas gracias me ha quedado mas claro :D

[marlanga]

isset es una función (no un método).
así que quedaría

Código PHP:

$existeCurso=false;
if (isset($_GET["curso"])) 
{
      $curso=$_GET["curso"];
     //Hacer todo el codigo de consulta con mysql, y demás, metiendo la información en algún tipo de estructura como un array asociativo de PHP.
    //Quedaría algo parecido a
     $info=array("titulo"=>"calculo", =>"creditos"=>12);
     $existeCurso=true;
}
 

Luego en la parte de HTML, tendrás algún elemento donde imprimir los datos:

Código HTML:

<div>
    <?php if($existeCurso) { ?>
    <h2><?php echo $info["titulo"]; ?></h2>
    <p>Créditos: <?php echo $info["creditos"]; ?></p>
    <?php } ?>
</div>
 

[jordy48]

Muchas gracias nuevamente Marlanga, me ha sido de mucha utilizadad tu ayuda, ya estoy haciendo eso y ya llevo un avance.


Creo que cualquier cosa volvere a recurrir a ti en este hilo :D


Gracias!!!

[IsaBelM]

para futuras lecturas

Iniciado por jordy48

IsaBelM, perdona pero no entendí nada de lo que me dijiste y no se que es ajax

hay que pensar si se quiere que se recarge la página cada vez que, en este caso, se haga una consulta a la base de datos. en caso que la respuesta sea no, una de las soluciones es ajax.

ajax es el acronimo de una tecnología basada en javascript asíncrono y xml (no merece mucho su lectura)

como se hace??

en el html de mi anterior post, vemos que el elemento area tiene asignado un evento y éste a su vez invoca a una función. pues esta es la función

function fnc(data) {
// creamos el objeto
var obj=new XMLHttpRequest();
// hacemos la petición al archivo .php
obj.open('get', 'archivophp.php?curso='+data, true);
obj.onreadystatechange=function(){
if (obj.readyState==4) {
if(obj.status==200){
// imprimimos la respuesta del .php
document.getElementById('imprimeRespuesta').innerH TML = obj.responseText;
}
}
}
obj.send(null);
}

de tal modo que desde la página A se puede acceder y ejecutar la página B e imprimir la respuesta de la página B en la A sin tener que recargar esta