Lamento decir que con el código la consulta está bastante más clara. Ya no hace falta adivinar.
Te cuento una pequeña anécdota,
danihxh.
Hace muuuchos años, en otro Foro de desarrollo web que seguramente ya no existe, había un grupo de gente muy capaz y con muchas ganas de aprender y enseñar lo que sabían.
Pero, como en todo Foro, también estaban los molestos que se dedicaban a postear en medio de un tema interesante sus comentarios descolgados, mordaces, que no aportaban nada sino que empiojaban el tema.
Recuerdo que yo me registré ahí cuando empezaba a aprender algo sobre páginas web, y en algún momento leí uno de estos comentarios fuera de lugar.
Voy a hacer una aclaración sobre esta gente a la que desde hace muy poco tiempo (a pesar de lo que dice Wikipedia) se les dice "troll".
Es cierto que suelen ser personas con algún problema de personalidad, de adaptación a grupos, seguramente arrastrando un complejo (o
complejito) de inferioridad; los comprendo perfectamente porque en eso somos colegas. Pero no necesariamente son unos nabos. Es más, a pesar de lo molesta que es su participación, a veces le dan a un asunto una vuelta de tuerca que de tan ridícula ya es brillante.
Y en ese comentario —que ya no recuerdo a qué venía ni sobre qué trataba— el autor proponía una situación ante un ejemplo dado, que claramente no iba a ocurrir en una página web real, pero que en teoría pura sí era posible y mostraba un "bug" en el código posteado.
De más está decir que ahí también lo ignoraron y siguieron con el debate, pero a mí me quedó dando vueltas ese asunto por la cabeza; y decidí estrenarme en aquél Foro con una de mis clásicas ironías. Le di la razón (bueno, en rigor de verdad, la tenía) y le puse un código que resolvía su objeción ... de una manera tan ridícula que era imposible tomarla en serio. ¡Pero funcionaba!.
Por supuesto que era solamente para devolverle el tiro en su mismo juego, pero no como si fuese un desafío o competencia. Como dije, muchos de estos trolls son muy inteligentes, y reconocen el trabajo de seguirles el hilo, aunque se den cuenta de que claramente no nos vamos a pasar de su bando.
El problema —y esto lo comento para cerrar la
aneda— es que los 'expertos' se enojaron bastante con mi respuesta ... y no entendieron la broma; realmente creyeron que el código iba en serio y que le estaba dando la razón a quien ellos se esforzaban en ignorar. Esa desilusión me alejó varios meses de ese sitio, resulta que no eran tan despiertos como pensaba. Lo que sí quiero destacar es que cuando volví a postear, a mí ese troll nunca me ensució un tema. Creo que él sí entendió, y nunca se lo reconocí.
¡Pero qué tanto...! ¡Si estos sujetos se dedican a arruinar los Foros!
¿En qué estábamos? ¡Ah, sí!, tu consulta,
danihxh.
Entiendes que lo que estás pidiendo es ridículo, ¿no?.
Que una imagen o una parte de ella se "vea" o no da exactamente lo mismo : o está o no está. Y la tuya está. Así que termina tapando tus botones.
Tienes un problema de diseño muy grave ... especialmente porque es de concepto. Yo estoy seguro de que no planteaste ese despropósito para molestar; ¡realmente te pareció una pregunta coherente!
Ese engendro no puede pasar, y al diseñador que lo hace hay que colgarlo de las pestañas con alambre de púa. Como mínimo.
¡Y ni hablar del que lo resuelve!
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>SIMULA TRANSPARENCIA AL EVENTO A TRAVɀS DE IMAGEN.</title>
<script type="text/javascript">
var listado, todosEnlaces, mapaAreas, ajustaDespl, todasAreas ="";
var cadaTopEnlace = [];
var cadaWidthEnlace = [];
var cadaHeightEnlace = [];
var cadaDestino = [];
var codCadaArea0 = "<area shape='rect' coords='1,1,1,1' id='A";
var codCadaArea1 = "' href='#'>"
function creaMapa(){
listado = document.getElementById("enlaces");
todosEnlaces = listado.getElementsByTagName("a").length;
mapaAreas = document.getElementById("tapa");
ajustaDespl = document.body.scrollTop * -1;
for(s=0; s<todosEnlaces; s++){
todasAreas += codCadaArea0 + s + codCadaArea1 + "\r\n";
}
mapaAreas.innerHTML = todasAreas;
leerMedidas();
//alert(mapaAreas.innerHTML)
}
function leerMedidas(){
for(m=0; m<todosEnlaces; m++){
var anchEnlace = listado.getElementsByTagName("a")[m].offsetWidth;
var arrEnlace = listado.getElementsByTagName("a")[m].offsetTop + ajustaDespl;
var altoEnlace = listado.getElementsByTagName("a")[m].offsetHeight + arrEnlace;
var destEnlace = listado.getElementsByTagName("a")[m].href;
cadaWidthEnlace[m] = anchEnlace+10;
cadaHeightEnlace[m] = altoEnlace;
cadaTopEnlace[m] = arrEnlace;
cadaDestino[m] = destEnlace;
}
for(l=0; l<todosEnlaces; l++){
document.getElementById("A" + l).href = cadaDestino[l];
document.getElementById("A" + l).title = cadaDestino[l];
document.getElementById("A" + l).coords = "10,"+ cadaTopEnlace[l] +","
+ cadaWidthEnlace[l] +","+ cadaHeightEnlace[l];
}
//alert(cadaWidthEnlace)
//alert(cadaHeightEnlace)
//alert(cadaTopEnlace)
//alert(cadaDestino)
//alert(mapaAreas.innerHTML)
}
onload = creaMapa;
onscroll = creaMapa;
</script>
<style type="text/css">
body {margin: 15px 10px; }
a {font-size:20pt; line-height: 40pt; background-color: yellow; width: 100pt;
display: block; font-weight: bold; }
</style>
</head>
<body>
<div style="height: 300px; width: 400px; margin-top:30pt; " id="enlaces">
<a href="javascript:alert('A')"> Alfa</a><br>
<a href="javascript:alert('B')"> Bravo<br>?</a><br>
<a href="javascript:alert('C')"> Charly</a><br>
<a href="javascript:alert('D')"> Delta</a><br>
<a href="javascript:alert('E')"> Eco</a><br>
<a href="javascript:alert('F')"> Foxtrot</a><br>
<a href="javascript:alert('G')"> Golf</a><br>
<a href="javascript:alert('H')"> Hotel</a><br>
<a href="javascript:alert('I')"> Indio</a><br>
<a href="javascript:alert('J')"> Julieta</a><br>
<a href="javascript:alert('K')"> Kilo</a><br>
<a href="javascript:alert('L')"> Lima</a><br>
<a href="javascript:alert('M')"> MIke</a><br>
<a href="javascript:alert('N')"> Noviembre</a><br>
<a href="javascript:alert('O')"> Oscar</a><br>
<a href="javascript:alert('P')"> Papa</a><br>
</div>
<img usemap="#tapa" src="http://img853.imageshack.us/img853/5572/degrad018my.png" style="position: fixed; top: 0; left: 0;
border: 2px solid red; color: red; background-color:transparent; width:400px;
height: 300px; " id="degrad">
<map name="tapa" id="tapa"></map>
</body>
</html>
