Shevskay

Большооое, Спасибо, RUS! Картинки там - это ссылки на сайт автора, мне кажется это подойдёт

А может кто сталкивался с подобной задачей, поделитесь таким скриптом, Поо-жаа-луйстааа!

Я так поняла, что html и стилями так не сделать, тогда во флешь придётся пробовать делать видимо, спасибо Всем за ответы.

Здравствуйте! Подскажите, пожалуйста, как сделать анимированный баннер, чтобы в нём было несколько картинок, каждой из этих картинок соответствовала своя ссылка, ведущая на конкретный раздел сайта, пример: www.1c-bitrix.ru ?

Спасибо, rus, за подсказку, наведение на картинку это лучший вариант, тем более оказывается можно сделать средствами css.

Здравствуйте, подскажите пожалуйста, как сделать из такого меню так, чтобы при наведении мышкой на картинку (или нажатии) открывался бы вниз многоуровневый список? Вот html код создаваемого меню: <td valign="top"><table border="0" cellpadding="0" cellspacing="0" width="1024" height="223"> <tr> <td> <table border="0" cellpadding="0" cellspacing="0"align="left"><tr><td background="images/1_1.jpg" border="0" width="136" height="78"></td></tr><tr><td background="images/1_2.jpg" border="0" width="136" height="74"></td></tr><tr><td background="images/1_3.jpg" border="0" width="136" height="71"></td></tr></table> <table border="0" cellpadding="0" cellspacing="0" align="left"><tr><td background="images/2_1.jpg" border="0" width="140" height="78"></td></tr><tr><td background="images/2_2.jpg" border="0" width="140" height="74"></td></tr><tr><td background="images/2_3.jpg" border="0" width="140" height="71"></td></tr></table> <table border="0" cellpadding="0" cellspacing="0" align="left"><tr><td background="images/3_1.jpg" border="0" width="74" height="78"></td></tr><tr><td background="images/3_2.jpg" border="0" width="74" height="74"></td></tr><tr><td background="images/3_3.jpg" border="0" width="74" height="71"></td></tr></table> <table border="0" cellpadding="0" cellspacing="0" align="left"><tr><td background="images/4_1.jpg" border="0" width="86" height="78"></td></tr><tr><td background="images/4_2.jpg" border="0" width="86" height="95"></td></tr><tr><td background="images/4_3.jpg" border="0" width="86" height="50"></td></tr></table> <table border="0" cellpadding="0" cellspacing="0" align="left"><tr><td background="images/5_1.jpg" border="0" width="101" height="92"></td></tr><tr><td background="images/5_2.jpg" border="0" width="101" height="99"></td></tr><tr><td background="images/5_3.jpg" border="0" width="101" height="32"></td></tr></table> <table border="0" cellpadding="0" cellspacing="0" align="left"><tr><td background="images/6_1.jpg" border="0" width="99" height="110"></td></tr><tr><td background="images/6_2.jpg" border="0" width="99" height="98"></td></tr><tr><td background="images/6_3.jpg" border="0" width="99" height="15"></td></tr></table> <table border="0" cellpadding="0" cellspacing="0" align="left"><tr><td background="images/7_1.jpg" border="0" width="98" height="95"></td></tr><tr><td background="images/7_2.jpg" border="0" width="98" height="99"></td></tr><tr><td background="images/7_3.jpg" border="0" width="98" height="29"></td></tr></table> <table border="0" cellpadding="0" cellspacing="0" align="left"><tr><td background="images/8_1.jpg" border="0" width="84" height="69"></td></tr><tr><td background="images/8_2.jpg" border="0" width="84" height="83"></td></tr><tr><td background="images/8_3.jpg" border="0" width="84" height="71"></td></tr></table> <table border="0" cellpadding="0" cellspacing="0" align="left"><tr><td background="images/9_1.jpg" border="0" width="96" height="99"></td></tr><tr><td background="images/9_2.jpg" border="0" width="96" height="64"></td></tr><tr><td background="images/9_3.jpg" border="0" width="96" height="60"></td></tr></table> <table border="0" cellpadding="0" cellspacing="0" align="left"><tr><td background="images/10_1.jpg" border="0" width="110" height="78"></td></tr><tr><td background="images/10_2.jpg" border="0" width="110" height="72"></td></tr><tr><td background="images/10_3.jpg" border="0" width="110" height="73"></td></tr></table> </td> </tr> </table> </td> Пример многоуровнего меню, но без картинок css файл: /**Top menu**/ #horizontal-multilevel-menu,#horizontal-multilevel-menu ul { margin:0; padding:0; background:#BC262C url(images/header_menu_bg.gif) repeat-x; min-height:27px; width:100%; list-style:none; font-size:11px; float:left; /*font-size:90%*/ } #horizontal-multilevel-menu { } /*Links*/ #horizontal-multilevel-menu a { display:block; padding:5px 10px; /*padding:0.3em 0.8em;*/ text-decoration:none; text-align:center; } #horizontal-multilevel-menu li { float:left; } /*Root items*/ #horizontal-multilevel-menu li a.root-item { color:#fff; font-weight:bold; padding:7px 12px; } /*Root menu selected*/ #horizontal-multilevel-menu li a.root-item-selected { background:#fc8d3d; color:#fff; font-weight:bold; padding:7px 12px; } /*Root items: hover*/ #horizontal-multilevel-menu li:hover a.root-item, #horizontal-multilevel-menu li.jshover a.root-item { background:#e26336; color:#fff; } /*Item-parents*/ #horizontal-multilevel-menu a.parent { background: url(images/arrow.gif) center right no-repeat; } /*Denied items*/ #horizontal-multilevel-menu a.denied { background: url(images/lock.gif) center right no-repeat; } /*Child-items: hover*/ #horizontal-multilevel-menu li:hover, #horizontal-multilevel-menu li.jshover { background:#D6D6D6; color:#fff; } /*Child-items selected*/ #horizontal-multilevel-menu li.item-selected { background:#D6D6D6; color:#fff; } /*Sub-menu box*/ #horizontal-multilevel-menu li ul { position:absolute; /*top:-999em;*/ top:auto; display:none; z-index:500; height:auto; /*width:12em;*/ width:135px; background:#F5F5F5; border:1px solid #C1C1C1; } /*Sub-menu item box*/ #horizontal-multilevel-menu li li { width:100%; border-bottom:1px solid #DEDEDE; } /*Item link*/ #horizontal-multilevel-menu li ul a { text-align:left; } /*Items text color & size */ #horizontal-multilevel-menu li a, #horizontal-multilevel-menu li:hover li a, #horizontal-multilevel-menu li.jshover li a, #horizontal-multilevel-menu li:hover li:hover li a, #horizontal-multilevel-menu li.jshover li.jshover li a, #horizontal-multilevel-menu li:hover li:hover li:hover li a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li a, #horizontal-multilevel-menu li:hover li:hover li:hover li:hover li a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li a, #horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li a { color:#4F4F4F; font-weight:bold; } /*Items text color & size: hover*/ #horizontal-multilevel-menu li:hover li:hover a, #horizontal-multilevel-menu li.jshover li.jshover a, #horizontal-multilevel-menu li:hover li:hover li:hover a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover a, #horizontal-multilevel-menu li:hover li:hover li:hover li:hover a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover a #horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover a #horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li:hover a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li.jshover a { color:#4F4F4F; } #horizontal-multilevel-menu li ul ul { margin:-27px 0 0 132px; /*margin:-1.93em 0 0 11.6em;*/ } #horizontal-multilevel-menu li:hover ul ul, #horizontal-multilevel-menu li.jshover ul ul, #horizontal-multilevel-menu li:hover ul ul ul, #horizontal-multilevel-menu li.jshover ul ul ul, #horizontal-multilevel-menu li:hover ul ul ul ul, #horizontal-multilevel-menu li.jshover ul ul ul ul, #horizontal-multilevel-menu li:hover ul ul ul ul ul, #horizontal-multilevel-menu li.jshover ul ul ul ul ul { /*top:-999em;*/ display:none; } #horizontal-multilevel-menu li:hover ul, #horizontal-multilevel-menu li.jshover ul, #horizontal-multilevel-menu li li:hover ul, #horizontal-multilevel-menu li li.jshover ul, #horizontal-multilevel-menu li li li:hover ul, #horizontal-multilevel-menu li li li.jshover ul, #horizontal-multilevel-menu li li li li:hover ul, #horizontal-multilevel-menu li li li li.jshover ul, #horizontal-multilevel-menu li li li li li:hover ul, #horizontal-multilevel-menu li li li li li.jshover ul { /*z-index:1000; top:auto;*/ display:block; } div.menu-clear-left { clear:left; } визуально такое меню выглядит так: возможно ли с таким css меню сделать задуманное? Буду рада любым рекомендациям, подсказкам.