Переключатель мини-стилей (Deff)
ПЕРЕКЛЮЧАТЕЛЬ Мини-Стилей на Форум
В Начало HTML верх
Цитата
<style>#ChangeStyle{position:relative;z-index:100;}#ChangeStyle td{cursor:pointer;width:10px;height:12px;border:1px solid #000;}#ChangeStyle td i{display:none!important}</style><span class="StyleChang"></span><table cellspacing="8" align=right id='ChangeStyle'><tr>
<td bgcolor=red title="Название Мини-Стиля 1" ><i>
body {
background:url(http://uploads.ru/i/Z/g/3/Zg3Db.gif) repeat red!important;
}
</i></td>
<td bgcolor=blue title="Название Мини-Стиля 2"><i>
body {
background:url(http://uploads.ru/i/C/A/K/CAKmh.jpg) repeat blue!important;
}
</i></td>
<td bgcolor=teal title="Название Мини-Стиля 3"><i>
body {
background:url(http://uploads.ru/i/f/9/z/f9z80.jpg) repeat teal!important;
}
</i></td>
</tr></table><script type="text/javascript">$('#ChangeStyle td').each(function(i){$(this).attr("alt",i)});function setcookie(a,b,c){if©{var d=new Date();d.setDate(d.getDate()+c)}if(a&&b)document.cookie=a+'='+b+(c?'; expires='+d.toUTCString():'');else return false}function getcookie(a){var b=new RegExp(a+'=([^;]){1,}');var c=b.exec(document.cookie);if©c=c[0].split('=');else return false;return c[1]?c[1]:false}function clearSet(L){if(L){setcookie("#ChangeStyle",L,30);$("span.StyleChang").html('<style>'+$("#ChangeStyle td[alt='"+L+"']").find("i").html()+'</style>')}};$('#ChangeStyle td').click(function(){clearSet($(this).attr("alt"))});var Lmem=getcookie("#ChangeStyle");clearSet(Lmem);</script>
<td bgcolor=red title="Название Мини-Стиля 1" ><i>
body {
background:url(http://uploads.ru/i/Z/g/3/Zg3Db.gif) repeat red!important;
}
</i></td>
<td bgcolor=blue title="Название Мини-Стиля 2"><i>
body {
background:url(http://uploads.ru/i/C/A/K/CAKmh.jpg) repeat blue!important;
}
</i></td>
<td bgcolor=teal title="Название Мини-Стиля 3"><i>
body {
background:url(http://uploads.ru/i/f/9/z/f9z80.jpg) repeat teal!important;
}
</i></td>
</tr></table><script type="text/javascript">$('#ChangeStyle td').each(function(i){$(this).attr("alt",i)});function setcookie(a,b,c){if©{var d=new Date();d.setDate(d.getDate()+c)}if(a&&b)document.cookie=a+'='+b+(c?'; expires='+d.toUTCString():'');else return false}function getcookie(a){var b=new RegExp(a+'=([^;]){1,}');var c=b.exec(document.cookie);if©c=c[0].split('=');else return false;return c[1]?c[1]:false}function clearSet(L){if(L){setcookie("#ChangeStyle",L,30);$("span.StyleChang").html('<style>'+$("#ChangeStyle td[alt='"+L+"']").find("i").html()+'</style>')}};$('#ChangeStyle td').click(function(){clearSet($(this).attr("alt"))});var Lmem=getcookie("#ChangeStyle");clearSet(Lmem);</script>
Данную Часть таблички - можно размножать или удалять:
Цитата
<td bgcolor=red title="Название Мини-Стиля N" ><i>
body {
background:url(http://uploads.ru/i/Z/g/3/Zg3Db.gif) repeat red!important;
}
</i></td>
body {
background:url(http://uploads.ru/i/Z/g/3/Zg3Db.gif) repeat red!important;
}
</i></td>
Красным - Ваши данные, (*стилевые теги и селекторы любые)
Применять новые стили можно к любым элементам и к нескольким одновременно (в данном случае пример был для body)
Просмотров: 647, Загрузок: 0, Оценка: 5.0 (1)
| Страницы: | |