Gracias Furoya por tu respuesta. Te comento:
A continuación te pongo el trozo del codigo que de momento estoy utilizando. Con esto he conseguido ver mi imagen y dos recuadros verde y rojo. Aunque ahora salen los dos a la vez. Me falta el paso de la variable. No necesito hacer la función del principio pidiendo la variable, sino que en la pantalla hay un selector de años con una variable definida-> v_año. Si el usuario coge el año 2012 en el selector, debería aparecer toda la imagen con la primera area, la Roja (solo viendo la imagen con el area roja) y si escoge 2011 el area verde.
El selector tiene definida la variable como: @{v_año}
Imagino que tengo que cambiar "onclick=elige(this)" de las dos areas definidas por la variable...pero no sé como hacerlo.
</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="Test" border=0 cellpadding=0 cellspacing=0 style="background-image:
url('../imagentest.jpg'); position: relative; border-collapse: collapse; " ><tbody>
<tr>
<td style="position: relative; width: 389px; height: 333px; ">
<div onclick=elige(this) class=red style="width:192px; height:156px; position: absolute;
top: 3px; left: 5px; opacity:.5; " title="red"></div>
<div onclick=elige(this) class=green style="width:186px; height:156px; position: absolute;
top: 3px; left: 197px; opacity:.5; " title="green"></div>
</td>
</tr>
</tbody></table>
</body>
</html>
Muchas gracias por tu tiempo