Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.06.2010, 12:47
Новичок на форуме
Отправить личное сообщение для dkarty Посмотреть профиль Найти все сообщения от dkarty
 
Регистрация: 09.06.2010
Сообщений: 3

Помогите с динамическим меню из изображений
Хочется реализовать меню ввиде динамически меняющихся картинок типа:
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;">


Если поставить обычным образом, то ссылаться будет только на последнюю ссылку. А хочется чтобы она изменялась при смене картинки. Вопрос как это сделать? Или может пример другой поможете найти.
Ответить с цитированием
  #2 (permalink)  
Старый 09.06.2010, 12:53
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

Допустим: ставь обычные ссылки и меняй z-index.
__________________
.
Ответить с цитированием
  #3 (permalink)  
Старый 09.06.2010, 12:55
Новичок на форуме
Отправить личное сообщение для dkarty Посмотреть профиль Найти все сообщения от dkarty
 
Регистрация: 09.06.2010
Сообщений: 3

А поподробнее? Черкани в коде как подправить
Ответить с цитированием
  #4 (permalink)  
Старый 09.06.2010, 13:16
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

Попробуйте так поставьте после строки
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;


И ссылки поставьте
__________________
.
Ответить с цитированием
  #5 (permalink)  
Старый 09.06.2010, 13:27
Новичок на форуме
Отправить личное сообщение для dkarty Посмотреть профиль Найти все сообщения от dkarty
 
Регистрация: 09.06.2010
Сообщений: 3

Вот спасибо!!! Все получилось! Да так быстро. Я сам пытался разобраться с z-index, но не то писал!!! ОГРОМНОЕ СПАСИБО!!! Помог в реализации моей идеи
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите с меню sc2r2bey Элементы интерфейса 7 31.03.2010 10:39
Помогите настроить скрипт раскрывающегося меню melomanfm Работа 6 10.08.2009 01:21
Помогите сделать такое меню(( Lilith Я не знаю javascript 2 02.06.2009 02:31
помогите с меню Ribt Общие вопросы Javascript 0 20.09.2008 08:11
Помогите сделать простое меню debugger Элементы интерфейса 1 09.09.2008 23:14