Доброго времени.
Взял образец баннера и переделал под новый сайт. По задумке при наведении на элементы комнаты должен меняться цвет самого элемента, остальное остаётся без изменения. Но к сожалению не всё работает как надо, а именно. При наведении на определённый элемент становятся активными или несколько или вообще на "работает" нужное поле. В исходнике поля элементов между собой не пересекаются, друг друга не "задевают". Пересмотрел весь код, перепробовал... не работает. Не пойму что я не так делаю.
Сам баннер
тут
Код
<!-- bannervko -->
<div id="imgMapCar" style="width: 1018px; height: 392px; position: relative; top: 0; left: 0; margin: 0; padding: 0;">
<img src="images/plg/fon.png" alt="Баннер-меню комнаты" width="1018" height="392"/>
<map name="map">
<area shape="poly" alt="Пол" href="banner.php" title="Пол" coords="293,303,301,363,351,375,354,314,361,313,435,315,449,324,446,348,461,360,461,374,580,371,580,361,446,314,425,308,358,307,329,323,299,299" />
<area shape="poly" alt="Инструменты" title="Инструменты" coords="360,377,413,390,457,382,458,367,442,360,441,325,428,320,393,320,362,320" href="banner.php" />
<area shape="poly" alt="Мебель" href="banner.php" title="Мебель" coords="419,237,452,231,646,253,644,332,554,340,451,305,431,299,347,306,328,311,307,296,308,262,384,252" />
<area shape="poly" alt="Мебель" title="Мебель" coords="605,69,852,41,1012,18,1010,315,929,335,752,281,725,263,691,252,606,222" href="banner.php" />
<area shape="poly" alt="Пожар" title="Пожар" coords="726,276,723,364,692,366,681,322,678,294,698,278" href="banner.php" />
<area shape="poly" alt="Окно" href="banner.php" title="Окно" coords="464,87,465,196,586,195,587,84" />
<area shape="poly" coords="54,103,70,247,217,272,377,249,374,103,108,96,74,88" href="banner.php" alt="Бельё" title="Бельё" />
<area shape="poly" alt="Пыль" nohref title="Пыль" coords="192,312,190,289,214,279,247,279,260,296,255,318,244,332,234,336,219,331,205,323" />
</map>
<div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;">
<img src="images/plg/divan.png" width="357" height="120" style="top: 229px; left: 289px; position: absolute; visibility: hidden; height: 125px; width: 389px;" />
<img src="images/plg/veshi.png" width="367" height="184" style="top: 85px; left: 44px; position: absolute; visibility: hidden; width: 352px;" />
<img src="images/plg/divan.png" width="357" height="120" style="top: 229px; left: 289px; position: absolute; visibility: hidden; height: 125px; width: 389px;" />
<img src="images/plg/instrument.png" width="94" height="69" style="top: 307px; left: 353px; position: absolute; visibility: hidden; width: 98px; height: 73px;" />
<img src="images/plg/kuhny.png" width="362" height="293" style="top: 50px; left: 607px; position: absolute; visibility: hidden; width: 390px;" />
<img src="images/plg/ognetu.png" width="45" height="87" style="top: 273px; left: 681px; position: absolute; visibility: hidden;" />
<img src="images/plg/okno.png" width="129" height="117" style="top: 86px; left: 468px; position: absolute; visibility: hidden; width: 132px;"/>
<img src="images/plg/pil.png" width="63" height="49" style="top: 279px; left: 193px; position: absolute; visibility: hidden;"/>
<img src="images/plg/tp.gif" width="1018" height="392" nohref border="0" style="top:0; left:0; position: absolute; visibility: visible;" usemap="#map" alt="Наведите курсор на интересующий вас элемент" title="Наведите курсор на интересующий вас элемент" />
</div>
<script type="text/javascript">
(function(e){e(document).ready(function(){var t=e("#imgMapCar map area");var n=t.length-1;var r=e("#imgMapCar div img");t.hover(function(){if(e(this).index()!=n){r.eq(n-e(this).index()).css("visibility","visible")}r.eq(0).css("visibility","visible")},function(){if(e(this).index()!=n){r.eq(n-e(this).index()).css("visibility","hidden")}r.eq(0).css("visibility","hidden")})})})(jQuery);
</script>
