Программирование - это просто
Advertisement
Главная arrow Web-программирование arrow Уроки Java Script arrow WEB-программирование: "Java Script(JS): Работа с CSS. Продолжение-4".
30.11.2021 г.
Главное меню
Главная
Интернет магазин
Программные продукты
Биржевые роботы
Искусственный интеллект
Математика и информатика
1С:Предприятие
Уроки C#
Уроки Delphi
Уроки программирования
Web-программирование
Дизайн и графика
Компьютер для блондинок
Исходники
Статьи
Платный раздел
Рассказы про компьютеры
Хитрости и секреты
Системный подход
Размышления
Наука для чайников
Друзья сайта
Excel-это не сложно
Все о финансах
.
WEB-программирование: "Java Script(JS): Работа с CSS. Продолжение-4". Печать E-mail
Автор Administrator   
13.11.2021 г.

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

Урок 13. Управление шрифтами в CSS New Page 1

 

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

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

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

<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: Этот e-mail защищен от спам-ботов. Для его просмотра в вашем браузере должна быть включена поддержка Java-script '; document.write( '' ); document.write( addy_text76767 ); document.write( '<\/a>' ); //-->\n Этот e-mail защищен от спам-ботов. Для его просмотра в вашем браузере должна быть включена поддержка Java-script , автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 

Последнее обновление ( 13.11.2021 г. )
 
Пред. »
 
© 2021 Программирование - это просто
Joomla! - свободное программное обеспечение, распространяемое по лицензии GNU/GPL.
Русская локализация © 2005-2008 Joom.Ru - Русский Дом Joomla!
Design by Mamboteam.com | Powered by Mambobanner.de
Я принимаю Яндекс.Деньги