Web Dois Ponto Zero: imagens

Mostrar mensagens com a etiqueta imagens. Mostrar todas as mensagens

Um efeito realmente espectacular para apresentar a sua galeria de imagens.

Coloque o seu rato sobre uma das imagens para a poder ver em pormenor.

Como podem obter este efeito:

1. Façam upload das vossas imagens e dos respectivos thumbnails para um servidor qualquer.

Os thumbnails são aquelas imagens miniatura da imagem normal que aparece no post e que, quando se passa o rato sobre elas, fazem emergir a imagem original ao lado.
Qualquer editor de imagem (photoshop, irfanview, paint shop pro, etc.) permite criar thumbnails a partir de imagens.
Mesmo na internet será fácil encontrar serviços que vos fazem esta tarefa num piscar de olhos. É só googlar um pouco.
Para fazer upload de imagens e de ficheiros para servidores, também podem googlar um pouco e certamente encontrarão servidores gratuitos que armazenem os vossos ficheiros e imagens.

2. Criem uma página html com o seguinte código:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>galeria1</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="main.js"></script>
  <style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}
a{
text-decoration:none;
color:#f30; }
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9; margin:.5em 0;
overflow:auto;
width:800px;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
/* */
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
/* */
  </style>
</head>
<body>
<a href="http://www.profelectro.info/Uploads/luisj/10G_2010_1.jpg"
 class="preview" title="Edilson"><img
 src="http://www.profelectro.info/Uploads/luisj/10G_2010_1s.jpg"
 alt="Edilson"></a><br>
<a href="http://www.profelectro.info/Uploads/luisj/10G_2010_2.jpg"
 class="preview" title="Helder+Igor"><img
 src="http://www.profelectro.info/Uploads/luisj/10G_2010_2s.jpg"
 alt="Helder+Igor"></a><br>
<a href="http://www.profelectro.info/Uploads/luisj/11L_2010_1.jpg"
 class="preview" title="Joao"><img
 src="http://www.profelectro.info/Uploads/luisj/11L_2010_1s.jpg"
 alt="Joao"></a><br>
<a href="http://www.profelectro.info/Uploads/luisj/11L_2010_2.jpg"
 class="preview" title="Como não se deve trabalhar"><img
 src="http://www.profelectro.info/Uploads/luisj/11L_2010_2s.jpg"
 alt="Como não se deve trabalhar"></a><br>
<a href="http://www.profelectro.info/Uploads/luisj/11L_2010_3.jpg"
 class="preview" title="Em actividade"><img
 src="http://www.profelectro.info/Uploads/luisj/11L_2010_3s.jpg"
 alt="Em actividade"></a><br>
<a href="http://www.profelectro.info/Uploads/luisj/11L_2010_4.jpg"
 class="preview" title="Em actividade"><img
 src="http://www.profelectro.info/Uploads/luisj/11L_2010_4s.jpg"
 alt="Em actividade"></a>
</body>
</html>

É óbvio que na parte inferior do código mostrado, devem substituir os endereços onde se encontram alojadas as minhas imagens e o respectivo nome e anotações pelos das vossas.
Usei o prefixo s para os thumbnails, para as poder distinguir das imagens propriamente ditas.

3. Façam o upload deste ficheiro html que criaram para um servidor qualquer (ver acima), bem como dos ficheiros "jquery.js" e "main.js"
Estes ficheiros podem ser descarregados aqui:
jquery.js
main.js

4. Agora é só colocarem no vosso post Blogger o seguinte código:


<iframe src="http://www.profelectro.info/galeria1.html" height="800" width="100%"></iframe>

Sendo que devem alterar o URL para o URL onde colocaram o vosso ficheiro html anteriormente criado.

Caso haja algum problema, coloquem-no nos comentários, que eu ajudarei no que puder e souber.

Boa Sorte!

[+/-]

Colocar texto ao redor das imagens nos posts do blogger

Uma coisa que pode ser interessante no nosso blog é ter a possibilidade de fazer rodear de texto as imagens que colocamos nos nossos posts do blog(ger).

Como sabem, quando inserimos imagens nos posts, o blogger encarrega-se de as centrar e apenas podemos ter texto acima ou abaixo delas, ficando sempre um espaço em branco nas zonas laterais dessa imagem.
Esse "contratempo" pode ser ultrapassado agindo do seguinte modo:

Passo 1:

- Edite o HTML do seu blog;
- Localize a zona CSS da sua folha de estilos;
- Copie o seguinte código para lá, por exemplo logo abaixo da secção de posts.


    /*Wrap text around image
    .left {
    float: left;
    margin: 3px;
    }

    .right {
    float: right;
    margin: 3px;
    }

Passo 2:

Para qualquer imagem da internet, ou sua que tenha alojado na internet, que queira inserir, faria algo do tipo

Então adicione apenas a tag class="right" ou class="left", ficando com

Colocando essa tag class="right", a imagem flutuará para a direita e o texto rodea-la-à à sua esquerda... e vice-versa, naturalmente.

Só uma nota final.
Se quiser aplicar esta dica, sempre que quiser inserir uma imagem seguindo estes passos, deve inserir-la com a janela onde escreve o seu post em "Editar Html" e não "Redigir".
Experimente e boa sorte!

NOTA: Esta é mais uma dica patrocinada por BlogU

[+/-]

Escrever Texto Sobre Imagem

Por vezes temos necessidade de escrever um texto sobre uma imagem postada. Em vez de usarmos o Photoshop ou outro qualquer software de edição de imagem, online ou não, é muito simples conseguir isso sem qualquer dessas ferramentas.
Vamos ver como:

1. Imagem com texto escrito sobre ela

Este Livro É Muito Interessante!

Para utilizar esta dica basta colocar uma div dentro de outra.
Vejam abaixo o código que utilizei no post para a imagem que aparece acima, e depois alterem-no de acordo com as vossas necessidades.
Penso que não apresenta dificuldade nenhuma.

código:


<DIV style="width:225px;height:363px;background: url(http://www.profelectro.info/Uploads/luisj/oTigreBranco.jpg) top right no-repeat;"> 
     <div style="font-size:x-large;color:blue;padding:30px;">
<br>
<br> 
<br>
<br>
<br>    
<center><b>Este Livro É Muito Interessante!</b></center>
</div>
</DIV>

Dentro desta linha apresento abaixo mais alguns efeitos e o respectivo código, logo abaixo de cada um.

2. Caixa com fundo e texto sobre esse fundo

O livro "O Tigre Branco", de
ARAVIND ADIGA, é muito bom

código:


<DIV align="center">
<div style="width:300px;font-family: sans-serif;font-weight: bold;text-transform: uppercase;text-align: center;padding:10px;background:#E6E6D7;border:1px solid black;">O livro "O Tigre Branco", de
<span style="color:chocolate;font-weight: bolder;"><br>ARAVIND ADIGA</span>   é, muito bom
</div>
</DIV>

3. Foto enquadrada, com legenda e com links

O livro de Aravind Adiga, O Tigre Branco, é muito bom.

código:


<DIV align="center"> 
<DIV style="width:300px;height:400px;padding-left:15px;padding-right:15px;padding-bottom:60px;padding-top:15px;background:white;border:1px solid black;text-align:center;"><img style="border:1px solid black;"  src="http://www.profelectro.info/Uploads/luisj/oTigreBranco.jpg" width="225" height="363"> 

<br><small> 
O livro de <a href="http://en.wikipedia.org/wiki/Aravind_Adiga" target="_blank">Aravind Adiga</a>&nbsp; <a href="http://www.aravindadiga.com/" target="_blank">O Tigre Branco</a>&nbsp;é muito bom
</small>
</DIV> 
</DIV>

Enjoy!
NB: Esta dica foi retirada e adaptada de Mandarin Design. THKS!