Webly

Internet + Humana

Ir para o Conteúdo
Ir para o Menu
Ir para a Busca
Ir para o Login

Assine:

Navegação

Janela com imagem ao passar o mouse

Tipo preview do templatemonster...

Escrito por Lucasbr em JavaScript e Ajax. Data: 30/09/2006

Ver tópico original no fórum.

Como funciona:

Normal

no mouseover

CODE

<head>
<STYLE TYPE="text/css">

</STYLE>

</head>
<body>
<DIV ID="dek"></DIV>
<script TYPE="text/javascript">

</SCRIPT>
<a href="http://www.uol.com.br" ONMOUSEOVER="popup('<img src=amostra.jpg>','orange')"; ONMOUSEOUT="kill()"><img src="Amostra.jpg" width="50" height="50"></a>
<a href="http://www.uol.com.br" ONMOUSEOVER="popup('<img src=amostra.jpg>','orange')"; ONMOUSEOUT="kill()"><img src="Amostra.jpg" width="50" height="50"></a>
<a href="http://www.uol.com.br" ONMOUSEOVER="popup('<img src=amostra.jpg>','orange')"; ONMOUSEOUT="kill()"><img src="Amostra.jpg" width="50" height="50"></a>
<a href="http://www.uol.com.br" ONMOUSEOVER="popup('<img src=amostra.jpg>','orange')"; ONMOUSEOUT="kill()"><img src="Amostra.jpg" width="50" height="50"></a>

</body>

Você gostou? Comente no fórum!

Comentários:

Henrique Ramos disse:

Eu tinha "traduzido" um exemplo desses na UVI. De qualquer forma, vou deixar o tuto aqui também.

CODE

Bom meus amigos, quem nunca cansou de ver fotos em sites que abrem em pop-up? Aqui está uma solução rapida, bonita e barata para resolver seu problema.



[b]
Benefícios do Script[/b]

Abre suas fotos com um bonito efeito, usando apenas layers sem nenhum pop-up.

[b]Como se usar:[/b]

   1. Incluir lightbox.js e o lightbox.css em seu header(<head></head>

[code]
<script type="text/javascript" src="lightbox.js"></script>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />

2. Adicionar o atributo rel=" lightbox " no tag <a> para ativar o lightbox. Por exemplo:

CODE

Customizando o Script:

1. Você pode customizar seu script para ficar parecido com o do exemplo que será mostrado, basta colocar isso em seu lightbox.css:

CODE

#lightbox{
    background-color:#eee;
    padding: 10px;
    border-bottom: 2px solid #666;
    border-right: 2px solid #666;
    }
#lightboxDetails{
    font-size: 0.8em;
    padding-top: 0.4em;
    }
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; }
#overlay img{ border: none; }

2. Para criar o efeito de sombra, você deve usar um .png e um .css extra.

CODE

#overlay{ background-image: url(overlay.png); }

* html #overlay{
    background-color: #000;
    back\ground-color: transparent;
    background-image: url(blank.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
    }

Se você gostaria de mostrar ao usuário um gráfico do "carregamento", como a barra animada de progresso no exemplos citado, basta adicionar esta linha ao seu lightbox.js.

CODE

var loadingImage = 'loading.gif';

Também gostaria de mostrar um botão X na imagem carregada no layer para o usuario utilizar? Adicione também ao lightbox.js o seguinte comando:

CODE

var closeButton = 'close.gif';

E pronto, seu script para fotos está completo.

Veja um exemplo online clicando aqui

Downloads dos arquivos usados:

QUOTE

Lightbox.js
Lightbox.css
Overlay.png
Loading.gif
Close.gif

Tutorial Original em Inglês

Espero que vocês gostem.

[/code]

Lucasbr disse:

bacana Magrinho!

dartanhan disse:

LucasBr, teria como tirar do mouse, o display da foto e colocar fixo dentro de um div, posicionado na tela, é exatamente isso que estou procurando, até conssegui fazer um mas não funciona no FF só no IE..eu já até tetei mudar seu script, mas as mudanças que eu faço a foto fica tremendo no FF quado tiro o evento do mouse document.onmousemove=get_mouse;