8 de jul. de 2008

Expandir imagens

Para fazer este efeito nas imagens, siga o passo a passo.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.










CLIQUE-ME



Vá até o HTML do seu blog e cole este código após <head>





<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL:
http://www.dynamicdrive.com/style/ */
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>




Agora copie este segundo código e cole onde você quer que apareçam as imagens, colocando no local indicado o endereço das imagens.



Código para linkar imagem pequena com grande



<a class="thumbnail" href="AQUI O ENDERÇO DA IMAGEM#thumb"><img src="REPETIR O ENDEREÇO DA IMAGEM AQUI" width="100px" height="66px" border="0" /><span><img src="REPETIR O ENDEREÇO DA IMAGEM AQUI" /><br /></span></a>



Código para linkar imagem nas palavras




<a class="thumbnail" href="AQUI O ENDEREÇO DA IMAGEM#thumb">ESCREVA AQUI O QUE QUER QUE APAREÇA<span><img src="REPETIR O ENDEREÇO DA IMAGEM AQUI" /><br /></span></a>







Créditos: Dynamic Drive CSS

5 comentários:

  1. Olá, adorei a dica, tanto q agreguei no meu blog, o qual é meu primeiro contato com HTML, ja alterei algumas coisas no código, mas gostaria q me tirasse uma dúvida.
    Se visitar meu blog: http://glaucoac.blogspot.com/ verá que coloquei alguns quadrados(parte da imagem q aparecerá) porém queria alinha-los na horizontal, mas para isso precisava q todas as janelas abrissem na margem esquerda e naum abaixo do quadrado, pois as últimas serão cortadas.
    Pode me ajudar?
    Obrigadu.

    ResponderExcluir
  2. Oi Glauco, tudo bem ? Olha, quanto a isso você terá que ir mexendo no código até conseguir. Um abraço

    ResponderExcluir
  3. Muito obrigado Elke, pela dica estava precisando desse codigo já algum tempo para colocar um Mural de Fotos no meu site, seu Blog está cada dia mais funcional e atraente e cheio de visitas diarias, um dia desses eu entrei e tinha 15 visitantes on-line e eles permaneram durante um bom tempo, parabens seu blog é 10!

    ResponderExcluir
  4. gostaria de saber se essa dica funciona no wordpress.org ou no wordpress.com

    ResponderExcluir
  5. goataria de saber se essa dica funciona com o wordpress.org ou com o .com

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube