наложение карт изображений (image map)
 

Посоветуйте, пожалуйста, решение...

имеется несколько прозрачных картинок лежащих друг над другом,
каждая картинка имеет клиабельную маску (USEMAP):

...
<div id="CONTAINER_LAY">
	<div id="DLAY1"> <img name="LAY1" src="LAY1.png" usemap="#_MAP_LAY1"/> </div>
	<div id="DLAY2"> <img name="LAY2" src="LAY2.png" usemap="#_MAP_LAY2" /> </div>
	<div id="DLAY3"> <img name="LAY3" src="LAY3.png" usemap="#_MAP_LAY3" /> </div>
</div>

...
<MAP NAME="_MAP_LAY1"><AREA SHAPE="polygon" COORDS="570,292,570,...</MAP>
<MAP NAME="_MAP_LAY2">...</MAP>
<MAP NAME="_MAP_LAY3">...</MAP>

предусмотрено ВКЛ/ОТКЛ картинок, через js ф-ции типа:

function _show_LAY1(obj)
{ if(obj.checked) document.images['LAY1'].style.visibility="visible";
  else document.images['LAY1'].style.visibility="hidden";
}

может быть существует способ добиться кликабельности на картинках LAY1, LAY2 при вкл. LAY3
Предполагаю решение в динамическом формировании маски (MAP) в зависимости от включ. картинок
и динамическом назначении этой маски самой верхней из отображаемых картинок.
Но, возможно ли это сделать на JavaScript, если можно пример, или другое направление

спасибо

image map - зло. Юзай SVG.