<a href="#" title="">
<script language='JavaScript'>
pics = new Array(4)
pics[0] = "<img src='#' />"
pics[1] = "<img src='#' />"
pics[2] = "<img src='#' />"
pics[3] = "<img src='#' />"
random = Math.random() * (pics.length)
random = Math.floor(random)
document.write(pics[random])
</script>
</a>
O símbolo # destacado em amarelo deve ser substituído por um link qualquer. Se você não quiser as imagens com link, remova a primeira e a última linha. Os símbolos # destacados em azul devem ser substituídos pelos URL das imagens.
Para aumentar a quantidade de imagens, repita a linha abaixo quantas vezes for necessário:
pics[] = "<img src='#' />"
Lembrando de continuar a sequência numérica entre os colchetes (começando com zero e terminando com o número total de imagens menos um), e também de colocar o número total de imagens entre os parênteses a frente de Array(). Assim:
pics = new Array(número total de imagens)
Olá, venho aqui comentar um assunto totalmente aleatório do da postagem pra pedir um help pra ti.
ResponderExcluirTô criando um layout e coloquei uma imagem fixa na lateral do blog. Usei esse tutorial http://juarezlourenco.blogspot.com.br/2012/12/inserir-imagem-fixa.html (perdão o link!!), porém a imagem que usei pra fixar no lado do blog é um menu que eu criei no photoshop, esse: http://1.bp.blogspot.com/-w99PjYLwXc0/UPxHDT_oSrI/AAAAAAAAAnc/lDBcRlet1k0/s1600/menu+sabrina.PNG tal qual deve ser mapeado para as pessoas clicarem e irem pra devida página. Porem no tutorial que eu usei dá pra colocar um só link na imagem toda e não é isso que preciso. Preciso usar esse mesmo tutorial só que ao inves de colocar um link pra imagem toda gostaria de colocar os 5 links, no caso. Sei mapear a imagem (uso o image-maps), sei pegar o código e tudo mais, mas nesse caso não sei o que posso fazer pra usar esse tutorial só que colocando a imagem mapeada para direcionar pra todos os links e tal. Não sei se entendeu minha dúvida, só sei que estou precisando dessa ajuda urgentemente pra terminar o novo layout do blog rs e como eu gosto muito do seu blog e seus tutoriais sempre são muito úteis, resolvi pedir ajuda pra ti. Teria como me Ajudar?? grata!!
Olá, Sabrina! Entendi o seu problema. Gostaria de poder ajudar mas, infelizmente, não posso: você entende mais de blogs e códigos HTML do que eu rs! Obrigado pelos elogios e me desculpe pela demora!
ExcluirOlá, estive pensando no seu problema e acho que encontrei a solução (talvez você já a tenha encontrado antes, né? rs!). Fiz um teste e funcionou perfeitamente. Como não é possível inserir algumas tags HTML aqui nos comentários, veja o código, na forma de documento de texto simples, neste link:
Excluirhttps://sites.google.com/site/juarezlourenco/imagem_fixa_com_links.txt
Espero ter ajudado!
Gostei é o que eu preciso, apenas preciso saber como redimensionar a imagem no tamanho que eu desejo? e centralizar.
ResponderExcluirNão sei se entendi direito a sua pergunta mas, vamos lá. Para redimensionar adicione os atributos height e width em todas as imagens como no exemplo:
Excluirpics[0] = "<img src='URL DA IMAGEM' height='300' with='300' />" <!-- Substitua os números pela altura e largura que desejar -->
E para centralizar coloque todo o codigo dentro de uma div:
<div style="text-align: center">
CÓDIGO AQUI
</div>
Se sua pergunta estiver relacionada aos comentários anteriores experimente substituir a parte abaixo:
style="display:scroll; position:fixed; top:30px; right:10px;"
Substitua por:
style="display:scroll; position:fixed; top:30px; left:50%; right:50%;"
Estou com problema, o with='' não funciona (não meche a dimensão) somente o height=''
ExcluirÉ porque escrevi errado rsrs! O certo é width. Me desculpe pelo erro!
ExcluirDeu certo agora eu nem tinha percebido tb. sgsugsusgu faz parte.
ExcluirEstou repetindo tudo para ficarem lado a lado, mas estão ficando grudadas, gostaria de saber tb qual o codigo para dar espaço entre 2 imagens lado a lado?
ResponderExcluirAdicione um "padding" na tag <img /> em todas as imagens como no exemplo abaixo:
Excluir<img style='padding: 10px;' src='URL DA IMAGEM' height='300' with='300' />
O valor 10px siginifica 10 pixels de espaçamento. Você pode alterá-lo conforme a sua vontade.
Então, está tudo certo, está aleatório, está com espaço, mas quando a imagem aparece ela deixa de outro tamanho, e o (with) não está tendo efeito.
ResponderExcluirExperimente novamente com (width), deve funcionar. Escrevi errado no código.
ExcluirBom ficou tudo perfeito, a única coisa é que tem imagem que na vertical aumenta e sai fora de alinhamento, tem como ficar tudo alinhado? na horizontal está tudo certo!
ResponderExcluircaso queira visitar meu site para entender melhor é www.spaceworld.com.br
ResponderExcluirNão notei nada anormal! Pelo menos no meu navegador está tudo alinhado, tanto na vertical, quanto na horizontal. Recarreguei a página varias vezes e estava tudo aparentemente certo!
ExcluirAcho que agora entendi: as imagens se movimentam quando recarregamos a página . Certifique-se de que todas as imagens estão com a mesma largura (width).
ExcluirOlá, todas as imagens estão com o mesmo tamanha height 260 width 300, mesmo assim tem imagem que fica mais larga, mais (width), as imagens estão apenas dimensionadas diferentes, não tem a mesma dimensão. Exemplo a web que aparece no centro tem 700 pixel por 1387 pixel, o próximo no centro é um gabinete com 700 pixel por 525 pixel, se eu salvar elas dimensionada na mesma medida Ex. 700p por 700p irão ficar fora de forma. Preciso de uma quadrado exe. e q a imagem se auto ajuste dentro sem destorção, dentro da medida que eu escolher em HEIGHT E WIDTH.
ExcluirRealmente resolvi, fiz o que vc tinha falado, criei uma imagem em branco no tamanho do quadro height 260 width 300 e redimensionei à imagem dentro, agora tudo está alinhado. Tenho uma uma duvida para finalizar, vc criou em cima, no começo de tudo uma (a href) que serve para todas imagens aleatória que aparece, mas eu queria uma (a heref) para cada imagem, como faço?
ExcluirTente assim:
Excluirpics[0] = "<a href='#'><img style='padding: 20px;' src='URL DA IMAGEM' height='260' width='300' /></a>"
O ideal é utilizar imagens no tamanho normal sem precisar redimensionar através de height e width. Mas, mesmo assim, é uma boa prática sempre utilizar estes atributos mesmo que seja no tamanho original da imagem, assim o navegador "marca" um quadro no lugar que a imagem deve aparecer mesmo que, por um problema qualquer, a imagem não seja carregada. Boa sorte.
Deu Tudo certo, fico Grato por tudo.
ResponderExcluirAgora preciso de uma ajuda, essas imagens que a gente criou eu fiz caber na pagina inteira ocupando horizontal inteiro, uma ao lado da outra, mas no google Chromer ele não pega a pagina inteira, no Explore pega magina inteira, como fazer ser igual para todos os navegadores?
Infelizmente não sei te responder. Testei no Chrome e a primeira sequência de imagens fica um pouco mais larga do que a segunda. No Firefox fica tudo aparentemente da mesma largura. Não testei no IE.
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirOlá! Vou ser honesto com você, não sei!!! Obrigado pela compreensão!
ExcluirEu consegui fazer aparecer imagens aleatórias. Mas eu quero aplicar isso em um galeria e, por isso, o seu código falta uma coisa. Se eu colocar isso em mais de um link tem a chance de aparecer imagens repetidas quando sortear. E eu queria fazer com que não repetisse nenhum imagem. Você sabe o que tenho que fazer?
ResponderExcluirE outra coisa queria fazer com que a imagem fosse sorteada e viesse com o link dela, o link para a imagem maior. Cada imagem tem seu link e se eu fizer igual vc fez no site o link vai sair errado. Entendeu?
Olá!
ExcluirPara colocar um link em cada imagem basta modificar o código como mostrado abaixo:
<script language='JavaScript'>
pics = new Array(4)
pics[0] = "<a href='Link para a imagem maior' title=''><img src='Link para a miniatura' /></a>"
pics[1] = "<a href='Link para a imagem maior' title=''><img src='Link para a miniatura' /></a>"
pics[2] = "<a href='Link para a imagem maior' title=''><img src='Link para a miniatura' /></a>"
pics[3] = "<a href='Link para a imagem maior' title=''><img src='Link para a miniatura' /></a>"
random = Math.random() * (pics.length)
random = Math.floor(random)
document.write(pics[random])
</script>
Já para não repetir imagens, siceramente não sei.
Olá. Gostei da sua solução. Parabéns. Tenho muitas postagens sem imagens e na home Page aparece uma imagem padrão nas postagens sem imagens. Teria como adaptar seu código para ramdomizar essa imagem padrão? Apenas na home Page.
ResponderExcluirPara fazer um elemento aparecer somente na home page do blog podemos usar as tags condicionais do Blogger como no exemplo:
Excluir<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Adicionar código HTML do elemento aqui -->
</b:if>
Para que uma imagem aleatória apareça somente na home page o código completo ficaria assim:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<a href="#" title="">
<script language='JavaScript'>
pics = new Array(4)
pics[0] = "<img src='#' />"
pics[1] = "<img src='#' />"
pics[2] = "<img src='#' />"
pics[3] = "<img src='#' />"
random = Math.random() * (pics.length)
random = Math.floor(random)
document.write(pics[random])
</script>
</a>
</b:if>
Se entendi corretamente sua pergunta não é bem isso que você quer de modo que, no momento, não tenho a solução para o seu problema.