Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > перестановка изображений

Автор: irenka 30.11.2009, 19:33

есть вот такой код:

<html>
<head>
<title>Смена изображений</title>
<script>
function chan(obj)
{ var r1=Number(obj.a1.value)
  var r2=Number(obj.a2.value)
  if ((r1<1)||(r1>4)||(r2<1)||(r2>4))
    alert ("Неверно заданы номера рисунков!")
  else
  { var z=document.images[r1-1].src
    document.images[r1-1].src=document.images[r2-1].src;
    document.images[r2-1].src=z
  }
}
</script>
</head>
<body><center>
<img src="1.jpg"  name="pic1">
<img src="2.jpg"  name="pic2">
<img src="3.jpg"  name="pic3">
<img src="4.jpg"  name="pic4"><br><br>
<form name=form1>
<input type="text" name="a1" size=1> и
<input type="text" name="a2" size=1><br><br>
<input type="button" value="Поменять местами" onClick="chan(form1)">
</form></center>
</body>
</html>

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

Автор: Amphiluke 30.11.2009, 19:50

Если делать по-простому и по-быстрому (но не по самому правильному), то так:

Код


<html>
<head>
<title>Смена изображений</title>
<script type="text/javascript">
function chan(obj) { 
  var r1=parseInt(obj.a1.value);
  var r2=parseInt(obj.a2.value);
  if ((r1<1)||(r1>4)||(r2<1)||(r2>4))
    alert ("Неверно заданы номера рисунков!")
  else { 
    var z=document.images[r1-1].src;
    document.images[r1-1].src=document.images[r2-1].src;
    document.images[r2-1].src=z;
  }
}
function setNum(num) {
    document.getElementById("form1").a1.value = num.toString();
}
</script>
</head>
<body>
<center>
<img src="1.jpg" id="pic1" onclick="setNum(1);">
<img src="2.jpg" id="pic2" onclick="setNum(2);">
<img src="3.jpg" id="pic3" onclick="setNum(3);">
<img src="4.jpg" id="pic4" onclick="setNum(4);"><br><br>
<form action="#" name="form1" id="form1">
<input type="text" name="a1" size="1"> и
<input type="text" name="a2" size="1"><br><br>
<input type="button" value="Поменять местами" onclick="chan(this.form);">
</form>
</center>
</body>
</html>

P.S. Кстати, избавляйтесь от этих «анахронизмов» с атрибутами name у элементов вне формы и обращение через коллекции типа document.images.

Автор: irenka 30.11.2009, 19:57

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

Автор: Amphiluke 30.11.2009, 19:58

Прошу прощения, не до конца прочел задание...

Код


<html>
<head>
<title>Смена изображений</title>
<script type="text/javascript">
function chan(obj) { 
  var r1=parseInt(obj.a1.value);
  var r2=parseInt(obj.a2.value);
  if ((r1<1)||(r1>4)||(r2<1)||(r2>4))
    alert ("Неверно заданы номера рисунков!")
  else { 
    var z=document.images[r1-1].src;
    document.images[r1-1].src=document.images[r2-1].src;
    document.images[r2-1].src=z;
  }
}
var fieldName = "a2";
function setNum(num) {
    fieldName = (fieldName == "a2") ? "a1" : "a2";
    document.getElementById("form1")[fieldName].value = num.toString();
}
</script>
</head>
<body>
<center>
<img src="1.jpg" id="pic1" onclick="setNum(1);">
<img src="2.jpg" id="pic2" onclick="setNum(2);">
<img src="3.jpg" id="pic3" onclick="setNum(3);">
<img src="4.jpg" id="pic4" onclick="setNum(4);"><br><br>
<form action="#" name="form1" id="form1">
<input type="text" name="a1" size="1"> и
<input type="text" name="a2" size="1"><br><br>
<input type="button" value="Поменять местами" onclick="chan(this.form);">
</form>
</center>
</body>
</html>

Автор: irenka 30.11.2009, 20:02

что-то не пашет(( тоже самое получилось.

Автор: Amphiluke 30.11.2009, 20:07

Цитата(irenka @ 30.11.2009, 20:02

)

что-то не пашет(( тоже самое получилось.

У меня во всех браузерах работает клик на картинках. Просто скопируйте полностью в новый документ.

Автор: irenka 30.11.2009, 20:11

Спасибочки огромное!!! все получилось smile

Добавлено через 6 минут и 11 секунд
а можно еще вопросик) даны 2 поля и кнопка. В первое поле вводятся цифры, во второе буквы. при нажатии на кнопку данные этих форм объединяются в третью. например:
в первом поле данные: 12345
во втором: абвгд
в третьем результат такой: 1а2б3в и т.д.

Автор: Amphiluke 30.11.2009, 20:33

Мда. Если учитывать все нюансы (например, строки могут быть неравной длины), то довольно навороченно получается.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script type="text/javascript">
function mix(_frm) {
    var letts = _frm.letters.value;
    var digs = _frm.digits.value;
    var less = (letts.length < digs.length) ? _frm.letters : _frm.digits;
    var great = (letts.length < digs.length) ? _frm.digits : _frm.letters;
    var mixd = "";
    for (var i = 0; i < less.value.length; i++) {
        mixd += digs.charAt(i) + letts.charAt(i);
    }
    mixd += great.value.slice(i);
    _frm.mixed.value = mixd;
}
</script>
</head>

<body>
<form action="#">
<p>Буквы <input type="text" id="letters" name="letters" /><br />
Цифры <input type="text" id="digits" name="digits" /></p>
<input type="button" value="mix" onclick="mix(this.form);" /><br />
Смесь <input type="text" id="mixed" name="mixed" />
</form>
</body>
</html>

Автор: irenka 30.11.2009, 20:42

Вы просто мой спаситель!!! там если не равной длины то нужно пробелы ставить тогда)

Автор: Amphiluke 30.11.2009, 20:46

Экие вы нетерпеливые. Уж новую тему создали smile

Так что-ль?

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script type="text/javascript">
function mix(_frm) {
    var letts = _frm.letters.value;
    var digs = _frm.digits.value;
    var great = (letts.length < digs.length) ? _frm.digits : _frm.letters;
    var mixd = "";
    var ch1, ch2;
    for (var i = 0; i < great.value.length; i++) {
        ch1 = (digs.charAt(i) == "") ? " " : digs.charAt(i);
        ch2 = (letts.charAt(i) == "") ? " " : letts.charAt(i);
        mixd += ch1 + ch2;
    }
    mixd += great.value.slice(i);
    _frm.mixed.value = mixd;
}
</script>
</head>

<body>
<form action="#">
<p>Буквы <input type="text" id="letters" name="letters" /><br />
Цифры <input type="text" id="digits" name="digits" /></p>
<input type="button" value="mix" onclick="mix(this.form);" /><br />
Смесь <input type="text" id="mixed" name="mixed" />
</form>
</body>
</html>

Автор: irenka 30.11.2009, 20:51

все так!!! я прост боюсь что не успею)) сдавать завтра)) а Вы мне очень помогли smile

посмотрите уж пожалуйста еще про цвет рамочки))