Crear mapa con imagenes?

[Dragoon_SC]

Posteo esto por una pregunta que me llego a mi mensaje privado, y quisiera compartirlo con la comunidad ahi va.

Para crear una imagen que contenga varios puntos como links o referencias se usan los mapas un ejemplo:

<map name="organigrama" id="organigrama">
<area alt="" shape="rect" coords="741,139,833,184" onmouseover="javascript: mano();" onmouseout="javascript: normal();" onclick="javascript: muestra('ventana');"/>
<area alt="" shape="rect" coords="618,197,710,243" onmouseover="javascript: mano();" onmouseout="javascript: normal();" onclick="javascript: muestra('ventana');">
<area alt="" shape="rect" coords="458,206,552,251" onmouseover="javascript: mano();" onmouseout="javascript: normal();" onclick="javascript: muestra('ventana');"/>
<area alt="" shape="rect" coords="264,386,359,432" onmouseover="javascript: mano();" onmouseout="javascript: normal();" onclick="javascript: muestra('ventana'); "/>
11);"/>
<area alt="" shape="rect" coords="618,80,709,131" onmouseover="javascript: mano();" onmouseout="javascript: normal();" onclick="javascript: muestra('ventana'); />
</map>
<img src="imgOrganigrama/organigrama.png" usemap="#organigrama" border="0" alt="organigrama" />

asi creamos un mapa dentro de una imagen. Me preguntaron tambien como hacer que como hacerle para que al pasar sobre el area aparesca una ventana. pues yo en este ejmplo propongo un div invisible, de la sieuitne manera:

<div class="ventana" id="ventana" style="display:none; background-color:#FAD572;"> tu texto que quieras aqui;

</div>

y los script aqui

function muestra(id)
{
if(document.getElementById(id).style.display == 'none')
{
if (navigator.appName.indexOf('Microsoft') != -1)
document.getElementById(id).style.display='block';
else
document.getElementById(id).style.display='table-row';
}
else
document.getElementById(id).style.display='none';
}


function mano()
{
document.body.style.cursor = "pointer";
}

function normal()
{
document.body.style.cursor = "default";
}

las ultima 2 funciones las tengo por que al pasar el mouse por arriba le cambiamos el pointer a la manita, esto se pudo haber hecho con un style inline del area del mapa pero en explorer no funcionaba asi que tuve que hacerlo con javascrip y el de nomal es para restablecer el puntero al salir de estos cuadros..

Si tienen otra pregunta pues ahi avien..

[ingeneyro]

ok gracias rob, lo implementare va, si alguien tiene otro ejmeplo o gusta aportar algo sera bien venido

[furoya]

Hola todos :

Dragoon_SC : antes que nada, quería felicitarte por 2 asuntos.
El primero es que no mencionaste el nombre de quien te consultó por mensaje privado; y es que en un foro público eso no se hace jamás, ni tampoco se usa como puente para consultas por e-mail o mensajeros. Al que lo hizo habría que banearlo, pero a mi me parece mejor explicarle esto para que no lo repita; más que nada porque imagino que lo hizo sin mala intención y no quiso ser mezquino o egoísta con la información al resto de la comunidad.

Por el segundo se supone que no habría que felicitarte, cumpliste con tus obligaciones como miembro del Foro; pero igual lo hago y te agradezco por compartir el código con nosotros.

Hace bastante tiempo me costó encontrar un ejemplo de uso de mapas, por suerte ahora ya es algo común y los desarrolladores no se asustan con el código.

Me quedé con eso del cursor ¿por qué no le agregas href="#" onclick="return false" a cada area? Hay otras formas, y Caricatos hizo una lista de métodos para "enlaces falsos"; lástima que no encuentro el tema donde explica cuál es el correcto..

Dejo un enlace a otro tema donde también hablan de mapas.

Efecto pop-up

[Dragoon_SC]

