Archive for the 'imagens' Tag

Imagens gratuitas

Quem trabalha com web, quase sempre precisa de conteúdo para ilustrar seus projetos (inclusive eu). Dai, ou você compra uma câmera digital muito phoderosa e faz um curso de fotografia ou você se vira no Google mesmo.

Então pra ajudar a galera que passa esse aperto, eis uma lista de excelentes sites que disponibilizam diversas fotos para download grátis, (sob licença livre, sem Copyright).

imagem

Freerange Stock

Morgue File

Stock.XCHNG

StockVault.net

Public-Domain-Photos.com

Esses são os que eu conheço. Se alguém souber de outros coloca aí nos comentários.

Galeria de Imagens com JavaScript

Uou! Dei uma sumida mas já estou de volta. Agora estudando e ralando, então sobra pouco tempo para blogar. Mas vou tentar não sumir por muito tempo.

Já faz algum tempo que eu queria escrever esse post para mostrar que as HB’s aprendendo Javascript não foram tão inúteis, eu vou mostrar como criar uma simples galeria de imagens com JavaScript. Vale lembrar que eu ainda estou aprendendo, então a coisa vai ser bem básica mesmo.

As imagens
Pegue 4 imagens, de preferência do mesmo tamanho e dê os nomes de 1.jpg, 2.jpg, 3.jpg, e 4.jpg. É importante que as imagens estejam na mesma pasta que você vai salvar a sua página HTML.

O HTML
Primeiro precisamos do código HTML que ficaria assim:

<html>
<head>
</head>
<body>
<h1>Galeria de Imagens</h1>
<p>Use os botões ou clique nas fotos para ampliar.</p>
<input type="button" value="Anterior" onClick="anterior()" />
<input type="button" value="Próxima" onClick="proximo()" /><br /><br />
<img src="1.jpg" id="imgg"/><br /><br />
</body>
</html>

É importante observar que os botões tem uma propriedade “onclick”, que executa uma função Javascript quando é clicado.

E o JavaScript
Essa é a parte da mágica.

<script language="JavaScript">
img =1
function proximo(){
if (img<4){
img++
i =img+".jpg"
document.getElementById("imgg").src=""+i+""
}
}
function anterior(){
if (img!=1){
img––
i =img+".jpg"
document.getElementById("imgg").src=""+i+""
}
}
</script>

Aqui eu criei uma variável chamada img e a iniciei com o valor 1. Depois criei duas funções: uma para avançar “proximo()” e outra para voltar “anterior()”. As funções são chamadas quando clicamos no botões. O Javascript deve ser colocado dentro das tags <head>.

Juntamos tudo e pronto. Como eu tinha dito, essa galeria é bem simples, mas é uma boa forma de mostrar o que se pode fazer com alguns conceitos básicos.

Se tiver alguma dúvida ou se você quiser dar alguma sugestão, comente aí.

PS.: É melhor digitar o código do que copiar pois o WordPress converte as aspas em apóstrofos.