ExercicioWeb: mudanças entre as edições
(Criou página com '==Aqui irei demonstrar um exercicio usando Vetor de Imagens e a propriedade SRC==') |
|||
| (6 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
| Linha 1: | Linha 1: | ||
==Aqui irei demonstrar um exercicio usando Vetor de Imagens e a propriedade SRC== | ==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() ''' | |||
<pre> | |||
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"); | |||
</pre> | |||
''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 .'' | |||
<pre> | |||
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; | |||
} | |||
} | |||
</pre> | |||
''Na terceira linha <pre> img.setAttribute("src",fotos[c]);</pre> 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''' | |||
<pre> | |||
<style> | |||
div{ | |||
border: 1px solid lightgreen; | |||
width: 125px; | |||
height: 120px; | |||
} | |||
</style></pre> | |||
''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 .