a ok si siento lo que paso no mas que me empezaron a mandar mensajes privaods y no quise hacer de esa respuesta algo personal o privado ya que esto es un foro y de eso se trata de cpartir informacion ya que todo es tti...

Lo del cursor la verdad no me salio o vez y como era nuevo en eso pues no supe manejarlo de otra manera ademas que en mozilla si agarraba ebio pero rer no ...quien sabe si por qe estaba en un mapa noagarraba

[caricatos]

Hola:

Los mouseover/mouseout son un gasto de recursos inútil ya que basta que sea un enlace como explica furoya (¡Hola !), aunque también se podría dejar el estilo cursor: pointer en el propio area... (en explorer no termino de creerme que no te funcione...) además el mouseout es otra cosa que a pesar de todo sobra. Otra forma de que vaya bien es en vez de usar onclick, poner el href del estilo: "javascript: muestra('ventana')"... por cierto los eventos se supone que son "scripts", así que te sobran los prefijos.
Para la ventanita lo más sencillo es un atributo title en los areas...

Tengo un generador de mapas: Creación de áreas en imágenes que tal vez pueda ayudar.

furoya: La verdad es que no recuerdo lo de enlaces falsos, así que no sé donde buscar, lo cierto es que siempre aconsejo reservar los enlaces para enlazar (tag a, o formularios) y para efectos dedicar los eventos, creo que es respetar la semántica de cada recurso.

Saludos

[furoya]

Hola de nuevo :

No te lamentes, Dragoon_SC, lo que hiciste estuvo perfecto. Y si hubieras puesto el nombre no estaría mal tampoco, lo que pasa es que quedaría expuesto a una lluvia de puntos negativos de karma y alguna reprimenda de parte de los moderadores o del resto de la comunidad. De cualquier forma, no creo que lleguen a banearlo. Es más, recuerdo el caso en que un moderador mandó al frente a alguien que pretendía una respuesta para él sólo, y a un moderador nadie se lo iba a discutir ( ... en realidad, creo que sí se lo discutieron); pero supongo que cada caso debe ser "único", nosotros debemos saber cómo responderle de manera que sirva para algo.

Ah!. Y haz arreglar ese teclado, apenas creo que pude entender lo que escribiste.

Lo del cursor es increíble, pero real. Resulta que cuando se inventó el mapa no existía el javascript, y nadie concebía un area sin href -no tenía sentido-, así que MS jamás se ocupó de que aceptara estilos, y no reconoce cursor, ni border, ni otros formatos como los filtros. Firefox sí (al menos los que no son propietarios de IE).

Un dato curioso : IExplorer puede leer los offset de un area con JS, pero FF los ignora. Voy a tener que ajustar algún viejo ejemplo para hacerlo compatible; aunque no sé... se supone que las coordenadas están escritas, es muy fácil calcular la posición y el tamaño de un shape "a mano", sin necesidad de usar JS.


Por otro lado, tú sabes que la edad está haciendo estragos en mi memoria, Caricatos. En verdad, nunca vi ese mensaje que te atribuí. Lo que recuerdo vagamente es que alguien lo mencionaba ante un ejemplo que contenía un href="#". Seguramente guardé el enlace para verlo más tarde, y después lo perdí. Quién sabe cuánto de esto es real y cuánto imaginación.

Además de los ya expuestos, dejo otro método más para hacer "enlaces nulos"

Código:

href = "javascript:void(0)"

saludos
furoya

[furoya]

Sigo sin encontrar ese mensaje, Caricatos; pero el que sí encontré es el de poner el centro de un shape.

Aplicar filtro o similar sobre un elemento SHAPE de una imagen

Como es mi costumbre, la mayoría de los ejemplos de ese tema los dejé muy mal escritos. Si alguien los quiere mirar, sepa que deberá corregir bastante.
Y no me aguanté para hacer una versión compatible al menos con Firefox. Insisto en que sabiendo las coordenadas que nosotros mismos le ponemos, es muy fácil encontrar el centro de cada area, pero lo mismo me encapriché en hacerlo con JS. Dejo el ejemplo aquí.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<script type="text/javascript">

