VPF::Случайный цвет каждой гиперссылки

Sleight

Дата 27.3.2011, 11:18 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 27.3.2011

Репутация: нет
Всего: нет

Здравствуйте,
Задача состоит в следующем - иммеются 3 гиперссылки и 6 массивом с наборами цветов (3 для каждой активной ссылки и 3 для каждой посещенной), нужно сделать так, чтобы каждая из гиперссылок мигала рандомным цветом из своего массива и при этом набор цветов изменялся при посещении ссылки. Каким образом это можно реализовать?

Вот что у меня получилось:

В первом случае цвета меняются в зависимости от того посещена ссылка или нет, но обращение идет ко всем ссылкам документа,а не к каждой в отдельности.

Код


<HTML>
    <HEAD>
    <TITLE> ... </TITLE>
    </HEAD>
        <script type="text/javascript">

            alnk=0;
            vlnk=0;
            colors = new Array()
            colors[0] = 'red'
            colors[1] = 'black'
            colors[2] = 'green'
                    
            vcolors = new Array()
            vcolors[0] = 'yellow'
            vcolors[1] = 'white'
            vcolors[2] = 'azure'

        function colorchange(){

            alnk=Math.floor(Math.random()*colors.length)
            document.linkColor = colors[alnk]

            vlnk=Math.floor(Math.random()*vcolors.length)
            document.vlinkColor = vcolors[vlnk]

            setTimeout("colorchange()",300)
        }
        </script>

<BODY bgcolor=aaaaaa onLoad=colorchange()>
<!-- --> 
        <p><a href="1.htm"> Ссылка 1 </a></p>
        <p><a href="2.htm"> Ссылка 2 </a></p>
        <p><a href="3.htm"> Ссылка 3 </a></p>
</BODY>
</HTML>

Во втором случае обращение идет к каждой ссылке в отдельности, но цвета не зависят от того посещена ссылка или нет.

Код


<HTML>
    <HEAD>
    <TITLE> ... </TITLE>
    </HEAD>
        <script type="text/javascript">

            lnk1=0;
            lnk2=0;
            lnk3=0;

            colors1 = new Array()
            colors1[0] = 'red'
            colors1[1] = 'green'
            colors1[2] = 'blue'

            colors2 = new Array()
            colors2[3] = 'brown'
            colors2[4] = 'gold'
            colors2[5] = 'silver'
                    
            colors3 = new Array()
            colors3[0] = 'yellow'
            colors3[1] = 'white'
            colors3[2] = 'black'

        function colorchange(){
            lnk1=Math.floor(Math.random()*colors1.length)
            document.links[0].style.color = colors1[lnk1]

            lnk2=Math.floor(Math.random()*colors2.length)
            document.links[1].style.color = colors2[lnk2]

            lnk3=Math.floor(Math.random()*colors3.length)
            document.links[2].style.color = colors3[lnk3]

            setTimeout("colorchange()",300)
            
        }
        </script>

<BODY bgcolor=aaaaaa onLoad=colorchange()>
<!-- --> 

        <p><a href="1.htm"> Ссылка 1 </a></p>
        <p><a href="2.htm"> Ссылка 2 </a></p>
        <p><a href="3.htm"> Ссылка 3 </a></p>
</BODY>
</HTML>

нуп

Дата 27.3.2011, 17:34 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 13
Всего: 33

Бери читай document.location.href, сравнивай с сылками, вот и будет тебе активная. А для того чтобы мигала замени setTimeout на setInterval, если я правильно тебя понял smile

iff

Дата 27.3.2011, 20:22 (ссылка)

(нет голосов)

Загрузка ...

Администратор

Профиль
Группа: Участник
Сообщений: 949
Регистрация: 23.3.2007

Репутация: 3
Всего: 16

Цитата(нуп @ 27.3.2011, 17:34

)

А для того чтобы мигала замени setTimeout на setInterval

Она и так мигает. (Функция ведь сама себя вызывает). Это получается как "рекурсия с отсрочкой".
Конечно, setInterval можно использовать, но тогда код немного нужно изменить.

Цитата(нуп @ 27.3.2011, 17:34

)

Бери читай document.location.href, сравнивай с сылками, вот и будет тебе активная

А я так понял, что активная это не та, в которой адрес совпадает, с адресом самой страницы (тем более, что это редкость - когда на страницы ссылка на её саму), активная это - та, по которой был совершён когда-то переход.

--------------------

DOS... Синей пеленой экран заполнил чистый DOS
Мышь... Стала вдруг квадратной, потеряла форму мышь...
Я разбил окно, девяностопятое мастдайное окно,
И поставил DOS, и тогда увидел: Это счастье, — вот оно.

Sleight

Дата 28.3.2011, 08:28 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 27.3.2011

Репутация: нет
Всего: нет

Цитата(iff @ 27.3.2011, 20:22)

Цитата(нуп @ 27.3.2011, 17:34)

Бери читай document.location.href, сравнивай с сылками, вот и будет тебе активная

Прошу прощения, не правильно выразился, под активной я имел ввиду обычную, любую ссылку (не посещенную).

iff

Дата 28.3.2011, 14:13 (ссылка)

(нет голосов)

Загрузка ...

Администратор

Профиль
Группа: Участник
Сообщений: 949
Регистрация: 23.3.2007

Репутация: 3
Всего: 16

Тогда чем отличается активная ссылка от не активной? smile

Вы же написали:

Цитата(Sleight @ 27.3.2011, 11:18

)

набор цветов изменялся при посещении ссылки

И жаловались:

