Нужно, чтобы при клике на ссылку фоновая картинка менялась на заданную

@tatianakuz · Регистрация: 22.01.2015

Author24 — интернет-сервис помощи студентам

Добрый день!
Пожалуйста, помогите разобраться.
У меня очень простой сайт, фоновая картинка и несколько ссылок.

Очень нужно, чтобы при клике на ссылку фоновая картинка менялась на заданную, а при закрытии обратно на первоначальный фон.
Я думаю, что для умных людей это не сложно, но я потратила уже 2 недели, чтобы попытаться разобраться(((

Где размещать эту команду?? В html, JS или CSS???

Спасибо всем, кто откликнется!

@Jodah · 29.01.2015, 16:31

2 недели? 0_о В интернете же полно рабочих примеров.

HTML5

<html>
  <head></head>
  <body>
    <div id="text"></div>
    <div id="button" onclick="changeBg">click me</div>
    <script>
        var is_clicked = false;
        function changeBg{
            if(is_clicked){
                document.getElementById('text').style.backgroundImage='url(/top1.jpg)';
            }else{
                document.getElementById('text').style.backgroundImage='url(/top2.jpg)';
            }
            is_clicked = !is_clicked;
        }
    }
    </script>
  </body>
</html>

@tatianakuz · 29.01.2015, 17:50 **[ТС]**

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

2 недели? 0_о В интернете же полно рабочих примеров.

HTML5

<html>
  <head></head>
  <body>
    <div id="text"></div>
    <div id="button" onclick="changeBg">click me</div>
    <script>
        var is_clicked = false;
        function changeBg{
            if(is_clicked){
                document.getElementById('text').style.backgroundImage='url(/top1.jpg)';
            }else{
                document.getElementById('text').style.backgroundImage='url(/top2.jpg)';
            }
            is_clicked = !is_clicked;
        }
    }
    </script>
  </body>
</html>

Спасибо!
Подставила, но не работает(((
Я заменила ссылки на изображения.
Подскажите, пожалуйста, мне криворукой, еще какие-то данные надо заменить??

@Jodah · 29.01.2015, 18:02

Извиняюсь, что-то стал часто ошибаться в примерах.
В 5 строчке около функции не поставил скобки:

HTML5

1	<div id="button" onclick="changeBg()">click me</div>

@tatianakuz · 29.01.2015, 18:11 **[ТС]**

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

Извиняюсь, что-то стал часто ошибаться в примерах.
В 5 строчке около функции не поставил скобки:

HTML5

1	<div id="button" onclick="changeBg()">click me</div>

Заменила.
Все равно не работает((((
Ну что я делаю не так((((

@Jodah · 29.01.2015, 18:41

tatianakuz, ещё раз прошу прощения.

Проверил код у себя, теперь точно должен работать:

HTML5

<html>
    <head>
    </head>
    <body>
        <button onclick="changeBg()" style="width:100px; height:50px; background:#fff;">click me</button>
        <script>
        var is_clicked = false;
        document.body.style.backgroundImage='url(test1.jpg)';
        function changeBg(){
            if(is_clicked){
                document.body.style.backgroundImage='url(test1.jpg)';
            }else{
                document.body.style.backgroundImage='url(test2.jpg)';
            }
                is_clicked = !is_clicked;
        }
        </script>
    </body>
</html>

@tatianakuz · 29.01.2015, 19:11 **[ТС]**

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

tatianakuz, ещё раз прошу прощения.

Проверил код у себя, теперь точно должен работать:

HTML5

<html>
    <head>
    </head>
    <body>
        <button onclick="changeBg()" style="width:100px; height:50px; background:#fff;">click me</button>
        <script>
        var is_clicked = false;
        document.body.style.backgroundImage='url(test1.jpg)';
        function changeBg(){
            if(is_clicked){
                document.body.style.backgroundImage='url(test1.jpg)';
            }else{
                document.body.style.backgroundImage='url(test2.jpg)';
            }
                is_clicked = !is_clicked;
        }
        </script>
    </body>
</html>

Ой, извините вы меня за тупость...
Я думаю, что проблема на самом деле во мне.

Вот что получается:

PHP/HTML

<button onclick="$('#exampleModal7').arcticmodal()" style="width:100px; height:50px; background:#fff;">click me</button>
        <script>
        var is_clicked = false;
        document.body.style.backgroundImage='url(bg.jpg)';
        function changeBg(){
            if(is_clicked){
                document.body.style.backgroundImage='url(bg.jpg)';
            }else{
                document.body.style.backgroundImage='url(bg2.jpg)';
            }
                is_clicked = !is_clicked;
        }
        </script>
 
<div class="mainblock">
<div id="layer1">
 
<a href="#" onclick="$('#exampleModal7').arcticmodal()">“ы<br>станешь<br>лучше</a>
<div style="display: none;">
<div class="b-modal" id="exampleModal7">
 
<div width="100%" style="text-align: justify;">
<font style="font-family:'HelveticaNeueCyr-Thin',Sans-Serif; font-size: 12pt;">
ТЕКСТ
<div align="right" style="height: 165px; background: url('img/sign.png') right no-repeat; background-position-x: 78%;">
<br><br>“ать€на *узнецова,<br>
ƒиректор проекта
</div>
</font>
</div>
</div></div>

Правильно ???

@MOSTOR · 29.01.2015, 19:36

PHP

1	<button onclick="$('#exampleModal7').arcticmodal()" style="width:100px; height:50px; background:#fff;">click me</button>

Сдесь вы описали что будет использовании при нажатии на кнопку,

PHP

1	"$('#exampleModal7').arcticmodal()"

.
Но за смену заднего фона отвечает функция

Javascript

1	changeBg()

. Т.е При нажатии вы вызываете НЕ функцию которая отвечает за смену заднего фона.

Добавлено через 2 минуты
Т.е вместо

PHP

1	<button onclick="$('#exampleModal7').arcticmodal()" style="width:100px; height:50px; background:#fff;">click me</button>

напишите как сказал Jodah

PHP

1	<button onclick="changeBg()" style="width:100px; height:50px; background:#fff;">click me</button>

@Jodah · 29.01.2015, 19:38

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

Правильно ???

Эм...нет, вы заменили вызов функции из onclick, из-за чего работать не должно.

@tatianakuz · 29.01.2015, 19:46 **[ТС]**

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

Эм...нет, вы заменили вызов функции из onclick, из-за чего работать не должно.

Я заменила, потому что получается вот так с исходным кодом (changeBg)

ДО клика

Нужно, чтобы при клике на ссылку фоновая картинка менялась на заданную

ПОСЛЕ клика

Что я делаю не так((( ??

@MOSTOR · 29.01.2015, 19:48

Мадам, я и Jodah написали) замените вызов функции) Проверьте правильно ли указаны пути к картинкам.

@Jodah · 29.01.2015, 19:59

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

Что я делаю не так((( ??

Нужно начать изучение основ HTML и CSS.

Вы не понимаете, что делаете, в итоге получается каша.

Вы где-нибудь устанавливали фон, кроме моего скрипта? Например, для чего указана фоновая картинка в строке 25?

@tatianakuz · 29.01.2015, 19:59 **[ТС]**

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

Мадам, я и Jodah написали) замените вызов функции) Проверьте правильно ли указаны пути к картинкам.

Это и есть с заменой((

Эффект как нужно)) только я не могу понять, как сделать, чтобы смена была по клику на ссылки сайта ??
Сейчас работает, но по клику на "click me"...
И как сделать, чтобы масштаб изображения все-таки вписывался в окно..

сейчас вот так:

КЛИК

@MOSTOR · 29.01.2015, 20:00

А я кажется понял в чем проблема, картинка ложится одна на другую, при этом размер 2 картинки меньше чем 1, я думаю в стиле фона надо дописать background-size: cover; что бы она растягивалась, но я не уверен что так и должно быть.

@tatianakuz · 29.01.2015, 20:01 **[ТС]**

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

Нужно начать изучение основ HTML и CSS.

Вы не понимаете, что делаете, в итоге получается каша.

Вы где-нибудь устанавливали фон, кроме моего скрипта? Например, для чего указана фоновая картинка в строке 25?

Да, есть основной фон.
Строка 25 - это вставленная картинка в всплывающем окне.

@Jodah · 29.01.2015, 20:03

tatianakuz, основной фон для какого тега указан? <html>?
При клике должен меняться фон всей страницы или какой-то её части?

@MOSTOR · 29.01.2015, 20:03

Что бы картинка менялась на каждом клике по ссылке то нужно дописать в каждую ссылку что бы выполнялась данная функция.

@tatianakuz · 29.01.2015, 20:06 **[ТС]**

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

tatianakuz, основной фон для какого тега указан? <html>?
При клике должен меняться фон всей страницы или какой-то её части?

Да, <html>
Да, всей страницы!

@Jodah · 29.01.2015, 20:13

tatianakuz, уберите фон тега <html>. За фон теперь отвечает только скрипт. Теперь всё работает?

@tatianakuz · 29.01.2015, 20:22 **[ТС]**

Добавлено через 1 минуту

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

tatianakuz, уберите фон тега <html>. За фон теперь отвечает только скрипт. Теперь всё работает?

Фон основной конечно ушел, но скрипту картинка по-прежнему огромная и работает по вашей ссылке.

Когда пробую поправить - все перестает работать(((

@MOSTOR 84 / 9 / 2 Регистрация: 30.12.2014 Сообщений: 111
	29.01.2015, 20:00	14
	А я кажется понял в чем проблема, картинка ложится одна на другую, при этом размер 2 картинки меньше чем 1, я думаю в стиле фона надо дописать background-size: cover; что бы она растягивалась, но я не уверен что так и должно быть. 0

@tatianakuz 0 / 0 / 0 Регистрация: 22.01.2015 Сообщений: 12
		1
	Нужно, чтобы при клике на ссылку фоновая картинка менялась на заданную 29.01.2015, 15:16. Показов 3930. Ответов 22 Метки нет (Все метки) Добрый день! Пожалуйста, помогите разобраться. У меня очень простой сайт, фоновая картинка и несколько ссылок. Очень нужно, чтобы при клике на ссылку фоновая картинка менялась на заданную, а при закрытии обратно на первоначальный фон. Я думаю, что для умных людей это не сложно, но я потратила уже 2 недели, чтобы попытаться разобраться((( Где размещать эту команду?? В html, JS или CSS??? Спасибо всем, кто откликнется! 0

@Jodah 3851 / 3196 / 1343 Регистрация: 01.08.2012 Сообщений: 10,820
	29.01.2015, 19:38	9
	Сообщение от tatianakuz Правильно ??? Эм...нет, вы заменили вызов функции из onclick, из-за чего работать не должно. 0

@tatianakuz 0 / 0 / 0 Регистрация: 22.01.2015 Сообщений: 12
	29.01.2015, 19:46 [ТС]	10
	Сообщение от Jodah Эм...нет, вы заменили вызов функции из onclick, из-за чего работать не должно. Я заменила, потому что получается вот так с исходным кодом (changeBg) ДО клика ПОСЛЕ клика Что я делаю не так((( ?? 0

@MOSTOR 84 / 9 / 2 Регистрация: 30.12.2014 Сообщений: 111
	29.01.2015, 19:48	11
	Мадам, я и Jodah написали) замените вызов функции) Проверьте правильно ли указаны пути к картинкам. 0

@Jodah 3851 / 3196 / 1343 Регистрация: 01.08.2012 Сообщений: 10,820
	29.01.2015, 19:59	12
	Сообщение от tatianakuz Что я делаю не так((( ?? Нужно начать изучение основ HTML и CSS. Вы не понимаете, что делаете, в итоге получается каша. Вы где-нибудь устанавливали фон, кроме моего скрипта? Например, для чего указана фоновая картинка в строке 25? 0

@tatianakuz 0 / 0 / 0 Регистрация: 22.01.2015 Сообщений: 12
	29.01.2015, 19:59 [ТС]	13
	Сообщение от MOSTOR Мадам, я и Jodah написали) замените вызов функции) Проверьте правильно ли указаны пути к картинкам. Это и есть с заменой(( Эффект как нужно)) только я не могу понять, как сделать, чтобы смена была по клику на ссылки сайта ?? Сейчас работает, но по клику на "click me"... И как сделать, чтобы масштаб изображения все-таки вписывался в окно.. сейчас вот так: КЛИК 0

@tatianakuz 0 / 0 / 0 Регистрация: 22.01.2015 Сообщений: 12
	29.01.2015, 20:01 [ТС]	15
	Сообщение от Jodah Нужно начать изучение основ HTML и CSS. Вы не понимаете, что делаете, в итоге получается каша. Вы где-нибудь устанавливали фон, кроме моего скрипта? Например, для чего указана фоновая картинка в строке 25? Да, есть основной фон. Строка 25 - это вставленная картинка в всплывающем окне. 0

@Jodah 3851 / 3196 / 1343 Регистрация: 01.08.2012 Сообщений: 10,820
	29.01.2015, 20:03	16
	tatianakuz, основной фон для какого тега указан? <html>? При клике должен меняться фон всей страницы или какой-то её части? 0

@tatianakuz 0 / 0 / 0 Регистрация: 22.01.2015 Сообщений: 12
	29.01.2015, 20:06 [ТС]	18
	Сообщение от Jodah tatianakuz, основной фон для какого тега указан? <html>? При клике должен меняться фон всей страницы или какой-то её части? Да, <html> Да, всей страницы! 0

@Jodah 3851 / 3196 / 1343 Регистрация: 01.08.2012 Сообщений: 10,820
	29.01.2015, 20:13	19
	tatianakuz, уберите фон тега <html>. За фон теперь отвечает только скрипт. Теперь всё работает? 0

@tatianakuz 0 / 0 / 0 Регистрация: 22.01.2015 Сообщений: 12
	29.01.2015, 20:22 [ТС]	20
	Добавлено через 1 минуту Сообщение от Jodah tatianakuz, уберите фон тега <html>. За фон теперь отвечает только скрипт. Теперь всё работает? Фон основной конечно ушел, но скрипту картинка по-прежнему огромная и работает по вашей ссылке. Когда пробую поправить - все перестает работать((( 0