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