Ротатор баннеров
Добрый вечер дамы и господа:thanks: . Имеется подобный скрипт, предназначенный для ротатации баннеров. В папке "ban" находятся 3 разных баннера одинакового размера. В данном случае ссылка со всех трёх картинок ведёт на один и тот-же сайт.
Вопрос: как видоизменить код, для того, чтобы привязать каждому баннеру отдельную ссылку?
<script language="JavaScript">
i=0;
img_a=new Array()
img_a[0]=new Image()
img_a[1]=new Image()
img_a[2]=new Image()
img_a[0].src="ban/1.jpg"
img_a[1].src="ban/2.jpg"
img_a[2].src="ban/3.jpg"
function img_b()
{
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
i++
if(i>2) i=0;
setTimeout("img_b()", 4000)
}
</script>
<body onLoad=img_b()>
<a href="http://www.mail.ru" target="_blank" title="Mail"><img src="ban/1.jpg"></a>
</body>
В javascript я полный чайник со свистком :( , собственно поэтому и выношу на всеобщее обсуждение этот простой вопрос. |
вам не хватает фазы луны ( рандома, он же случайность )
<script language="JavaScript">
img_a=new Array()
img_a[0]=new Image()
img_a[1]=new Image()
img_a[2]=new Image()
img_a[0].src="ban/1.jpg"
img_a[1].src="ban/2.jpg"
img_a[2].src="ban/3.jpg"
i = Math.floor( Math.random( ) * ( - 3 ) ) + 4 // случайное число между 1 и 3
function img_b() {
document.images[0].src=img_a[i].src;
i++;
if( i == 3 ) i = 0 ;
setTimeout("img_b()", 4000);
}
</script>
<body onLoad=img_b()>
<a href="http://www.mail.ru" target="_blank" title="Mail"><img src="ban/1.jpg"></a>
</body>
|
melky,
:no: Вопрос был про ссылку а не про случайное появление картинок |
Ваш скрипт только картинку подменяет в баннере, а не весь баннер.
Если картинка просто обернута в гиперссылку, то можно к href обращаться document.images[0].parentNode.href так например, в любом случае до родителя добраться можно |
poorking,
:thanks:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script language="JavaScript">
var img_href =['http://www.mail.ru','http://www.google.ru/','http://search.yahoo.com/'],
img_title = ['Mail','Google','Yahoo'],
i = 0,
img_a=new Array();
img_a[0]=new Image();
img_a[1]=new Image();
img_a[2]=new Image();
img_a[0].src="http://javascript.ru/forum/images/smilies/victory.gif";
img_a[1].src="http://javascript.ru/forum/images/smilies/dance3.gif";
img_a[2].src="http://javascript.ru/forum/images/smilies/agree.gif";
function img_b() {
var n = i%3;
document.images[0].src=img_a[n].src;
document.images[0].parentNode.href=img_href[n];
document.images[0].parentNode.title=img_title[n];
i++;
setTimeout("img_b()", 4000);
}
window.onload=img_b
</script>
</head>
<body>
<a href="http://www.mail.ru" target="_blank" title="Mail"><img src="http://javascript.ru/forum/images/smilies/victory.gif"></a>
</body>
</html>
|
Цитата:
Цитата:
Как говорится - истина была где-то рядом :D P.S. Исчерпывающий ответ на вопрос получен. Тему можно закрывать. |
Рони, приветствую. В вашем скрипте есть проблема:
если на странице есть еще какие либо картинки, которые находятся выше картинки, которая задействована скриптом, то задействуется картинка, которая выше картинки из скрипта и она заменяется картинками из ротатора и ротируется, а оригинал перестает ротироваться. Вот пример: Выше картинки из скрипта я установил картинку с флагом. Результат вы видите. Как это исправить? Как сделать, чтобы любые другие картинки не подтягивались скриптом?
<!DOCTYPE html>
<html>
<head>
<title></title>
<script language="JavaScript">
var img_href =['http://www.mail.ru','http://www.google.ru/','http://search.yahoo.com/'],
img_title = ['Mail','Google','Yahoo'],
i = 0,
img_a=new Array();
img_a[0]=new Image();
img_a[1]=new Image();
img_a[2]=new Image();
img_a[0].src="http://javascript.ru/forum/images/smilies/victory.gif";
img_a[1].src="http://javascript.ru/forum/images/smilies/dance3.gif";
img_a[2].src="http://javascript.ru/forum/images/smilies/agree.gif";
function img_b() {
var n = i%3;
document.images[0].src=img_a[n].src;
document.images[0].parentNode.href=img_href[n];
document.images[0].parentNode.title=img_title[n];
i++;
setTimeout("img_b()", 4000);
}
window.onload=img_b
</script>
</head>
<body>
<!-- моя картинка -->
<img src="http://www.flags.net/images/smallflags/RUSS0001.GIF" alt=""/><br>
<!-- моя картинка -->
<a href="http://www.mail.ru" target="_blank" title="Mail"><img src="http://javascript.ru/forum/images/smilies/victory.gif"></a><br>
</body>
</html>
|
Feex,
придумать класс для картинки и заменить document.images[0] на document.querySelector('imgточкакласс') |
<!DOCTYPE html>
<html>
<head>
<title></title>
<script language="JavaScript">
var img_href =['http://www.mail.ru','http://www.google.ru/','http://search.yahoo.com/'],
img_title = ['Mail','Google','Yahoo'],
i = 0,
img_a=new Array();
img_a[0]=new Image();
img_a[1]=new Image();
img_a[2]=new Image();
img_a[0].src="http://javascript.ru/forum/images/smilies/victory.gif";
img_a[1].src="http://javascript.ru/forum/images/smilies/dance3.gif";
img_a[2].src="http://javascript.ru/forum/images/smilies/agree.gif";
function img_b() {
var n = i%3;
document.querySelector('img.rotator').src=img_a[n].src;
document.querySelector('img.rotator').parentNode.href=img_href[n];
document.querySelector('img.rotator').parentNode.title=img_title[n];
i++;
setTimeout("img_b()", 4000);
}
window.onload=img_b
</script>
</head>
<body>
<!-- моя картинка -->
<img src="http://www.flags.net/images/smallflags/RUSS0001.GIF" alt=""/><br>
<!-- моя картинка -->
<a href="http://www.mail.ru" target="_blank" title="Mail"><img class="rotator" src="http://javascript.ru/forum/images/smilies/victory.gif"></a><br>
</body>
</html>
вроде так, если я правильно понял. Моя картинка не задействуется теперь, но ротации смайлов нет.. Что я не так сделал?) P.S. Сорри!! Моя опечатка))) Вместо "=" я "+" поставил тут: "img class+"rotator" " В коде исправил уже - всё работает)) СПАСИБО!! Вы снова мне помогли)) |
| Часовой пояс GMT +3, время: 09:06. |