Dibujar rectangulo cuando pase por encima sabiendo coordenadas

[Enea]

Buenas, hace algun tiempo estuve consultando como podía apartir de marcar puntos con el ratón guardar las coordenadas para después con la librería GD de php representar esos puntos por medio de un rectangulo...
El script que conseguimos funciona genial y estoy muy contenta.
Ahora teniendo en cuenta que esas coordenadas estan guardadas,
si yo paso por la imagen sin ningun rectangulo marcado y alguna zona esta dentro de las coordenadas me gustaría que se dibujara el rectangulo al pasar por encima..
No sé si me explico, me entendeis?
Al fin y al cabo es que se dibuje el rectangulo cuando pase por encima de su zona sabiendo yo las coordandas...
Muchas gracias!

[Kernellover]

Creo que quieres que se dibuje al tiempo que desplazas el raton por la pantalla...

Me temo que para ello la única solucion que veo posible es usar un lenguaje dinamico de cliente (como java o javascript) y no de servidor (como PHP) a o ser que tratesde utilizar los sokets de php, pero no creo que resulte muy rapido.

Por dios corregidme si me he equivocado en algo.

Suerte y gracias!

[Danger_]

definitivamente el tema no es parte de php, ahorita hay un tema reciente respecto a saber las coordenadas de un objeto en javascript, hechale un ojo, quizaz te sirva.

Saludos !

[Cluster]

En javascript o flash .. o algún tipo de ActiveX para tal fin podrías hacerlo . .pero no es taréa de PHP.

Un saludo,

[caricatos]

Hola Enea:

Me acuerdo de ese tema, creo que con las cordenadas, incluso sin el uso de las librerías GD, puedes crear una capa vacía con el fondo transparente y darle valores al borde para crear ese efecto.

Siendo x1, y1 y x2, y2 las cordenadas, podría ser así:

caja = document.createElement("div");
with (caja) {
onmouseover = function() {
this.style.border = "1px dotted gray";
}
onmouseout = function() {
this.style.border = "0px";
}
with (style) {
top = y1 + "px";
left = x1 + "px";
width = (x2 - x1) + "px";
heyght = (y2 - y1) + "px";
}

}

Bueno... es una idea y espero que te sirva.

Saludos

[Enea]

Si no he entendido mal el script actuaría de la siguiente forma:
Al pasar por encima de la capa marcaría el borde definido por las coordenadas.
Es algo parecido pero no exactamente lo que quiero conseguir..

Imagina q una misma imagen tiene 3 rectangulos definidos
(Por ej.artículos de colegio: un lapiz, goma y un cuaderno), yo tengo un listado de artículos al lado y cuando pincho encima de la referencia del lapiz, goma o cuaderno se me marca (el q corresponda) con un rectangulo en la imagen. Eso ya lo tengo conseguido...

Ahora me gustaría q t funcionara al revés, al pasar por encima del lapiz, éste se marque con un rectagulo y a la vez se coloree la referencia del listado.

