Ver Mensaje Individual
  #3 (permalink)  
Antiguo 22/10/2004, 12:23
furoya
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Hola maf , Eztopa :

No creo que haya forma. Lo mejor que se puede hacer es poner el área en foco, para destacarla con la forma del SHAPE.

Otra sería usar una imagen o una capa semitransparente que se ubicara en las mismas coordenadas y con el mismo tamaño del SHAPE. Pero no tendrá la misma forma, a menos que sea RECT.

Código:
 

<HTML><HEAD>
<style>
#marca{position:absolute; font-size:30pt; color:red}
</style>
<BODY onload="marca.focus()">
<button onclick="circulo.focus()">circulo</button>
<button onclick="rectangulo.focus()">rectangulo</button>
<button onclick="poligono.focus()">poligono</button><br>
<button onclick="marca.style.top=imagen.offsetTop+circulo.offsetTop+(circulo.offsetHeight/2); marca.style.left=imagen.offsetLeft+circulo.offsetLeft+(circulo.offsetWidth/2)">Flecha circulo</button>
<button onclick="marca.style.top=imagen.offsetTop+rectangulo.offsetTop+(rectangulo.offsetHeight/2); marca.style.left=imagen.offsetLeft+rectangulo.offsetLeft+(rectangulo.offsetWidth/2)">Flecha rectangulo</button>
<button onclick="marca.style.top=imagen.offsetTop+poligono.offsetTop+(poligono.offsetHeight/2); marca.style.left=imagen.offsetLeft+poligono.offsetLeft+(poligono.offsetWidth/2)">Flecha poligono</button><br>

<MAP NAME="mimapa">
<AREA SHAPE=rect id="rectangulo" COORDS=120,100,320,150 HREF="#" onclick="return false">
<AREA SHAPE=poly id="poligono" COORDS=350,144,311,160,350,210,390,229,570,194,428  ,270,118,236,101,203 HREF="#" onclick="return false">
<AREA SHAPE=circle COORDS=69,71,54 id="circulo" HREF="#" onclick="return false">
</MAP>
<IMG SRC="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif" USEMAP="#mimapa" height=300 id=imagen>
<font id="marca">&#9650;</font>

</BODY></HTML>
En el ejemplo la flecha no está exactamente en el medio del área porque es un caracter, usando una imagen es más fácil de hacer.

saludos

furoya

[EDIT]

El ejemplo anterior no es compatible -al menos- con Firefox2, ya que no puede leer los offset del shape.
En el tema

Crear mapa con imagenes?

puse otra versión compatible que usa una forma distinta para ubicar las coordenadas del centro.

Aprovecho para dejar otros enlaces relacionados

sobre MAP y AREA...

Ayuda con Javascrip super Urgente

[/EDIT]

Última edición por furoya; 18/04/2008 a las 08:27 Razón: agregar enlaces