Помогите с динамическим меню из изображений
Хочется реализовать меню ввиде динамически меняющихся картинок типа:
http://tutorials.xyz.net.ua/css_javascript_opacity/ Но данный код меняет только прозрачность картинки. Как сделать так чтобы картинка была ссылкой, при этом ссылка для разных картинок своя? Как реализовать не знаю. Я так думаю в java-коде можно что-то подкрутить. Поможете? <script language=JavaScript> var total_pics_num = 3; // колличество изображений var interval = 4000; // интервал между изображениями var time_out = 10; // задержка кадров var i = 0; var timeout; var opacity = 100; function fade_to_next() { opacity--; var k = i + 1; var image_now = 'image_' + i; if (i == total_pics_num) { k = 1; } var image_next = 'image_' + k; document.getElementById(image_now).style.opacity = opacity/100; document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')'; document.getElementById(image_next).style.opacity = (100-opacity)/100; document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')'; timeout = setTimeout("fade_to_next()",time_out); if (opacity==1) { opacity = 100; clearTimeout(timeout); } } setInterval(function() { i++; if (i > total_pics_num) i=1; fade_to_next(); },interval); </script> Эти картинки должны быть ссылками. <img src='1.jpg' id="image_1" style="position: absolute;"> <img src='2.jpg' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;"> <img src='3.jpg' id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;"> Если поставить обычным образом, то ссылаться будет только на последнюю ссылку. А хочется чтобы она изменялась при смене картинки. Вопрос как это сделать? Или может пример другой поможете найти. |
Допустим: ставь обычные ссылки и меняй z-index.
|
А поподробнее? :) Черкани в коде как подправить
|
Попробуйте так поставьте после строки
document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')'; вот это document.getElementById(image_next).style.zIndex = (100-opacity); document.getElementById(image_now).style.zIndex = opacity; И ссылки поставьте |
Вот спасибо!!! :thanks: Все получилось! Да так быстро. Я сам пытался разобраться с z-index, но не то писал!!! ОГРОМНОЕ СПАСИБО!!! Помог в реализации моей идеи:victory:
|
Часовой пояс GMT +3, время: 13:00. |