Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá Pessoal,
Gostaria de saber como colocar uma imagem randômica (aleatória) em determinado local de uma div/texto/etc.
Tentei utilizar um código proposto pelo Maujor neste tópico, a ideia funciona, mas não consigo controlar a imagem, como posição e tamanho.
Detalhes:
HTML:
Gostaria de colocar a imagem em um determinado locar, a minha escolha, que a cada atualização da página mudasse automaticamente.
JavaScript:
Ainda não sei se posso utilizar o mesmo script que mencionei acima, mas imagino que seria algo próximo.
CSS:
Gostarai de utilizar um estilo CSS para estilizar a imagem randômica, mais especificamente, gostaria de colocar um estilo CSS (como mostrado abaixo) de modo a fixar a largura da imagem, deixando a altura automática.
img.imagens_pequenas {
border: double;
border-color:#CCC; /* Cinza */
width: 200px;
height: auto; /* Acompanha o crescimento normal da imagem" */
float:left;
}>
HTML:
Gostaria de colocar a imagem em um determinado locar, a minha escolha, que a cada atualização da página mudasse automaticamente.
Veja o código do Maujor no post #5, só tem isso de HTML:
<div id="topo"></div>
Esse vai ser o "determinado local", mas pode ser qualquer outro elemento. O Javascript vai fazer a rotação entre as imagens:
listaImagens[0] = "imagens/logo-um.jpg";
listaImagens[1] = "imagens/logo-dois.jpg";
listaImagens[2] = "imagens/logo-tres.jpg";
listaImagens[3] = "imagens/logo-quatro.jpg";>
JavaScript:
Ainda não sei se posso utilizar o mesmo script que mencionei acima, mas imagino que seria algo próximo.
Pode sim.
>
CSS:
Gostarai de utilizar um estilo CSS para estilizar a imagem randômica, mais especificamente, gostaria de colocar um estilo CSS (como mostrado abaixo) de modo a fixar a largura da imagem, deixando a altura automática.
Grato pela atenção!
Pelo o que entendi, está certo seu CSS, caso queira estilizar as imagens (elemento img). Mas, na minha opinião, não precisa do
height:auto;
porque ele é padrão.
--
Resultado :seta: http://tinkerbin.com/hAMyPhPS
Vai dando CTRL + Enter para executar.
Obrigado Diéssica!
O problema era que eu estava tentando estilizar a imagem colocada dentro da div (elemeto <img> com "class" e "src").
Sua solução de colocar um estilo geral para todas as figuras sem uma classe definida resolveu o meu problema, já que sempre coloco uma figura já especificando a classe, as únicas que ficarão "soltas", serão as randômicas!
Grato pela atenção.
Julio.
>
Veja o código do Maujor no post #5, só tem isso de HTML:
<div id="topo"></div>
Esse vai ser o "determinado local", mas pode ser qualquer outro elemento. O Javascript vai fazer a rotação entre as imagens:
listaImagens[0] = "imagens/logo-um.jpg";
listaImagens[1] = "imagens/logo-dois.jpg";
listaImagens[2] = "imagens/logo-tres.jpg";
listaImagens[3] = "imagens/logo-quatro.jpg";Pode sim.
Pelo o que entendi, está certo seu CSS, caso queira estilizar as imagens (elemento img). Mas, na minha opinião, não precisa do
height:auto;
porque ele é padrão.
--
Resultado :seta: http://tinkerbin.com/hAMyPhPS
Vai dando CTRL + Enter para executar.
Antes que me esqueça, caso eu queira que cada imagem direcione para um link diferente ao clicar sobre ela, teria como fazer isso acrescentando algo no código javascript?
Não sei muito de CSS nem JS... Mas, isso revolveria ?
#topo img {