Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.06.2014, 13:26
Аспирант
Отправить личное сообщение для Webtest Посмотреть профиль Найти все сообщения от Webtest
 
Регистрация: 10.06.2014
Сообщений: 63

Смена цвета/картинки фона при нажатии на элемент
Здравствуйте.

Допустим есть обычная кнопка:
<form method="post" action="1.php">
	<button class="color" id="red" name="button" value="red" onclick='change_color'></button>
	<button class="color" id="orange" name="button" value="orange" onclick='change_color'></button>
</form>

Как сделать скрипт с помощью js, чтобы менялся цвет фона страницы при нажатии на кнопку? Знаю, что можно сделать через php, но нужно именно через js.

Так же, есть картинка:
<img src='$path' alt='' class='image'>

Как сделать скрипт, чтобы при нажатии на картинку, в бэкграунд добавлялась картинка?
И, чтобы, при нажатии на другую картинку, текущая удалялась и ставилась новая. Но чтобы на текущий цвет фон эти действия не влияли.
Ответить с цитированием
  #2 (permalink)  
Старый 15.06.2014, 13:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

Webtest,
http://learn.javascript.ru/styles-and-classes#style
Ответить с цитированием
  #3 (permalink)  
Старый 15.06.2014, 14:43
Аспирант
Отправить личное сообщение для Webtest Посмотреть профиль Найти все сообщения от Webtest
 
Регистрация: 10.06.2014
Сообщений: 63

рони, прочитал статью, относительно понял. Но как сделать так, чтобы менялся фон / добавлялась картинка при нажатии на элемент? Я, просто, в яваскрипте пока не разбираюсь.
Пока вставил такой вариант из вашей статьи, но это совсем не то.
document.body.style.backgroundColor = prompt('background color?', 'green');
Как я понял надо заменить prompt на что-то?
Ответить с цитированием
  #4 (permalink)  
Старый 15.06.2014, 15:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

Webtest,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
 body{
   background: no-repeat;
 }

  </style>
  <meta charset="utf-8">
  <script>
     function change_color(obj)
     {
       obj.value && (document.body.style.backgroundColor = obj.value);
       obj.src && (document.body.style.backgroundImage = 'url('+obj.src+')');
     }
  </script>
</head>

<body>
<form method="post" action="1.php" onsubmit="return false">
	<button class="color" id="red" name="button" value="red" onclick='change_color(this)'>red</button>
	<button class="color" id="orange" name="button" value="orange" onclick='change_color(this)'>orange</button>
    <img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" onclick='change_color(this)'>
    <img src="http://javascript.ru/forum/images/smilies/victory.gif" alt="" onclick='change_color(this)'>
</form>

</body>

</html>
Ответить с цитированием
  #5 (permalink)  
Старый 15.06.2014, 19:26
Аспирант
Отправить личное сообщение для Webtest Посмотреть профиль Найти все сообщения от Webtest
 
Регистрация: 10.06.2014
Сообщений: 63

рони, именно то что нужно. Большое спасибо!
Ответить с цитированием
  #6 (permalink)  
Старый 09.10.2015, 15:11
Новичок на форуме
Отправить личное сообщение для ShadowsKeep Посмотреть профиль Найти все сообщения от ShadowsKeep
 
Регистрация: 09.10.2015
Сообщений: 2

Подскажите как можно реализовать смену картинки фона
Ответить с цитированием
  #7 (permalink)  
Старый 09.10.2015, 15:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

Сообщение от ShadowsKeep
Подскажите как можно реализовать смену картинки фона
а разве кода в 4 посте недостаточно?
Ответить с цитированием
  #8 (permalink)  
Старый 09.10.2015, 18:33
Новичок на форуме
Отправить личное сообщение для ShadowsKeep Посмотреть профиль Найти все сообщения от ShadowsKeep
 
Регистрация: 09.10.2015
Сообщений: 2

Сообщение от рони Посмотреть сообщение
а разве кода в 4 посте недостаточно?
Сори за тупость, не заметил что клик по картинке меняет фон
Ответить с цитированием
  #9 (permalink)  
Старый 26.04.2016, 13:26
Новичок на форуме
Отправить личное сообщение для CBETIK Посмотреть профиль Найти все сообщения от CBETIK
 
Регистрация: 26.04.2016
Сообщений: 4

Улучшить скрипт.
Добрый день, такой вопрос, а как организовать такую фишку? Имеем вышеуказанный скрипт, где при нажатии на кнопку меняется цвет фона, а как сделать что бы при выборе цвета из такого бара(Ну или как он правильно называется) как вот на этих сайтах. http://getcolor.ru/
http://html-color-codes.info/Cvetovye-kody-HTML/
И еще к каждому из них привязывался свой цсс файл ну или стиль инвертируется, к примеру фон белый, цвет шрифта черный и наоборот?
Как вам такая загадка?
О, едва не забыл, как сделать, что бы браузер помнил сделанный выбор, а то слетает при каждом обновлении страницы? И кнопку сброса на стиль по умолчанию?

Последний раз редактировалось CBETIK, 26.04.2016 в 13:35.
Ответить с цитированием
  #10 (permalink)  
Старый 26.04.2016, 13:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

CBETIK,
Инверсия цвета
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При нажатии на кнопку появляется другой текст ami_moor Общие вопросы Javascript 3 12.06.2015 17:56
смена картинок при нажатии sdff Общие вопросы Javascript 15 08.02.2014 16:08
Смена фона изображения при клике на иконку Letto Элементы интерфейса 2 16.06.2013 17:16
Смена изображений при нажатии в мобильном браузере Амир Элементы интерфейса 0 09.09.2012 20:04
Получение данных строки грида при нажатии сторонней кнопки Allan Stark ExtJS 4 17.11.2011 18:21