Forum PHP.pl > [JavaScript] poruszenie obrazu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] poruszenie obrazu

simman

2.11.2010, 14:51:59

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

Jednak ja chce wykonać działania na image

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

Mój cały kod

[HTML] pobierz, plaintext 
<!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.getElementByName('cos').style.height=c;
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>
[HTML] pobierz, plaintext

kamil4u

2.11.2010, 18:02:47

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

simman

3.11.2010, 10:12:20

Słuchaj zrobiłem tak jak mówisz i rzeczywiście Timer działa

ale nie zmienia się wielkość obrazka DLACZEGO? konsola błędów jak włączyć?

konrados

3.11.2010, 10:45:33

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

W IE klawisz F12

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

simman

3.11.2010, 11:17:51

Okej dzięki a dlaczego ten obrazek nie zmienia wielkości jak wszystko wygląda że jest już dobrze

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...

simman

3.11.2010, 12:09:59

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?

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.

simman

4.11.2010, 09:19:46

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>

celbarowicz

4.11.2010, 13:23:17

a to?

[HTML] pobierz, plaintext 
<html>
<head>
<script LANGUAGE="JavaScript">
<!--
 
var szer=900;
var wys=550;
 
function init()
		{ 
			dots= new dot();
 
		}
 
function dot() { 
 
 
			this.obj=eval("dot1.style");
 
		}
 
function skocz() {    
			dots.obj.left=parseInt(Math.random()*szer);
			dots.obj.top=parseInt(Math.random()*wys);
			document.images.obrazek.width+=15; 
 			document.images.obrazek.height+=15;
 
 
 
 
					}
-->
 
</SCRIPT>
 
 
</head>
 
<body  onload="init();">
 
<div id="dot1" style="position:absolute;top:50; left:50; " >
		<a href="java script:void(0);" onmouseover="skocz();" >	<img src="kuba.jpg" height=80 width=80 name="obrazek"> </a>
</div>
 
 
</body>
</html>
 
[HTML] pobierz, plaintext

simman

4.11.2010, 13:56:09

dzięki już wiem jak korzystać

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.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.