Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript] poruszenie obrazu, Timer działa ale nie wiem jak poruszyć obraz
simman
post
Post #1





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 23.05.2007

Ostrzeżenie: (10%)
X----


Cześć!
Mam problem chce zmienić wielkość i pozycje mojego image pilka.jpg wykorzystując Timer.

Timer działa jeśli z kodu pozbędziemy się tego (IMG:style_emoticons/default/smile.gif) Jednak ja chce wykonać działania na image (IMG:style_emoticons/default/smile.gif)

<img src="pilka.jpg" name ="cos"/>
document.getElementByName('cos').style.height=c;


Mój cały kod
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
  2. <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
  3. <meta name="Description" content=" [wstaw tu opis strony] ">
  4. <meta name="Keywords" content=" [wstaw tu slowa kluczowe] ">
  5. <meta name="Author" content=" [dane autora] ">
  6. <meta name="Generator" content="kED2">
  7.  
  8. <title> [tytuł strony] </title>
  9.  
  10. <link rel="stylesheet" href=" [nazwa_arkusza_stylow.css] " type="text/css">
  11. </head>
  12. <body onload ="doTimer()">
  13. <script language ="javascript" type "text/javascript">
  14.  
  15. var c=0;
  16. var t;
  17. var timer_is_on=0;
  18.  
  19. function timedCount()
  20. {
  21. c=c+1;
  22.  
  23. document.getElementById('wooYayMessage').innerHTML= c.toString();
  24. document.getElementByName('cos').style.height=c;
  25. t=setTimeout("timedCount()",1000);
  26. }
  27.  
  28. function doTimer()
  29. {
  30. if (!timer_is_on)
  31. {
  32. timer_is_on=1;
  33. timedCount();
  34. }
  35. }
  36.  
  37.  
  38. <div id ="wooYayMessage" style="height: 1.5em font-size: 2em; color:red">
  39.  
  40. </div>
  41. <img src="pilka.jpg" name ="cos"/>
  42. </body>
  43. </html>
Go to the top of the page
+Quote Post
kamil4u
post
Post #2





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----


Nie wiem o co Ci chodzi, ale nie ma czegoś takiego jak getElementByName jest getElementsByName ,ale funkcja ta zwraca tablicę. Czyli jeżeli masz element jako pierwszy w elemencie to:
document.getElementsByName('cos')[0].style.height=c;
Jeżeli tych elementów jest więcej to musisz użyć pętlę.

Używaj konsoli błędów to pozbędziesz się większości(jak nie wszystkie) literówek
Go to the top of the page
+Quote Post
simman
post
Post #3





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 23.05.2007

Ostrzeżenie: (10%)
X----


Słuchaj zrobiłem tak jak mówisz i rzeczywiście Timer działa (IMG:style_emoticons/default/smile.gif) ale nie zmienia się wielkość obrazka DLACZEGO? konsola błędów jak włączyć?

Ten post edytował simman 3.11.2010, 10:13:34
Go to the top of the page
+Quote Post
konrados
post
Post #4





Grupa: Zarejestrowani
Postów: 623
Pomógł: 79
Dołączył: 16.01.2008

Ostrzeżenie: (0%)
-----


Firefox -> narzędzia -> konsola błędów.

W IE klawisz F12

Poza tym ściągnij se firebuga (dodatek do firefoxa).

Ten post edytował konrados 3.11.2010, 10:46:06
Go to the top of the page
+Quote Post
simman
post
Post #5





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 23.05.2007

Ostrzeżenie: (10%)
X----


Okej dzięki a dlaczego ten obrazek nie zmienia wielkości jak wszystko wygląda że jest już dobrze
Go to the top of the page
+Quote Post
zegarek84
post
Post #6





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

Ostrzeżenie: (0%)
-----


wysokosć musi mieć określoną jednostkę - albo procentową względem oryginału albo w pikselach -> czyli dla 15 np 15px...
Go to the top of the page
+Quote Post
simman
post
Post #7





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 23.05.2007

Ostrzeżenie: (10%)
X----