Цитата(Sleight @ 27.3.2011, 11:18

)

но цвета не зависят от того посещена ссылка или нет.

Если вы хотите, чтобы набор цветов, которыми мигает ссылка зависил от того, является она посещенной или нет, то тогда в первом сообщении всё написано верно.

--------------------

iff

Дата 28.3.2011, 15:16 (ссылка)

(нет голосов)

Загрузка ...

Администратор

Профиль
Группа: Участник
Сообщений: 949
Регистрация: 23.3.2007

Репутация: 3
Всего: 16

в CSS существуют такие псевдоклассы как link и visited, которые описывают стиль ссылок и посещённых ссылок соответственно. Например:

Код


   a:link {
    color: #0000d0; /* Цвет ссылок */
   }
   a:visited {
    color: #900060; /* Цвет посещенных ссылок */
   }

Использую это, можно например составить такую страницу с мигающими ссылками

Код


<HTML>
    <HEAD>
    <TITLE> ... </TITLE>
        <script type="text/javascript" language="JavaScript">
            var acolors = ['red', 'black', 'green'], vcolors = ['yellow', 'white', 'azure'];
            window.onload = function() {setInterval('colorchange()', 300);};
            function colorchange() {
                for (var i = 0; i < document.links.length; i++) {
                      document.links[i].className = 'acl' + 
                       Math.floor(Math.random() * vcolors.length * acolors.length);
                };
            };
            document.write ('<style>\r\n');
            for (var i = j = 0; i < acolors.length; i++) {
                for (j = 0; j < vcolors.length; j++) {
                    document.write('a.acl' + (i * acolors.length + j) + ':link {color: ' + acolors[i] +';}\r\n');
                    document.write('a.acl' + (i * acolors.length + j) + ':visited {color: ' + vcolors[j] +';}\r\n');
                };
            };
            document.write('<\/style>\r\n');
        </script>
    </HEAD>
<BODY bgcolor="aaaaaa">
<!-- --> 
        <p><a href="1.htm"> Ссылка 1 </a></p>
        <p><a href="2.htm"> Ссылка 2 </a></p>
        <p><a href="3.htm"> Ссылка 3 </a></p>
</BODY>
</HTML>

--------------------

Sleight

Дата 28.3.2011, 17:14 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 27.3.2011

Репутация: нет
Всего: нет

iff,
Спасибо, знал о существовании подклассов link и visited, но ввиду слабых познаний в javascript, не мог придумать способ реализации, а именно этот момент:

Код


            document.write ('<style>\r\n');
            for (var i = j = 0; i < acolors.length; i++) {
                for (j = 0; j < vcolors.length; j++) {
                    document.write('a.acl' + (i * acolors.length + j) + ':link {color: ' + acolors[i] +';}\r\n');
                    document.write('a.acl' + (i * acolors.length + j) + ':visited {color: ' + vcolors[j] +';}\r\n');
                };
            };

Если кому когда понадобится - вот полный текст для всех 3х ссылок.

Код


<HTML>
    <HEAD>
    <TITLE> ... </TITLE>
        <script type="text/javascript" language="JavaScript">
      var alnk0_colors = ['red', 'green'], alnk1_colors = ['black', 'white'], alnk2_colors = ['orange', 'blue'];
      var vlnk0_colors = ['chartreuse', 'aqua'], vlnk1_colors = ['coral', 'cyan'], vlnk2_colors = ['yellow', 'azure'];
     
        window.onload = function() {setInterval('colorchange()', 300);};
           function colorchange() {

                      document.links[0].className = 'ac0' + 
                      Math.floor(Math.random() * vlnk0_colors.length * alnk0_colors.length);
                      document.links[1].className = 'ac1' + 
                      Math.floor(Math.random() * vlnk1_colors.length * alnk1_colors.length);
                      document.links[2].className = 'ac2' + 
                      Math.floor(Math.random() * vlnk2_colors.length * alnk2_colors.length);

            };
            document.write ('<style>\r\n');
            for (var i = j = 0; i < 2; i++) {
                for (j = 0; j < 2; j++) {
                    document.write('a.ac0' + (i * alnk0_colors.length + j) + ':link {color: ' + alnk0_colors[i] +';}\r\n');
                    document.write('a.ac0' + (i * alnk0_colors.length + j) + ':visited {color: ' + vlnk0_colors[j] +';}\r\n');
                    document.write('a.ac1' + (i * alnk1_colors.length + j) + ':link {color: ' + alnk1_colors[i] +';}\r\n');
                    document.write('a.ac1' + (i * alnk1_colors.length + j) + ':visited {color: ' + vlnk1_colors[j] +';}\r\n');
                    document.write('a.ac2' + (i * alnk2_colors.length + j) + ':link {color: ' + alnk2_colors[i] +';}\r\n');
                    document.write('a.ac2' + (i * alnk2_colors.length + j) + ':visited {color: ' + vlnk2_colors[j] +';}\r\n');
                };
            };
            document.write('<\/style>\r\n');
        </script>
    </HEAD>
<BODY bgcolor="aaaaaa">
<!-- --> 
        <p><a href="1.htm"> Ссылка 1 </a></p>
        <p><a href="2.htm"> Ссылка 2 </a></p>
        <p><a href="3.htm"> Ссылка 3 </a></p>
</BODY>
</HTML>

Это сообщение отредактировал(а) Sleight - 28.3.2011, 17:16

Olgusin

Дата 5.5.2011, 19:22 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 5.5.2011

Репутация: нет
Всего: нет

Огромное спасибо!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!очень помогли)) smile

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »