Изменяем цвет текста с помощью кнопок управления - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 04.12.2016
Скрипты для uCoz » Текстовые эффекты » Изменяем цвет текста с помощью кнопок управления

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Изменяем цвет текста с помощью кнопок управления

Кнопки управления для изменения цвета текста




Если Вам нужно доверить пользователю самому выбирать цвет текста на странице(ах) сайта этот скрипт должен подойти как нельзя кстати.Можно изменить цветовую палитру и добавить кнопок управления,старался не усложнять компановку содержимого,думаю можно разобраться в настройке.Наврятли пользователь упустит шанс нажать на цветные квадратики,поэтому дополнительное поснение к кнопкам применять не обязательно.По поводу установки,весь код нужно поместить там,где будет меняться цвет текста,сами кнопки позиционированы на левый нижний угол страницы.Дополнительно понадобится добавить id="dscolortext" элементу в котором находится текст.Если Вы используете визуальный редактор при добавлении материала примените идентификатор к тегу <body>,например для изменения текста в модуле "Блог",на странице "Материала и комментариями к нему" допишите <body id="dscolortext">,а перед закрывающим тегом </body> установите весь код.После этого на странице материала блога появятся кнопки управления цветом текста,в этом материале я применил идентификатор к тегу <p id="dscolortext">,добавив остальной код ниже основного содержимого через "Панель HTML кодов" на странице добавления и редактирования материала.Расположение самих кнопок может быть вертикальным или горизонтальным,ниже находятся 2 примера скрипта,выберите тот который Вас больше устроит.Разумеется при появлении вопросов или предложений стоит воспользоваться формой комментариев,не можете разобраться?Не казните не меня ни себя,опишите в чём затруднение,попробуем разобраться более детально.




Пример скрипта с вертикальным расположением кнопок

<div class="dsblockuptext">
<input
type="button"
value="t"
id="cvet1"
onclick="document.getElementById('dscolortext').style.color = '#000000'"/>
<br>
<input
type="button"
value="t"
id="cvet2"
onclick="document.getElementById('dscolortext').style.color = '#FFFFFF'"/>
<br>
<input
type="button"
value="t"
id="cvet3"
onclick="document.getElementById('dscolortext').style.color = '#000080'"/>
<br>
<input
type="button"
value="t"
id="cvet4"
onclick="document.getElementById('dscolortext').style.color = '#006400'"/>
<br>
<input
type="button"
value="t"
id="cvet5"
onclick="document.getElementById('dscolortext').style.color = '#7CFC00'"/>
<br>
<input
type="button"
value="t"
id="cvet6"
onclick="document.getElementById('dscolortext').style.color = '#FFFF00'"/>
<br>
<input
type="button"
value="t"
id="cvet7"
onclick="document.getElementById('dscolortext').style.color = '#FF0000'"/>
</div>
<style>
.dsblockuptext {
position:fixed;
bottom:10px;
left:10px;
z-index:200;
}
#cvet1 {
background-color:#000000;
color:#000000;
}
#cvet2 {
background-color:#FFFFFF;
color:#FFFFFF;
}
#cvet3 {
background-color:#000080;
color:#000080;
}
#cvet4 {
background-color:#006400;
color:#006400;
}
#cvet5 {
background-color:#7CFC00;
color:#7CFC00;
}
#cvet6 {
background-color:#FFFF00;
color:#FFFF00;
}
#cvet7 {
background-color:#FF0000;
color:#FF0000;
}
</style>
<p id="dscolortext">Эта строка для примера,а не часть скрипта</p>


Пример скрипта с горизонтальным расположением кнопок

<div class="dsblockuptext">
<input
type="button"
value="t"
id="cvet1"
onclick="document.getElementById('dscolortext').style.color = '#000000'"/>
<input
type="button"
value="t"
id="cvet2"
onclick="document.getElementById('dscolortext').style.color = '#FFFFFF'"/>
<input
type="button"
value="t"
id="cvet3"
onclick="document.getElementById('dscolortext').style.color = '#000080'"/>
<input
type="button"
value="t"
id="cvet4"
onclick="document.getElementById('dscolortext').style.color = '#006400'"/>
<input
type="button"
value="t"
id="cvet5"
onclick="document.getElementById('dscolortext').style.color = '#7CFC00'"/>
<input
type="button"
value="t"
id="cvet6"
onclick="document.getElementById('dscolortext').style.color = '#FFFF00'"/>
<input
type="button"
value="t"
id="cvet7"
onclick="document.getElementById('dscolortext').style.color = '#FF0000'"/>
</div>
<style>
.dsblockuptext {
position:fixed;
bottom:10px;
left:10px;
z-index:200;
}
#cvet1 {
background-color:#000000;
color:#000000;
}
#cvet2 {
background-color:#FFFFFF;
color:#FFFFFF;
}
#cvet3 {
background-color:#000080;
color:#000080;
}
#cvet4 {
background-color:#006400;
color:#006400;
}
#cvet5 {
background-color:#7CFC00;
color:#7CFC00;
}
#cvet6 {
background-color:#FFFF00;
color:#FFFF00;
}
#cvet7 {
background-color:#FF0000;
color:#FF0000;
}
</style>
<p id="dscolortext">Эта строка для примера,а не часть скрипта</p>


Генератор для подбора цвета #HEX


Редактор для настройки и проверки скриптов

Проверьте варианты скриптов,выше находится генератор цвета,поэкспериментируйте с изменениями.















Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 1437 | Добавил: IZOTOP | Рейтинг: 5.0/1
    | Теги: настроить, цвет, Color, text, изменить, выбрать, текст

    Всего комментариев: 10
    0   Спам
    9 hope   (10.07.2014 20:39)
    Аватар hope Очень помог, весь инет облазила, не нашла. Один ты помог.
    Благодарю!

    0  
    10 IZOTOP   (12.07.2014 15:41)
    Аватар IZOTOP Рад что смог быть полезным.
    smile

    0   Спам
    8 hope   (02.07.2014 06:12)
    Аватар hope Привет! А как сделать такие же кнопки, но для изменения фона и шапки сайта?

    0   Спам
    1 Башмак   (05.04.2013 19:21)
    Аватар Башмак Как заместо id использовать class ?

    0   Спам
    2 IZOTOP   (10.04.2013 08:53)
    Аватар IZOTOP На class переделать нельзя, во всяком случае в том виде как сейчас есть.
    Не совсем понятно зачем нужно переделать на class?
    Если нужно применить к нескольким элементам, нужно применить идентификатор к родителю вложенных в него элементов.
    Всё элементы вложены в тег <body>, если применить к нему значения изменяемого цвета будут действовать на все текстовые элементы страницы:

    Код

    <body id="dscolortext">


    Во всяком случае страницы сайта uCoz состоят из таблиц, в них помещены разделённые части.Можно применить к таблице в которой находятся нужные элементы:

    Код

    <table id="dscolortext" border="0">

    0   Спам
    3 Башмак   (10.04.2013 22:23)
    Аватар Башмак Например на главной странице, где отображаются новости сайта, цвет меняет только первая новость, так как последующие новости идут с таким же ID, а у ID есть такое свойство, оно может применяться только 1 раз на странице, в отличии от Классов. Но да ладно, не важно, я уже нашел другое решение, всё равно спасибо за ответ.

    0   Спам
    4 IZOTOP   (11.04.2013 15:12)
    Аватар IZOTOP В том то и дело, идентифицировать нужно не саму новость, а весь блок новостей, например:

    Код

    <div id="dscolortext">
    Тут информер новостей
    </div>  

    0   Спам
    5 Башмак   (12.04.2013 09:29)
    Аватар Башмак Вообще то я так и делал =)

    0   Спам
    6 IZOTOP   (12.04.2013 19:59)
    Аватар IZOTOP Должно было работать, во всяком случае так как у тебя сделано тоже неправильно. Зачем использовать 27 файлов стилей?
    Для того варианта который у тебя сейчас нужно сделать так:

    Код

    <center>
    <input type="button" style="cursor:pointer; height:10px; background-color:#B22222;" size="1" onclick="document.body.style.color='#B22222';"/>
    </center>
    fgsafgasfgdfgdfgdfg


    Проверь код в редакторе, надеюсь поймёшь о чём я.
    Во первых никаких дополнительных скриптов, во вторых никаких дополнительных файлов стилей - скромно и аналогично:)

    0   Спам
    7 Башмак   (12.04.2013 23:29)
    Аватар Башмак С тем что скромно я соглашусь, ну а по поводу аналогичности я не соглашусь, в моём варианте присутствует запоминание (т.е. куки), потому и и прикреплено 27 стилей, потому что происходит замена стандартного стиля с запоминанием.


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]