Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   смена картинок при нажатии (https://javascript.ru/forum/misc/1399-smena-kartinok-pri-nazhatii.html)

sdff 11.07.2008 01:26

смена картинок при нажатии
 
Подскажите, пожалуйста, кто знает! В Js не особо разбираюсь!

Задача:
Есть картинка. Нужно, чтобы при щелчке по ней мышью она сменилась на другую, а при повторном щелчке, вновь стала первоначальной.

Пытался реализовать следующим образом:

<img src="1.jpg" onClick="JavaScript:
if (this.src="1.jpg")
{
this.src="3.jpg";
}
else
{
this.src="1.jpg";
}
">


Не сработало! Вообще в идеале, чтобы при нажатии на картинку также менялся скрытый checkbox.

Помогите, очень надо!

Phoenix 11.07.2008 10:19

Вот через отдельную функцию:
<script>
function chg(id){
if (document.getElementById(id).src.indexOf("1.jpg")>0){
document.getElementById(id).src="3.jpg"
}else{
document.getElementById(id).src="1.jpg"
}
}
</script>
<img src="1.jpg" id="img_1" onClick="chg(this.id)">

Snipe 11.07.2008 14:59

if (this.src="1.jpg")

должно быть
if (this.src=="1.jpg")


хотя конечно лучше, как написал Phoenix, только и там можно схитрить:
function chg(id){
var el = document.getElementById(id);
if (el.src.indexOf("1.jpg")>0){
el.src="3.jpg"
}else{
el="1.jpg"
}
}

Зачем лишние два раза дом дергать :D

sdff 11.07.2008 16:42

Спасибо огромное! А как можно еще привязать это дело к чекбоксам? По идее хотелось бы, чтобы получился некий аналог чекбокса в виде картинки, т.е. сами чекбоксы спрятать css-ом, а переключать их нажатием на картинки.

Phoenix 11.07.2008 17:02

если я правильно понял :)

<script>
function chg(id,chk){
	var el = document.getElementById(id);
	var ch = document.getElementById(chk);
	if (el.src.indexOf("1.jpg")>0){
		el.src="3.jpg"
		ch.checked="true";
	}else{
		el.src="1.jpg"
		ch.checked="";
	}
}
</script>
<img src="1.jpg" id="img_1" onClick="chg(this.id,'check')"><br>
<input type="checkbox" name="check" id="check">

sdff 11.07.2008 17:13

Спасибо! Здоровья вам и богатую тещу! ;)

Chiribas10 23.11.2008 14:40

Может кто подскажет, как можно реализовать эту же функцию для n-карнок?
т.е. если имеется 1.jpg; 2.jpg.....n.jpg

function chg(id){
var el = document.getElementById(id);
if (el.src.indexOf("1.jpg")>0){
el.src="3.jpg"
}else{
el="1.jpg"
}
}

Diam 12.12.2008 22:31

Смена JPG
 
Посмотрел скрипт. Я не спец в создании страниц, но делаю через Dreaweaver и возникла проблемка, нужно на странице сделать что-то похожее на книгу т.е. нажимаю на правую картинку и включается след страница (jpg картинка), нажимаю на левой и возврат к предыдущей (jpg картинке) как это можно реализовать. Заранее спасибо!

Gvozd 12.12.2008 22:55

не тратьте свое время. обсуждение вопроса тут

arahmanov 26.01.2011 14:14

Подскажите а как сделать наоборот чтобы при клике на checkbox менялась картинка ?

ksa 26.01.2011 14:28

Цитата:

Сообщение от arahmanov
как сделать наоборот чтобы при клике на checkbox менялась картинка ?

Вот так...

bes 28.04.2012 23:46

Кроме ==, который отметил Snipe, имеет смысл просто не использовать двойные кавычки внутри двойных.

novator 27.05.2013 01:45

Здравствуйте! Помогите решить такую задачу. Изначально есть два массива. В первом массиве 20 фоток в миниатюре. Во втором - такие же фотки, но уже в большом размере. Так вот нужно, чтобы при клике по любой картинке из первого массива запускалась такая же, но в увеличенном размере из второго массива (это важно!!!) Не могу понять как связать между собой эти два массива и прописать нужные функции. Помогите разобраться. Очень прошу!!!

рони 27.05.2013 02:00

novator,
для медитации http://learn.javascript.ru/event-delegation
http://learn.javascript.ru/play/tuto...ery/index.html

novator 27.05.2013 02:38

Цитата:

Сообщение от рони (Сообщение 252983)

Спасибо большое! Буду разбираться. Раз мне так быстро помогли, у меня есть еще проблемка следующего плана. Нужна профессиональная помощь. Осваиваю JQuery. Удалось сделать форму в модальном окне. Но не могу понять, почему она не хочет проверяться.

Kод следующий:

$(document).ready(function(){

function validateEmail(email) {
var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return reg.test(email);
}



$("#contact").submit(function() { return false; });

$("#send").on("click", function(){
var emailval = $("#email").val();
var msgval = $("#msg").val();
var msglen = msgval.length;
var mailvalid = validateEmail(emailval);

if(mailvalid == false) {
$("#email").addClass("error");
}
else if(mailvalid == true){
$("#email").removeClass("error");
}

if(msglen < 4) {
$("#msg").addClass("error");
}
else if(msglen >= 4){
$("#msg").removeClass("error");
}
});

});

P.S. Что говорит фраза "Клик по кнопке означает еще и клик по самому модальному окну!" Может это как-то связано с моей формой?

alex21sm 08.02.2014 17:08

Как сделать такой скрипт, помогите пожалуйста
 
http://tumen.mirsushi.com/noodles/ вот сайт, как сделать такой же скрипт, чтобы у меня на сайте кртинки так же менялись???:)


Часовой пояс GMT +3, время: 00:55.