Отправляет email-рассылки с помощью сервиса Sendsay

Web-программирование - это просто!

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 681 RSS
←   Ноябрь 2021   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.easyprog.ru
Открыта: 27-06-2009
Адрес автора: comp.soft.prog.easyweb-owner@subscribe.ru

Автор
Александр

Статистика

681 подписчиков
0 за неделю
←   Все выпуски   →

Web-программирование - это просто!


Новое на сайте Программирование - это просто! (www.easyprog.ru):

 

 

 

WEB-программирование: "Java Script(JS): Работа с CSS. Продолжение-4".

 

Сегодня мы рассмотрим пример изменения стиля форматирования фона. У нас есть фоновое изображение, поверх него текст:

По клику мышки изображение меняется на зеркальное:

Вот код данной программы:

<html>

    <head>

        <meta charset="UTF-8">

        <title>Урок 135. Java Script (JS): Изменение стиля форматирования фона</title> 

        <STYLE type="text/css">

            div

            {

                background-image:url(right.png);

                background-repeat:repeat-x;

                font-size:180%;

            }          

        </STYLE>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

            function my_click()

            {                  

                var st=document.styleSheets[0];

                var rule=(st.rules) ? st.rules[0] : st.cssRules[0];            

                if(rule.style.backgroundImage=='url("right.png")')

                {

                    rule.style.backgroundImage='url(mirror.png)'

                }

                else

                {

                    rule.style.backgroundImage='url(right.png)'

                }

            }                      

        </SCRIPT>

    </head>

    <body>

        <div OnClick="my_click()">

            Текст внутри этого контейнера расположен поверх фонового изображения, которое меняется по клику мышки<br>

            Текст внутри этого контейнера расположен поверх фонового изображения, которое меняется по клику мышки<br>

        </div>

    </body>

</html>

Здесь мы при помощи CSS  стиля задаем фоновое изображение, а скриптом меняем его. 

 

С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 
В избранное