Jump to content
  • 0

Картинка странно меняет атрибут!

psywalker

Asked by psywalker,

 Share

Question

psywalker Explorer

psywalker

Posted
Posted

Добрый вечер!

У нас есть:

<input type="button" value="Надо нажать меня" onclick="test()" /><br />
<img id="img" src="spice.gif" alt="" />

<script type="text/javascript">
	var img = document.getElementById('img')

		function test(){

				if(img.src="spice.jpg"){
					img.src="spice.gif"
					img.style.display = "none"
				}
		}

</script>

Сразу вопросы:

1) При таком коде Почему картинка при нажатии на input всё равно получает img.style.display = "none, при том, что атрибут у неё явно НЕ с jpg на конце?

2) Как правильно в if делать проверку на значение атрибута .src у картинки? Я написал так if(img.src="spice.jpg"), но чую, что это какая та чушь.

3) Что означает эта запись в if (img.src="spice.jpg"), как правильно её произнести?

Заранее благодарю. Кстати эта тема ещё только началась, будут дополнительные вопросы, только после выяснения этих))

Link to comment
Share on other sites

25 answers to this question

Recommended Posts

  • 0
gesandte Explorer

gesandte

Posted
Posted (edited)
Добрый вечер!

У нас есть:

<input type="button" value="Надо нажать меня" onclick="test()" /><br />
<img id="img" src="spice.gif" alt="" />

<script type="text/javascript">
	var img = document.getElementById('img')

		function test(){

				if(img.src="spice.jpg"){
					img.src="spice.gif"
					img.style.display = "none"
				}
		}

</script>

Сразу вопросы:

3) Что означает эта запись в if (img.src="spice.jpg"), как правильно её произнести?

Заранее благодарю. Кстати эта тема ещё только началась, будут дополнительные вопросы, только после выяснения этих))

при условии что там все таки не =, а ==, то примерно так

если img.src равно spice.jpg, то img.src равно spice.gif и img.style.display = "none"

Хотя в данной транскрипции получается бред)))

Посему там должно быть != или !== (незнаю как на яве, но в пхп лучше записать !==) , что означает неравно.

Тогда получим условие

если img.src не равно spice.jpg, то img.src равно spice.gif и Img.style.display = "none"

Пс. Если че не так, палкой не бить))) ява вообще не знаю, основываюсь на знаниях пхп)

Edited by gesandte
Link to comment
Share on other sites
  • 0
3ABAPKA Explorer

3ABAPKA

Posted
Posted
Сразу вопросы:

1) При таком коде Почему картинка при нажатии на input всё равно получает img.style.display = "none, при том, что атрибут у неё явно НЕ с jpg на конце?

2) Как правильно в if делать проверку на значение атрибута .src у картинки? Я написал так if(img.src="spice.jpg"), но чую, что это какая та чушь.

3) Что означает эта запись в if (img.src="spice.jpg"), как правильно её произнести?

Заранее благодарю. Кстати эта тема ещё только началась, будут дополнительные вопросы, только после выяснения этих))

1) и 2) Потому что условие всегда выполняется, ничего не проверяется, а присваивается значение, лучше написать if(img.src == "spice.jpg") или

if(img.src != "spice.jpg")

3) Примерно = "Если (значению пути картинки присвоить spice.jpg)", а хотелось бы "Если путь картинки равен spice.jpg"

if (img.src="spice.jpg") if (img.src == "spice.jpg")

Там вот в коде есть еще такой момент не понятный:

img.src="spice.gif"

img.style.display = "none"

Если условие верно то присвоить значению пути spice.gif и установить стиль для изображения display = none

Думается это произойдет так быстро, что юзер не заметит spice.gif, если изображение все равно скрывается нужна ли строка img.src="spice.gif"

Может ты хотел сделать примерно так:

if (img.src == "spice.jpg"){
img.src="spice.gif";
}else{
img.style.display = "none";
}

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
  • Author
Posted

Спасибо ребят. Значит я понял следующее.

