Войти
  1. ВКонтакте
  2. Facebook
  1. » » » Как заставить двигаться квадраты???
Новые публикации Скрыть панель справаПоказать панель справа

Как заставить двигаться квадраты???

2012-01-28T21:53:43+04:00 2012-01-29T18:49:09+04:00
Абитуриент
  1. Офлайн
  2. Посетители
  3. 1 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 1 отправлено 21:53, 28.01.2012
Всем доброго времени суток.

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

<html>
<head>

<script>
var p=1;

function t() {

if (p==1) {
var s = document.i1.style;

s.top = 20 + 'px';
s.left= 20 + 'px';
eval("document.i1.src='blue.png'");
p=2;}
else {
var s = document.i1.style;
s.top = 10 + 'px';
s.left= 10 + 'px';
eval("document.i1.src='red.png'");
p=1;}}

</script>
</head>

<body>
<center>
<img name="i1" src="red.png" style="top : 10px; left : 10px; position: relative;" onclick=t();>
<span> class="sq"</span>
</center>
</body>
</html>

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

квадраты я создал, но вот как их заставить выполнять условия не пойму никак. Есть у кого идеи, варианты ?
Профессор
  1. Офлайн
  2. Посетители
  3. 150 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 2 отправлено 11:08, 29.01.2012
пичалька, я js не знаю, но кое-что могу сказать
так img
HTML code:
  1. <img name="i1" src="red.png" style="top : 10px; left : 10px; position: relative;" onclick=t();>

замени на
HTML code:
  1. <div name="i1" style="width:200px; height:200px; background: red; top : 10px; left : 10px; position: relative;" onclick=t();> </div>


и вместо "eval" используй
HTML code:
  1. s.background = 'blue';
  2.  
  3. s.background = 'red';


соответсвенно


------------------------------------------
Я знаю CSS, HTML, PHP, MySQL и другие страшные слова.
Абитуриент
  1. Офлайн
  2. Посетители
  3. 1 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 3 отправлено 15:02, 29.01.2012
Спасибо за совет, я попробовал его в действии, но что то у меня они не движутся. и не меняют цвет., может чего не правильно делаю ?

<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>
Профессор
  1. Офлайн
  2. Посетители
  3. 150 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 4 отправлено 18:49, 29.01.2012
я просто пользуюсь xhtml 1.0

HTML code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{l_langcode}" lang="{l_langcode}">
  3. <head>
  4. <head>
  5. <script>
  6. var p=1;
  7.  
  8. function t() {
  9. var s = document.getElementById('i1').style;
  10. if (p==1) {
  11.  
  12. s.top = 20 + 'px';
  13. s.left= 20 + 'px';
  14. s.background = 'blue';
  15. p=2;}
  16. else {
  17. s.top = 10 + 'px';
  18. s.left= 10 + 'px';
  19. s.background = 'red';
  20. p=1;}}
  21.  
  22. </script>
  23. </head>
  24.  
  25. <body>
  26. <center>
  27. <div id="i1" style="width:200px; height:200px; background: red; top : 10px; left : 10px; position: relative;" onclick=t();> </div>
  28. </center>
  29. </body>
  30. </html>


------------------------------------------
Я знаю CSS, HTML, PHP, MySQL и другие страшные слова.
 
Перейти
Найти

Доступ закрыт.

  1. Вам запрещено отвечать в темах данного форума.

Изменения статуса

  1. профиль Видимо, я последний выживший :) 01:19, 17.10.2011
  2. профиль Готов стать модератором)) 12:04, 17.09.2011
  3. профиль Восстанавливаем нормальную работу сайта и форума. 20:09, 13.09.2011