Смена цвета/картинки фона при нажатии на элемент
Здравствуйте.
Допустим есть обычная кнопка: <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'> Как сделать скрипт, чтобы при нажатии на картинку, в бэкграунд добавлялась картинка? И, чтобы, при нажатии на другую картинку, текущая удалялась и ставилась новая. Но чтобы на текущий цвет фон эти действия не влияли. |
|
рони, прочитал статью, относительно понял. Но как сделать так, чтобы менялся фон / добавлялась картинка при нажатии на элемент? Я, просто, в яваскрипте пока не разбираюсь.
Пока вставил такой вариант из вашей статьи, но это совсем не то. document.body.style.backgroundColor = prompt('background color?', 'green'); Как я понял надо заменить prompt на что-то? |
:-? 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>
|
рони, именно то что нужно. Большое спасибо!
|
Подскажите как можно реализовать смену картинки фона
|
Цитата:
|
Цитата:
|
Улучшить скрипт.
Добрый день, такой вопрос, а как организовать такую фишку? Имеем вышеуказанный скрипт, где при нажатии на кнопку меняется цвет фона, а как сделать что бы при выборе цвета из такого бара(Ну или как он правильно называется) как вот на этих сайтах. http://getcolor.ru/
http://html-color-codes.info/Cvetovye-kody-HTML/ И еще к каждому из них привязывался свой цсс файл ну или стиль инвертируется, к примеру фон белый, цвет шрифта черный и наоборот? Как вам такая загадка? О, едва не забыл, как сделать, что бы браузер помнил сделанный выбор, а то слетает при каждом обновлении страницы? И кнопку сброса на стиль по умолчанию? |
|
А можно все выложить в виде кода, а то никак не дружу с джавай:) Там код нужно самому править, а для меня это очень сложно, буду благодарен, если как можно ближе к готовому результату код выкинете:)
|
CBETIK,
могу посоветовать раздел работа, может там отгадают вашу загадку. |
рони,
Спасибо, сейчас попробуем туда перенестись:) |
Спасибо РОНИ, выручаешь всех и всегда, а вот насчет бага якорных кнопок http://javascript.ru/forum/448425-post7.html так и не понятно, хотя в интернете читал, а именно http://tanalin.com/blog/2013/03/link-button/ что этот баг лечится, просто мне к его лечению очень далеко!
|
limarandrew,
:-? |
re: по теме и не только
гортая просторы нашего нета наткнулся на "селекта" с его выбором цвета фона елемента
<FORM>
<SELECT onChange=
"document.bgColor=this.options[this.selectedIndex].value">
<OPTION VALUE="red"> красный
<OPTION VALUE="2E8B57"> морской волны
<OPTION VALUE="87CEEB"> голубой
<OPTION VALUE="brown"> коричневый
<OPTION VALUE="yellow"> желтый
<OPTION VALUE="blue"> синий
<OPTION VALUE="FFFFFF" SELECTED> белый
</SELECT>
</FORM>
хотя это не то что искал но всеравно можно где-то использовать; на самом деле интересовала константа .onChange но как -то вышло так что она только для 3 елементов.. |
limarandrew,
:-? :-? |
| Часовой пояс GMT +3, время: 09:20. |