Foros del Web » Programando para Internet » Jquery »

Evento con jquery en un map-area-shape

Estas en el tema de Evento con jquery en un map-area-shape en el foro de Jquery en Foros del Web. Buenas. Tengo problemas con un evento con jquery. Explico la situación: Tengo una imagen de un tablero (parecido al juego de la oca). La imagen ...
  #1 (permalink)  
Antiguo 21/04/2011, 04:42
 
Fecha de Ingreso: agosto-2007
Mensajes: 48
Antigüedad: 16 años, 9 meses
Puntos: 2
Pregunta Evento con jquery en un map-area-shape

Buenas.

Tengo problemas con un evento con jquery. Explico la situación:
  • Tengo una imagen de un tablero (parecido al juego de la oca).
  • La imagen está mapeada con <map> y <area>, que identifican unas casillas especiales, en los que tiene que ocurrir un evento al ponerse las fichas encima.
  • Tiene dos fichas (con el atributo "draggables") que se pueden mover por el tablero libremente.

Lo que quiero es que al poner la ficha encima de la casilla surja el evento "dialog" de jquery, pero ese evento lo lanza siempre que suelto ("dropeo") la ficha, en cualquier lugar del tablero. Este es el código Jquery (falta el código del diálogo que lo suprimo para no abultar):

Código HTML:
 <script>
		$(function() {
			$( "#ficha1" ).draggable();
			$( "#ficha2" ).draggable();
		});
		
	$(function() {
		$( "#droppable" ).droppable({
			drop: function( event ) {
				$( "#dialog" ).dialog( "open" );
				return false;
			}
		});
	});
	</script> 
Y el código HTML:

Código HTML:
<div id="main" style="width:1030px; position:absolute; height:768px; background-color:#00FF00; z-index:1;">
	<img src="imagenes/planoweb.jpg" border="0" usemap="#Map" alt="mapa" />
  <map name="Map" id="Map">
    <area id="droppable" shape="poly" coords="457,622,457,620,442,646,459,668,491,628" href="#" alt="casilla 4" />
  </map>
</div>
<!-- Fichas -->
<div id="ficha1" style="position:absolute; top:580px; left:550px; z-index:2;">
<img src="imagenes/ficha1.png" border="0" />
</div>
<div id="ficha2" style="position:absolute; top:540px; left:550px; z-index:3;">
<img src="imagenes/ficha2.png" border="0" />
</div>
<!-- Fin Fichas -->
<!-- Dialogo de instrucciones -->
<div id="dialog" title="Instrucciones del juego.">
	<p>Probando evento.</p>
</div>
<!-- Fin Dialogo de instrucciones --> 
Como ven, el ID del area es "droppable", y en el código jquery está puesto que cuando dropeen algo allí surja el evento dialog. Pero surje siempre que se dropea, en cualquier lugar del tablero. ¿Que puedo hacer?

Muchas gracias de antemano.

Etiquetas: area, event, evento, map
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 03:08.