Создать ответ 
Плавная смена изображений и линков к ним
Автор Сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #1
Плавная смена изображений и линков к ним
Данная тема создана в связи с тем, что в комментариях к теме Плавная смена изображений прозвучал вопрос о том, как добавить линки отдельно для каждой картинки.

Мы посчитали, что ответ на данный вопрос может пригодиться многим нашим посетителя, и поэтому хотим предложить Вам решение поставленной задачи.

Предлагаем Вам весь скрипт целиком:
Код:
<script type="text/javascript">
var d = document;
var image_count = 3;
var interval = 3000;
var time_out = 25;
var i = 0;
var timeout;
var opacity = 100;
all_text = new Array ("index.php", "forum/index.php", "map.php");

function change_image() {
opacity--;
var j = i + 1;
var current_image = 'img_' + i;
if (i == image_count) j = 1;
var next_image = 'img_' + j;
d.getElementById("image_link").href = all_text[j-1];
d.getElementById(current_image).style.opacity = opacity/100;
d.getElementById(current_image).style.filter = 'alpha(opacity=' + opacity + ')';
d.getElementById(next_image).style.opacity = (100-opacity)/100;
d.getElementById(next_image).style.filter = 'alpha(opacity=' + (100-opacity) + ')';
timeout = setTimeout("change_image()", time_out);
if (opacity==1) {
  opacity = 100;
  clearTimeout(timeout);
}
}
setInterval (function() {i++; if (i>image_count) i=1; change_image();}, interval);
</script>

<a href="index.php" id="image_link">
<img src='image/img_11.png' id="img_1" style="position: absolute;">
<img src='image/img_12.png' id="img_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;">
<img src='image/img_13.png' id="img_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;">
</a>

Как видно, скрипт не сильно изменился. Добавился массив all_text = new Array ("index.php","forum/index.php","map.php");, со ссылкой для каждой картинки, строчка отвечающая за смену ссылки и все изображения были заключены между тегами <a></a>.
10.04.2013 21:13:35
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)


LiveInternet
© Copyright 2011-2024 by UsefulScript.ru