1) if(img.src = "spice.jpg") Выполнять проверку таким образом - это полный бред, потому-что условие всегда будет true, так как мы тут просто спрашиваем: Если img.src присваивается "spice.jpg", то мы выполняем этот блок?

2) Если я правильно понял, то проверка на равенство значения атрибута выполняется например так if(img.src=="spice.gif"), и вот тут мы уже НЕ присваиваем, а Именно сравниваем значение атрибута src у картинки? Т.е как бы спрашиваем, "Если значение атрибута Равно "spice.gif", то мы выполняем блок"?

Продолжим:

Вопросы

<input type="button" value="Надо нажать меня" onclick="test()" /><br />
<img id="img" src="spice.gif" alt="" />

<script type="text/javascript">
	var img = document.getElementById('img')


		function test(){


				if (img.src == "spice.gif"){
					img.src="spice.jpg";

				}else{img.style.display = "none";}

		}

</script>

3) Почему при таких раскладах Срабатывает именно второй блок кода (else{img.style.display = "none";}), а не Первый, ведь сейчас я уже проверяю на равенство значение атрибута у картинки, а он равен именно "spice.gif"?

4) Как мне правильно составить условия: Я хочу чтобы "Если атрибут у картинки имеет значение "spice.gif", то поменять его на "spice.jpg", а если он "spice.jpg", то поменять его на "spice.gif"... и так далее чтобы постоянно менялось в зависимости от значения атрибута. "?

Link to comment
Share on other sites
  • 0
gesandte Explorer

gesandte

Posted
Posted (edited)

Кароч косяк походу тут

<html>
<title>js image</title>
<body>

<input type="button" value="click here" onclick="test()" /><br />
<img id="img" src="spice.png" alt="" />

<script type="text/javascript">
	var img = document.getElementById('img');
	function test() {
		if (img.src == "spice.png") {
			img.src="spice.jpg";

		} else {
			img.style.display = "none";
			window.alert(img.src);
		}
	}

</script>

</body>
</html>

img.src имеет в качестве значения не имя файла, а путь

Edited by gesandte
Link to comment
Share on other sites
  • 0
Nekromancer Explorer

Nekromancer

Posted
Posted (edited)
"Если атрибут у картинки имеет значение "spice.gif", то поменять его на "spice.jpg", а если он "spice.jpg", то поменять его на "spice.gif"... и так далее чтобы постоянно менялось в зависимости от значения атрибута. "?

ну значит дисплэй ноне присваивать то не нужно.. кстати.. было бы правильно всё таки с начала документацию почитать.. http://javascript.ru/basic/operators

var str = img.src;
var test = str.split('/');

if(test[test.length-1]=='spice.gif'){
 img.src='spice.jpg';
}else{
 img.src='spice.gif';
}

так наверно самый правильный вариант.. ну для поставленной задачи

Edited by Nekromancer
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
  • Author
Posted

Спасибо мужики, разобрался.

Но вот тогда главный вопрос:

<input type="button" value="Надо нажать меня" onclick="test()" /><br />
<img id="img" src="spice.gif" alt="" />

<script type="text/javascript">
	var img = document.getElementById('img')


		function test(){

				if (img.getAttribute('src') == "spice.gif"){
					img.src="spice.jpg";

				}else if(img.getAttribute('src') == "spice.jpg"){
					img.src="spice.gif";

				}
		}


</script>

При таких раскладах, картинка меняет jpg на gif при нажатии на Импут. Всё хорошо, НО как мне сделать так, чтобы и сама картинка меняла свой атрибут <img id="img" src="spice.gif" alt="" /> ?

Link to comment
Share on other sites
  • 0
hf3 Explorer

hf3

Posted
Posted

Я правильно понимаю, что ты имеешь ввиду - то раз картинка меняется - то измменения в Дом дереве Браузера происходят.

При этом ни файрбаг ни коды исходные страницы - этого не отражают.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
  • Author
Posted
Я правильно понимаю, что ты имеешь ввиду - то раз картинка меняется - то измменения в Дом дереве Браузера происходят.