Cytat(zegarek84 @ 3.11.2010, 11:30:48 ) *
wysokosć musi mieć określoną jednostkę - albo procentową względem oryginału albo w pikselach -> czyli dla 15 np 15px...


zrobiłem tak dla przykładu
document.getElementsByName('cos')[0].width="60%";

obrazek się nie pokazuje wtedy

jednak błąd
oczekiwano końca wartości, ale odnaleziono 'font-size' błąd przetwarzania wartości 'hight' deklaracja opuszczona

Co mam zrobić? by działało?

Ten post edytował simman 3.11.2010, 12:12:37
Go to the top of the page
+Quote Post
kamil4u
post
Post #8





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----


Pokaż swój kod w obecnej formie. Lepiej jak będziesz operował CSS(el.style.własność) niż HTML(el.własność). Zobacz czy nigdzie nie brakuje Ci ";". Zarówno w CSS jak i w JS.
Go to the top of the page
+Quote Post
simman
post
Post #9





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 23.05.2007

Ostrzeżenie: (10%)
X----


Cytat(kamil4u @ 3.11.2010, 22:18:45 ) *
Pokaż swój kod w obecnej formie. Lepiej jak będziesz operował CSS(el.style.własność) niż HTML(el.własność). Zobacz czy nigdzie nie brakuje Ci ";". Zarówno w CSS jak i w JS.


Tak wygląda mój kod teraz

Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
  <meta name="Description" content=" [wstaw tu opis strony] ">
  <meta name="Keywords" content=" [wstaw tu slowa kluczowe] ">
  <meta name="Author" content=" [dane autora] ">
  <meta name="Generator" content="kED2">

  <title> [tytuł strony] </title>

  <link rel="stylesheet" href=" [nazwa_arkusza_stylow.css] " type="text/css">
</head>
<body onload ="doTimer()">
<script language ="javascript" type "text/javascript">

var c=0;
var t;
var timer_is_on=0;

function timedCount()
{
c=c+1;

document.getElementById('wooYayMessage').innerHTML= c.toString();

document.getElementsByName('cos')[0].width="60%";
t=setTimeout("timedCount()",1000);
}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}


</script>
<div id ="wooYayMessage" style="height: 1.5em font-size: 2em; color:red">

</div>
<img src="pilka.jpg"  name ="cos" />
</body>
</html>
Go to the top of the page
+Quote Post
celbarowicz
post
Post #10





Grupa: Zarejestrowani
Postów: 253
Pomógł: 31
Dołączył: 30.03.2009
Skąd: Szczecin

Ostrzeżenie: (0%)
-----


a to?
  1. <script LANGUAGE="JavaScript">
  2. <!--
  3.  
  4. var szer=900;
  5. var wys=550;
  6.  
  7. function init()
  8. {
  9. dots= new dot();
  10.  
  11. }
  12.  
  13. function dot() {
  14.  
  15.  
  16. this.obj=eval("dot1.style");
  17.  
  18. }
  19.  
  20. function skocz() {
  21. dots.obj.left=parseInt(Math.random()*szer);
  22. dots.obj.top=parseInt(Math.random()*wys);
  23. document.images.obrazek.width+=15;
  24. document.images.obrazek.height+=15;
  25.  
  26.  
  27.  
  28.  
  29. }
  30. -->
  31.  
  32.  
  33.  
  34. </head>
  35.  
  36. <body onload="init();">
  37.  
  38. <div id="dot1" style="position:absolute;top:50; left:50; " >
  39. <a href="java script:void(0);" onmouseover="skocz();" > <img src="kuba.jpg" height=80 width=80 name="obrazek"> </a>
  40. </div>
  41.  
  42.  
  43. </body>
  44. </html>
  45.  
Go to the top of the page
+Quote Post
simman
post
Post #11





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 23.05.2007

Ostrzeżenie: (10%)
X----


dzięki już wiem jak korzystać (IMG:style_emoticons/default/smile.gif) a to najważniejsze. Myślę że ten temat powinien przeczytać każdy co zaczyna z javascript bo jest naprawdę ogrom potrzebnych informacji. Jeszcze raz dziękuje wszystkim za pomoc.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 22.08.2025 - 19:03