Eso es lo que pretendo conseguir! Pero no tengo ni idea de como :(

Había pensado q igual generando mapa de imagenes a través de las coordenadas q tengo guardadas, pero no sé si funcionaría y todo tiene q ser dinámico..

Alguna idea? Por donde puedo tirar?

(Si salgo algún dia de esta tengo q hacer un manual! Mae mia... XD)

[caricatos]

Hola otra vez:

Creo que es el mismo ejemplo el que te voy a mostrar (pero retorcado):

Cuando se ponen las coordenadas, se pide un nombre, y luego se genera la capa y se añade eventos onmouseover onmouseout para resalte y con el texto recogido con un prompt se asigna un atributo title a las imágenes de la página principal...

Sé que no es lo que quieres, pero la forma de añadir los eventos e interactuar con la página principal supongo que puede servirte.
La creación de la capa es así:

Código:

function leeParte(capa)	{
	coordenadas[contador ++] = ratitaX();
	coordenadas[contador ++] = ratitaY();
	if (contador % 4 == 0)	{
		x1 = coordenadas[contador - 4];
		x2 = coordenadas[contador - 2];
		y1 = coordenadas[contador - 3];
		y2 = coordenadas[contador - 1];
		_x = menor(x1, x2);
		_y = menor(y1, y2);
		anchura = dife(x1, x2);
		altura = dife(y1, y2);
		mensaje = prompt("Introduzca título");
		cuadradito = document.createElement("img");
		with (cuadradito)	{
			id = "capa" + n++;
			title = mensaje;
			src = ruta
				+ "anchura=" + anchura
				+ "&altura=" + altura
				+ "&x=" + _x
				+ "&y=" + _y
				+ "&origen=WORLD3.png";
			style.margin = "10px";
			style.border = "inset 1px #eeeeee";
			style.left = (_x - 1) + "px";
			style.top = (_y - 1) + "px";
			style.position = "absolute";
		}
		capa.parentNode.appendChild(cuadradito);
		with (document.getElementById(cuadradito.id))	{
			if (document.all)
				onmouseover = imagenOver;
			else
				addEventListener("mouseover", imagenOver, true)
			if (document.all)
				onmouseout = imagenOut;
			else
				addEventListener("mouseout", imagenOut, true)
		}
		parent.sumaParte(_x, _y, anchura, altura, mensaje);
	}
}

Fíjate que para añadir los eventos he usado addEventListener para los navegadores mozilla, porque no me aceptaba la asignación directa.

Saludos

[Enea]

Tras seguir vuestros consejos y hacer pruebas y más pruebas he conseguido hacer esta función que (según veo en el código pasa bien los valores de coordenadas)
pero ver la capa en ningun momento... No da ningún error.. ¬¬ que raro, estoy pensando que igual tiene que ver con el z-index porque esta capa actuaría encima de otra... pero por más
que intento ponerle z-index no funciona (me da errores de sintaxis).
Como pondría en este caso un z-index alto para que no se pisara con otras capas? O estoy haciendo mal otra cosa?
Muchas gracias por los ejemplos, me han ayudado de guía (aunque el segundo no demasiado porque no logro entenderlo del todo)
Hasta pronto!

Código:

function crea_rectangulos(serie)
{
$Serie=serie;
<? 
	$Articulos_serie=mysql_query("Select x1,x2,y1,y2 from articulos where Serie=$Serie");
	while ($Serie_art=mysql_fetch_array($Articulos_serie))
		{ ?>
		
		x1=<? print $Serie_art[x1] ?>;
		x2=<? print $Serie_art[x2] ?>;
		y1=<? print $Serie_art[y1] ?>;
		y2=<? print $Serie_art[y2] ?>;

		caja = document.createElement("div");
				
		with (caja) 
		{
		onmouseover = function() { this.style.border = "1px dotted gray"; }
		onmouseout = function()   { this.style.border = "0px"; }
		with (style) 
			{
				top = y1 + "px";
				left = x1 + "px";
				width = (x2 - x1) + "px";
				height = (y2 - y1) + "px";
			}
		}
		<? } ?>
}

[Enea]

He probado con Zindex=10 y ya no me da error pero tampoco me funciona...
Que puede estar pasando?

[Enea]

Bufff... me he estado liando de mala manera con esto...
Pero bueno, a base de pegarme cabezazos contra el monitor se me ocurrió una idea que resultó muy sencilla...

Os cuento...

Mi objetivo era que teniendo una imagen para una serie de x articulos se pudiera diferenciar en la imagen cada artículo con un marquito de otro color, eso lo conseguimos en su momento en otro post, yo ahora lo que quería era que al pasar por encima de la imagen sin marcos se marcaran los mismos a la vez que se seleccionaban en el listado de articulos (referencia, precio...)

Lo hacía muy complicado hasta que caí que podía hacerlo de otra manera...
Creando las capas que correspondieran a esa imagen al cargar la página pero con fondo gif transparente y haciendo una serie de funciones al hacer mouseover y mouseout.

function Mostrar_Marco(Id)
{
Marquito=document.getElementById(Id);
Marquito.style.borderWidth = "2px";
Marquito.style.borderStyle = "solid";
Marquito.style.borderColor = "#106fa7";
}
function Ocultar_Marco(Id)
{
Marquito=document.getElementById(Id);
Marquito.style.borderWidth = "0px";
}

Bueno, como siempre digo... YO ME LO GUISO YO ME LO COMO!
En fin, creo que doy la web por fin por acabada, a ver que dice el cliente esta tarde..
Prometo que cuando tenga un rato haré un tutorial sobre todo este tema porque creo que podría resultar interesante...
Hasta luego! y muchas gracias!

[caricatos]

Hola Enea:

Me alegro de que al fin te funcionase, tal vez en tus mensajes no te haya entendido bien, pero espero haberte podido ayudar.

Un apunte adicional: para los fondos puedes usar el color transparente sin necesidad de usar imágenes:
style="background-color: transparent:"

Y para mostrar/ocultar también existe el estilo visibility, que te ahorraría redibujar los bordes (supongo que lo sabes )

Bueno, suerte con el trabajo.

Saludos

[Enea]

Lo de visibility si lo sabía pero como no tenía contenido en la capa y quiera que al pasar por encima de esta me cambiara el estilo del cursor obté por esa solución...
Y lo de transparent no lo sabía, y eso que ayer lo buscaba.. :)
Esa me la apunto! :)
Muchas gracias como siempre por todo!
P.d: Tienes razón no sé explicarme por eso decía que yo me lo guiso y me lo como... (Prometó que siempre lo intento con todas mis ganas)