Форум

Webtest · #1 (**permalink**) 15.06.2014, 13:26

Здравствуйте.

Допустим есть обычная кнопка:

<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

Webtest,
http://learn.javascript.ru/styles-and-classes#style

Webtest · #3 (**permalink**) 15.06.2014, 14:43

рони, прочитал статью, относительно понял. Но как сделать так, чтобы менялся фон / добавлялась картинка при нажатии на элемент? Я, просто, в яваскрипте пока не разбираюсь.
Пока вставил такой вариант из вашей статьи, но это совсем не то.
document.body.style.backgroundColor = prompt('background color?', 'green');
Как я понял надо заменить prompt на что-то?

рони · #4 (**permalink**) 15.06.2014, 15:37

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>

Webtest · #5 (**permalink**) 15.06.2014, 19:26

рони, именно то что нужно. Большое спасибо!

ShadowsKeep · #6 (**permalink**) 09.10.2015, 14:11

Подскажите как можно реализовать смену картинки фона

рони · #7 (**permalink**) 09.10.2015, 14:17

Сообщение от ShadowsKeep

Подскажите как можно реализовать смену картинки фона

а разве кода в 4 посте недостаточно?

ShadowsKeep · #8 (**permalink**) 09.10.2015, 17:33

Сообщение от рони

а разве кода в 4 посте недостаточно?

Сори за тупость, не заметил что клик по картинке меняет фон

CBETIK · #9 (**permalink**) 26.04.2016, 12:26

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

рони · #10 (**permalink**) 26.04.2016, 12:42

CBETIK,
Инверсия цвета

Форум

Справочник

Discord чат

Курсы javascript