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.