При этом ни файрбаг ни коды исходные страницы - этого не отражают.

Ну если в ДОМе происходят изменения, то почемубы не произвести изменение в самой ноде, чтобы мне жилось спокойно?

Link to comment
Share on other sites
  • 0
alexspb Explorer

alexspb

Posted
Posted (edited)
Мне нужно чтобы я открыл HTML код и лично увидел это тут <img id="img" src="spice.gif" alt="" /> - Это реал?
Создайте статичную страничку, или используйте любой серверный язык для формирования HTML-кода страницы - только так сервер отдает браузеру HTML. Edited by alexspb
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
  • Author
Posted
Создайте статичную страничку, или используйте любой серверный язык для формирования HTML-кода страницы - только так сервер отдает браузеру HTML.

Ааа, вот оно что, значит тока ПХП может тут помочь? Ясненько, спасибо. Но тогда вопрос:

Но в принципе если в ДОМе всё и так меняется, этого вполне хватит?

Link to comment
Share on other sites
  • 0
Nekromancer Explorer

Nekromancer

Posted
Posted

конечно.. если файербаг показывает то оно меняется.. хотя меняется и не только то, что он показывает.. иногда даже не определяет изменения, ты сам их должен понимать.. если ты в скрипте поменял - то оно меняется и на странице.. но исходный код не меняется, так как после перезагрузки вернётся в исходное..

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
  • Author
Posted
конечно.. если файербаг показывает то оно меняется.. хотя меняется и не только то, что он показывает.. иногда даже не определяет изменения, ты сам их должен понимать.. если ты в скрипте поменял - то оно меняется и на странице.. но исходный код не меняется, так как после перезагрузки вернётся в исходное..

Вот именно, что при малейшей перезагрузке мой скрипт полетит к чертям, тогда какой смысл во-всём этом?

Link to comment
Share on other sites
  • 0
LunatiK Explorer

LunatiK

Posted
Posted

Фаир баг показывает изменения внесённые яваскриптом. А то что ты смотриш код страницы - это страница взятая из кеша браузера, это то, что изначально отдал сервер.

Харош тупить.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
  • Author
Posted
Фаир баг показывает изменения внесённые яваскриптом. А то что ты смотриш код страницы - это страница взятая из кеша браузера, это то, что изначально отдал сервер.

Харош тупить.

Да нее, я понял, понял. Значит выходит, что JS может сделать изменения и они будут действительны до-тех пор, пока я не перезагружусь.

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
Да нее, я понял, понял. Значит выходит, что JS может сделать изменения и они будут действительны до-тех пор, пока я не перезагружусь.

может и после того будут актуальны. Если например на куку повязаны или еще как. Вобщем, исходный код можно изменить только на стороне сервера, JS меняет на стороне клиента.

Link to comment
Share on other sites
  • 0
hf3 Explorer

hf3

Posted
Posted

Хтттп протокол не умеет сохранять состояния -

Поэтому либо

1) Делаем это вручную скрытым полем с вьюстэйт - привет АСП.НЕТ!)

2) Куками.

Но на практике это бывает редко нужно. Обычно это делается серверными скриптами - к примеру ещё на сервере определить какой браузер и отдавать или прозрачную пнг или гифку…

в исходный код выдаётся то что прислал сервер. после первичной отрисовки - изменить его невозможно.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
  • Author
Posted
Хтттп протокол не умеет сохранять состояния -

Поэтому либо

1) Делаем это вручную скрытым полем с вьюстэйт - привет АСП.НЕТ!)

2) Куками.

Но на практике это бывает редко нужно. Обычно это делается серверными скриптами - к примеру ещё на сервере определить какой браузер и отдавать или прозрачную пнг или гифку…

в исходный код выдаётся то что прислал сервер. после первичной отрисовки - изменить его невозможно.

Понял, в принципе вопрос решён. Для себя я понял, что JS может управлять поведением именно страницы, ДО перезагрузки.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept