Приведу приклад зміни фону у body.
Створюємо файл layout.js, у якому пишемо наступний код:
/*
-----------------------------------------------
File: layout.js
Author: Denys Nosov at http://www.denys.org.ua
Version: 16.05.2008
License: Commerce
----------------------------------------------- */
if (screen.width < 1024)
{
document.write('<style type="text/css">/*<![CDATA[*/body{background: url(/templates/xxx/images/bg_800.jpg) no-repeat;}/*]]>*/</style>');
}
if (screen.width >= 1024)
{
document.write('<style type="text/css">/*<![CDATA[*/body{background: url(/templates/xxx/images/bg_1024.jpg) no-repeat;}/*]]>*/</style>');
}
if (screen.width >= 1280)
{
document.write('<style type="text/css">/*<![CDATA[*/body{background: url(/templates/xxx/images/bg_1280.jpg) no-repeat;}/*]]>*/</style>');
}
if (screen.width >= 1400)
{
document.write('<style type="text/css">/*<![CDATA[*/body{background: url(/templates/xxx/images/bg_1400.jpg) no-repeat;}/*]]>*/</style>');
}
if (screen.width >= 1600)
{
document.write('<style type="text/css">/*<![CDATA[*/body{background: url(/templates/xxx/images/bg_1600.jpg) no-repeat;}/*]]>*/</style>');
}
if (screen.width >= 2000)
{
document.write('<style type="text/css">/*<![CDATA[*/body{background: url(/templates/xxx/images/bg_2000.jpg) no-repeat;}/*]]>*/</style>');
}
де:
- 1. значення screen.width - це ширина монітору
- 2. зображення bg_ххх відповідає зображенню під відповідну ширину.
Усі параметри можна відписати для певної ширини монітора.
Увага!
У шаблоні необхідно вивести скрипт після вашого CSS!!!
<!-- Виводимо наш CSS -->
<link rel="stylesheet" href="/templates/ххх/css/style.css" type="text/css" />
<!-- Після CSS виводимо скрипт layout -->
<script src="/templates/ххх/css/layout.js" type="text/javascript"></script>
Увага!
Оскільки скрипт має комерційну ліцензію, усі авторські права залишаються за автором. Наявність копірайтів обов'язкова!
