Disculpa,
Wox17, pero cuando hablaste de
shape todos supusimos que te referías a áreas poligonales. De hecho, el impresionante ejemplo de
caricatos se justifica por eso. Si tienes que destacar rectángulos no necesitas generar nada en un servidor, ni siquiera necesitas imágenes para superponer (aunque puedes usarlas y quizá hasta quede mejor), y si tu sitio acepta HTML y JS, también debe aceptar CSS; digo, porque casi se puede hacer sólo con CSS. El problema sería la "variable", pero algo se puede inventar.
Mira, ya que estamos aquí, te dejo un ejemplo, que ni siquiera usa
area, porque tampoco es indispensable. Deberías haber detallado mejor lo que precisabas en vez de proponer una solución que claramente no dominas.
Eso de la variable para cambiar entre "rojo" y "verde" lo manejas desde un mensaje de confirmación en cada "ventanita". En tu página no tengo idea de cómo será, porque tampoco pusiste eso en el ejemplo.
Al menos averiguamos que metiste todo en una tabla. En fin, peor es nada.
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>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>CAMBIA COLOR DE UN SECTOR RECTANGULAR (DESTACA PARTE DE IMAGEN).</title>
<script type="text/javascript">
function elige(T) {
T.style.backgroundColor = "";
var miColor = T.className;
var pregunta = confirm("¿Cambiar la ventana \""+ miColor +"\"?");
if (pregunta) {
T.className = (miColor == "red") ? "green" : "red";
}
T.title = T.className;
}
</script>
<style type="text/css">
.green {background-color: green; }
.red {background-color: red; }
div {cursor: pointer;}
</style>
</head>
<body>
<h2>Cambia el color de partes destacadas con capas rectangulares "rojas" o "verdes" en una
imagen de fondo.</h2>
<table title="Lux Lindner." border=0 cellpadding=0 cellspacing=0 style="background-image:
url('http://img684.imageshack.us/img684/9161/luxlindner.jpg'); position: relative; border-collapse: collapse; " ><tbody>
<tr>
<td style="position: relative; width: 480px; height: 640px; ">
<div onclick=elige(this) class=red style="width:49px; height:64px; position: absolute;
top: 195px; left: 92px; opacity:.5; " title="red"></div>
<div onclick=elige(this) class=green style="width:49px; height:64px; position: absolute;
top: 195px; left: 168px; opacity:.5; " title="green"></div>
<div onclick=elige(this) class=red style="width:49px; height:64px; position: absolute;
top: 195px; left: 251px; opacity:.5; " title="red"></div>
<div onclick=elige(this) class=green style="width:49px; height:75px; position: absolute;
top: 315px; left: 94px; opacity:.5; " title="green"></div>
<div onclick=elige(this) class=red style="width:49px; height:75px; position: absolute;
top: 315px; left: 167px; opacity:.5; " title="red"></div>
<div onclick=elige(this) class=green style="width:49px; height:79px; position: absolute;
top: 315px; left: 245px; opacity:.5; " title="green"></div>
</td>
</tr>
</tbody></table>
</body>
</html>
No le puse el filtro para IE, así que no se va a ver bien en versiones por debajo de la 9. Igual se entiende. Y si hace falta se le agrega, la forma está en cualquier tutorial.
◙