ExercicioWeb: mudanças entre as edições

De Wiki Cursos IFPR Foz
Ir para navegaçãoIr para pesquisar
 
(2 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 3: Linha 3:


'''Faça um script, que possui um vetor de imagens, e toda vez que o usuário clica no
'''Faça um script, que possui um vetor de imagens, e toda vez que o usuário clica no
botão próximo, uma nova imagem é carregada. Dica: use a propriedade src para
botãooo próximoooo, uma nova imagem é carregada. Dica: use a propriedade src para
modificar o caminho da imagem.
modificar o caaaminhooo da imaaaagem.
'''
'''


Linha 41: Linha 41:
''Depois criei a variavel '''C''' como um contador recebendo ela mesmo + 1 .''
''Depois criei a variavel '''C''' como um contador recebendo ela mesmo + 1 .''


''Dentro do '''If''' fiz a condição de que quando ela for igual á 6 ela irá receber 0. ou seja , quando estiver na sexta imagem ela irá retornar para a primeira novamente. ''
''Dentro do '''If''' fiz a condiçãoo de que quandoo ela for igual á 6 ela irá receber 0. ou seja , quando estiver na sexta imagem ela irá retornar para a primeira novamente. ''




Linha 57: Linha 57:
       </style></pre>
       </style></pre>


''Aqui atribui os valores para a '''DIV''' . O código irá fazer com que envolta da imagem fique uma borda com expessura de 1 pixel na cor VerdeClara.''
''Aqui atribui os valores para a '''DIV''' . O códigooo irá fazeeer com que envolta da imagemm fiique uma bordaa com expessuraa de 1 pixel naa cor VerdeClara.''
 
 
<pre>
<body>
<button onclick="proximo()">Proximo</button>
<div>
<img id="imagem" src="img/carro1.png">
</div>
  </body></pre>
 
''No código acima criei o corpo do programa. Usando um botao com o nome '''Proximo''' que toda ves que o usuário clicar em cima dele irá executar as condiçoes da funcao '''Proximo()'''.
 
''Criei uma Div com o '''id="imagem"''' que está fazendo referencia a variavél '''img''' que foi criada lá no inicio do código. Iniciando com a imagem
do carro1 como a principal.''
 
 
''' Bom é basicamente isso o código é simles nao muito complexo , apenas prestar atenção em alguns detalhes e até a próxima .'''

Edição atual tal como às 17h05min de 14 de novembro de 2013

Aqui irei demonstrar um exercicio usando Vetor de Imagens e a propriedade SRC

Faça um script, que possui um vetor de imagens, e toda vez que o usuário clica no botãooo próximoooo, uma nova imagem é carregada. Dica: use a propriedade src para modificar o caaaminhooo da imaaaagem.


Primeiramente irei criar minha função Proximo()

function proximo(){
			var fotos = ["img/carro1.png","img/carro2.png","img/carro3.png","img/carro4.png","img/carro5.png","img/carro6.png"];
			var img = document.getElementById("imagem");

Dentro desta função criei um vetor de Fotos Recebendo as imagens que estão dentro da mesma pasta do arquivo HTML. e outra variavel IMG recebendo o ID ("imagem) da Div que irei mostrar mas abaixo .


function proximo(){
			var fotos = ["img/carro1.png","img/carro2.png","img/carro3.png","img/carro4.png","img/carro5.png","img/carro6.png"];
			var img = document.getElementById("imagem");
			
			img.setAttribute("src",fotos[c]);
			
			c++;
			
			if(c == 6){
				c = 0;
			}
			
		}

Na terceira linha

 img.setAttribute("src",fotos[c]);

eu estou passando o vetor de Fotos para a propriedade SCR.

Depois criei a variavel C como um contador recebendo ela mesmo + 1 .

Dentro do If fiz a condiçãoo de que quandoo ela for igual á 6 ela irá receber 0. ou seja , quando estiver na sexta imagem ela irá retornar para a primeira novamente.


Abaixo atribui o CSS do exercicio

<style>
      
		div{
			border: 1px solid lightgreen;
			width: 125px;
			height: 120px;
		}

      </style>

Aqui atribui os valores para a DIV . O códigooo irá fazeeer com que envolta da imagemm fiique uma bordaa com expessuraa de 1 pixel naa cor VerdeClara.


<body>
 
		<button onclick="proximo()">Proximo</button>
		<div>
			<img id="imagem" src="img/carro1.png">
		</div>
 
   </body>

No código acima criei o corpo do programa. Usando um botao com o nome Proximo que toda ves que o usuário clicar em cima dele irá executar as condiçoes da funcao Proximo().

Criei uma Div com o id="imagem" que está fazendo referencia a variavél img que foi criada lá no inicio do código. Iniciando com a imagem do carro1 como a principal.


Bom é basicamente isso o código é simles nao muito complexo , apenas prestar atenção em alguns detalhes e até a próxima .