var equis , ye;

function ordNum(alfa, zulu){ 
return (alfa - zulu);
} 

function centra(T){
var elShape = (T.shape).toLowerCase();
var lasCoords = (T.coords).split(",");

if(elShape == "circle"){
equis = lasCoords[0]*1;
ye = lasCoords[1]*1;
}

else if(elShape == "rect"){
var oeste = lasCoords[0] *1;
var norte = lasCoords[1] *1;
var este = lasCoords[2] *1;
var sur = lasCoords[3] *1;

ye = ((sur - norte) / 2) + norte;
equis = ((este - oeste) / 2) + oeste;
}

else{
var equisColec = new Array();
var yeColec = new Array();
var c = 0;
var d = 0;

for(j=0; j<(lasCoords.length); j=j+2){
equisColec[c] = lasCoords[j];
c = c+1;
}

for(k=1; k<(lasCoords.length); k=k+2){
yeColec[d] = lasCoords[k];
d= d+1;
}

var equisOrd = equisColec.sort(ordNum);
var yeOrd = yeColec.sort(ordNum);

var norte = yeOrd[0] * 1;
var sur = yeOrd[equisOrd.length - 1] * 1;
var oeste = equisOrd[0] * 1;
var este = equisOrd[equisOrd.length - 1] * 1;

ye = ((sur - norte) / 2) + norte;
equis = ((este - oeste) / 2) + oeste;

}

T.focus();

document.getElementById('marcaH').style.top = ye +"px";
document.getElementById('marcaH').style.left = equis - 10  +"px";
document.getElementById('marcaV').style.left = equis +"px";
document.getElementById('marcaV').style.top = ye - 10  +"px";
document.getElementById('marcaH').style.visibility = "visible";
document.getElementById('marcaV').style.visibility = "visible";
}
</script>

<style type="text/css">
#marcaH{position:absolute; background-color:red; height:1px; width:21px; overflow:hidden; visibility:hidden; }
#marcaV{position:absolute; background-color:red; height:21px; width:1px; overflow:hidden; visibility:hidden; }
</style>

</head>

<body>
<h2>Encuentra el centro de un <tt>shape</tt>.</h2>

<div style="position:relative; height:300px; width:575px" >
<map name="mimapa" id="mimapa">

<area shape="rect" id="rectangulo" coords="120,100,320,150" href="javascript:centra(document.getElementById('rectangulo'))" title="Click para ver el centro.">

<area shape="poly" id="poligono" coords="350,144,311,160,350,210,390,229,570,194,428,270,118,236,101,203" href="javascript:centra(document.getElementById('poligono'))" title="Click para ver el centro.">

<area shape="circle" coords="69,71,54" id="circulo" href="javascript:centra(document.getElementById('circulo'))" title="Click para ver el centro.">

</map>

<img style="position:relative; height:300px; width:575px" src="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif" usemap="#mimapa" id="imagen" alt="Mapa">

<div id="marcaH"></div><div id="marcaV"></div>
</div>

</body></html>

El más complicado fue -por supuesto- el poly, ya que tuve que recurrir al método sort para array. Les dejo algunos enlaces sobre el asunto.

Manipular array

Métodos de Arrays

Había ,sin embargo, un detalle; era que en alguna versión de IE o de Windows el dibujo que limita el area en foco no se veía. A mi ya no me pasa, pero puede ser que esté en una máquina que ya tenga configurada la opción de mostrar siempre el foco. Recuerdo que lo había 'arreglado' saltando un paso atrás en el historial, pero a la misma página. En realidad engañaba al navegador haciéndole creer que estaba cambiando de documento y así siempre me mostraba el último elemento en foco (para navegar por teclado), cuando en verdad 'reabría' la misma página.
Si alguien tiene aún el mismo problema me avisa y lo corregimos en el ejemplo.