HTML+CSS+JavaScript

Всем доброго времени суток.

Я никак не могу докумекать до следующего., дано задание в создать HTML-страницу в центре которой должен размещаться квадрат красного цвета, при нажатии на него, он должен менять цвет с красного на синий и менять свое положение, быть чуточку ниже и правее. А при нажатии на синий квадрат принимать исходную позицию и становиться красным. Это я сделал при помощи JavaScript, код прилагается во вложенном файле.


но есть загвоздка в следующем, я применил картинки квадратов внешние. то есть указал их из папки в которой они находятся.
Но мне нужно создать квадраты при помощи СSS, и заставить их выполнять условия задания.

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

1. В HTML абсолютно ВСЁ - оно прямоугольное.
Окно браузера - прямоугольное, ЛЮБОЙ тег - это прямоугольник.
А квадрат - это всего лишь прямоугольник, у которого длины сторон равны.

Так что берёте ЛЮБОЙ тег и прописываете в нём одинаковые ширину (width) и высоту (height) - вот вам и квадрат.

<div style="width: 100px; height: 100px"></div> <span style="width: 111px; height: 111px"></span> <b style="width: 122px; height: 122px"></b> <hr style="width: 134px; height: 134px" /> <input style="width: 141px; height: 141px" /> ...

2. В HTML абсолютно ВСЁ имеет какой-то фон.
По умолчанию - чаще всего он прозрачный, но иногда бывает и белый непрозрачный (у окна браузера, у полей ввода - <input>, <textarea>...)
И у ЛЮБОГО тега этот фон можно поменять.
Устанавливаете нужное значение для фона - и вот вам разноцветные квадраты:

<div style="width: 100px; height: 100px; background-color: red"></div> <span style="width: 111px; height: 111px; background-color: blue"></span> <b style="width: 122px; height: 122px; background-color: green"></b> <hr style="width: 134px; height: 134px; background-color: yellow" /> <input style="width: 141px; height: 141px; background-color: silver" /> ...

3. теперь запускаете эти квадраты в браузере, смотрите и обнаруживаете - каких-то квадратов НЕТ, их не видно.
Это значит, что тот тег, которого не видно, имеет по-умолчанию стиль display равный inline (т. е. линейный вид).
Переназначаете этот стиль этих "невидимых" элементов на block; другим, которые и так видны - не надо, у них по умолчанию блочный вид

<div style="width: 100px; height: 100px; background-color: red"></div> <span style="width: 111px; height: 111px; background-color: blue; display: block"></span> <b style="width: 122px; height: 122px; background-color: green; display: block"></b> <hr style="width: 134px; height: 134px; background-color: yellow" /> <input style="width: 141px; height: 141px; background-color: silver" /> ...

4. Наконец, положим, имеется желание эти квадраты не просто в один ряд сверху вниз расположить, а дать каждому "своё место". Добавляете позиционность (position) и указываете расстояние вниз (top) и вправо (left) от верхнего левого угла окна браузера:

<div style="width: 100px; height: 100px; background-color: red; position: absolute; top: 23px; left: 34px"></div> <span style="width: 111px; height: 111px; background-color: blue; display: block; position: absolute; top: 156px; left: 165px"></span> <b style="width: 122px; height: 122px; background-color: green; display: block; position: absolute; top: 298px; left: 189px"></b> <hr style="width: 134px; height: 134px; background-color: yellow; position: absolute; top: 123px; left: 321px" /> <input style="width: 141px; height: 141px; background-color: silver; position: absolute; top: 234px; left: 456px" /> ...

Вот именно это и будет "созданием квадратов при помощи CSS", а не та фигня, кою вы нарисовали.

CSS - это как раз ТО, что прописывается у любого тега в атрибуте style="вот ОНО, ТО самое CSS".

Хорошо квадраты мы создали, но вот мне необходимо придать им при помощи Java Script возможность передвигаться и менять свое положение при нажатии на красный квадрат, он превращается в синий и сдвигается ниже и левее, а при нажатии на синий он вновь становится красным и возвращается на свое прежнее место.
код имеется в прилагаемое файле, но вот как его применить к созданным квадратам. ???

Квадраты создал я, а не "мы".
И это не есть "хорошо".

Это - "плохо".
Хотя бы потому, что вы даже "спасибо" мне за эту "лекцию" не сказали.

Тем более, УВЕРЕН, и не прочитали.
А стоило бы.
Причём ВНИМАТЕЛЬНО.
-----------------

"Передвигаться" - это как?
Можно "телепортироваться" - это значит мгновенно.
А можно - потихонечку "переползти", чтобы движение было визуально заметным.

Ну и?

Прощу прощения. да, момент со спасибо я упустил, спасибо вам огромное за помощь.

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

> я приложил к сообщению перводу фаил с кодом и если его запустить в браузере....
Для этого его нужно открыть, сохранить, запустить, потом еще найти и удалить - это 5 ненужных действий

> Лекцию прочитал, причем даже не раз
Значит не поняли.
У вас же уже есть какие-то наброски и вы не совсем не знаете JS.
Значит сможете в свои наброски добавить новые знания.
А из лекции вы узнали что за позицию отвечают свойства, в данном случае, left и top, а за цвет - background-color. Вот их в JS и измените по клику.

Сразу сори за офтоп )
АЯС, а вы не преподаватель по жизни? Просто манера общения характерная. Объем знаний и доступность изложения вызывают уважение ) - с одной стороны, а с другой - вы так и позиционируете свой диалог... Нет, даже не диалог, а ответ - как лекцию - как бы сверху! Немного не в духе этого форума. Тут все на равных общаться стараются.
___
P.S. Это не претензия и не замечание (за этим пусть модеры следят), это любопытство )

Спасибо. Я попробовал, увы все равно не получилось.

<html>
<head>
<script>
var p=1;
function t() {
if (p==1) {
var s = document.i1.style;
s.top = 20 + 'px';
s.left= 20 + 'px';
s.background = 'blue';
p=2;}
else {
var s = document.i1.style;
s.top = 10 + 'px';
s.left= 10 + 'px';
s.background = 'red';
p=1;}}
</script>
</head>
<body>
<center>
<div name="i1" style="width:150px; height:150px; background: red; top : 10px; left : 10px; position: relative;" onclick=t();> </div>
</center>
</body>
</html>

<html> <head> <script> function change(x){   if(x.style.backgroundColor == 'red'){     x.style.backgroundColor = 'blue';     x.style.top = '150px';     x.style.left = '150px';   }   else{     x.style.backgroundColor = 'red';     x.style.top = '100px';     x.style.left = '100px';   } } </script> </head> <body> <div onclick="change(this)" style="width: 100px; height: 100px; background-color: red; position: absolute; top: 100px; left: 100px"></div> </body> </html>

СПАСИБО БОЛЬШОЕ, чрезмерно благодарен.