Добрый день. Необходимо разместить интерактивную карту на сайте чтобы выглядела как прямоугольник с сглаженными округлыми краями.
Пытался реализовать таким образом: создал первый DIV присвоил ему z-index=2 в котором разместил таблицу C зелёной пустой ячейкой. На втором DIV (присвоил z-index=1) разместил карту. В итоге получилась карта с аккуратными сглаженными краями. Но при этом карта "перестала быть интерактивной", тоесть утратилась возможность увеличивать размер, перемещать метки и т.д. Думаю что это именно из-за z-index. Пожалуйста помогите реализовать отображение интерактивной карты под такой маской. Как действовать?
<!-- блок Карта. Начало. -->
<div id="map_container">
<!-- блок таблицы (слой-маска) -->
<div id="layer1">
<table width="331" height="249" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="3">
<img src=".."></td>
<td>
<img src=".."></td></td>
<td rowspan="3">
<img src=".."></td></td>
</tr>
<tr>
<td>Пустая ячейка под карту</td>
</tr>
<tr>
<td>
<img src=".."></td></td>
</tr>
</table>
</div>
<!-- cсама карта -->
<div id="YMapsID"></div>
</div>
<!-- Конец блока Карта. -->
#map_container {
z-index: 1;
position:relative;
height:249px;
width:331px;
}
#layer1 {
z-index: 2;
position:absolute;
top:0;
left:0;
}
#YMapsID {
z-index: 1;
vertical-align:bottom;
position:absolute;
top:40;
left:9;
width:300px;
height:190px;
}