VIDEO MOLDURA

a incorporação do video é width 380 e o height 225

<center><br /> <img height="330" id="Pic1" src="http://www.magazineluiza.com.br/imagens2/produto_grande/19/190364700.jpg" style="left: 0pt; position: relative; top: 290pt; z-index: 122;" width="420" /><center><br /> <br /> <center><br /> <object "height:="" 225px;="" 380px"="" style="left: 5pt; position: relative; top: 5pt; z-index: 122;"><p> COLOQUE AQUI O CÓDIGO DE INCORPORAÇÃO DO VIDEO </center></center></center>

Hello World!

Lightbox TopUp classes com iframe

Especificando uma predefinição TopUp é como especificar os atributos de estilo para um seletor de CSS na sua folha de estilo. A grande vantagem de usar presets é que ele fornece-lhe para manter o seu HTML todo (!) Limpo.

Basta ligar para TopUp.addPresets () com um hash como parâmetro.
A chave de cada entrada tem que ser um seletor CSS eo valor tem que ser um hash de toptions.

Assim, para ligações de agrupamento, apenas especificar grupo: [nome] na predefinição.

Open Google
Open Google
Open Google

<br /> <script src="http://gettopup.com/releases/latest/top_up-min.js" type="text/javascript"> </script><br /> <div id="examples"><script src="http://gettopup.com/releases/latest/top_up-min.js" type="text/javascript"> </script><br /> <a class="tu_iframe_800x600" href="COLOQUE AQUI O ENDEREÇO DA IMAGEM TAMANHO GRANDE " title="COLOQUE AQUI O TEXTO " width="120"> <img height="83" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJygYJNby9dMKw-k7RS2AoaLRc75NmjlbBxtefnyoQwfghfkQraVoomsmGd-XW6DAYHHNShNBcXFda23bxkXiL5wr1BJLuu7922AiQurCXCMtbjkn7Z-FfGNATDmRU3DWf0YmRFG-bA78/s1600/tigre-branco.jpg" title="COLOQUE AQUI O TEXTO " width="120" /><br /> </a><a class="tu_iframe_800x600" href="COLOQUE AQUI O ENDEREÇO DA IMAGEM TAMANHO GRANDE " title="COLOQUE AQUI O TEXTO " width="120">Open Google</a><br /> <a class="tu_iframe_800x600" href="COLOQUE AQUI O ENDEREÇO DA IMAGEM TAMANHO GRANDE " title="COLOQUE AQUI O TEXTO " width="120">Open Google</a><br /> <a class="tu_iframe_800x600" href="COLOQUE AQUI O ENDEREÇO DA IMAGEM TAMANHO GRANDE " title="COLOQUE AQUI O TEXTO " width="120">Open Google</a><br /> </div><script type="text/javascript"> TopUp.addPresets({ "#examples a": { title: "Gallery {alt} ({current} of {total})", group: "examples", readAltText: 1, shaded: 1 } }); </script><br /> <br />

LIGHTBOX IFRAME

Open Google
Open Google
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script><br /> <a href="COLOQUEAQUI O ENDEREÇO DA IMAGEM" class="tu_iframe_800x600">Open Google</a><br /> <a href="COLOQUEAQUI O ENDEREÇO DA IMAGEM" class="tu_iframe_800x600">Open Google</a><br />

Exibir Foto na Barra Rolante, Mostrar / Ocultar

Mostrar / Ocultar ▼▲

HTML Codes

<div class="divspoiler"><a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Mostrar / Ocultar ▼▲</a><br /> </div><div><div class="spoiler" style="display: none;"><!-- Codes by Quackit.com --><br /> <div style="height:221px;width:330px;overflow:scroll;"><img src="http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Milford Sound, New Zealand" /><br /> <img src="http://i516.photobucket.com/albums/u323/natural_pics/franz_josef_glacier2.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" /><br /> </div><p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/">HTML Codes</a></p></div></div><br /> <br /> <br />

exibir conteúdo Mostrar / Ocultar

Mostrar / Ocultar ▼▲

Aqui o conteúdo que queremos ocultar

<div class="divspoiler"><a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Mostrar / Ocultar ▼▲</a><br /> </div><div><div class="spoiler" style="display: none;">Aqui o conteúdo que queremos ocultar<br /> </div></div><br />

Slideshow

<script type="text/javascript" src="http://slideshow.triptracker.net/slide.js"></script><br /> <script type="text/javascript"> <!-- var viewer = new PhotoViewer(); viewer.add('COLOQUE AQUI O ENDEREÇO DA IMAGEM '); viewer.add('COLOQUE AQUI O ENDEREÇO DA IMAGEM '); viewer.add('COLOQUE AQUI O ENDEREÇO DA IMAGEM '); viewer.add('COLOQUE AQUI O ENDEREÇO DA IMAGEM '); //--></script><br /> <a href="javascript:void(viewer.show(0))">Slideshow</a><br />

trocar a imagem quando passamos o mouse sobre a foto

Existe um código para trocar a imagem quando passamos o mouse sobre ela, é um código simples e funciona perfeitamente, passe o mouse sobre nosso banner ao lado e veja que ele muda, o código para fazer isso é:
OBS:FOI COLOCADO A FOTO DO 1 VERDE EM CIMA,
MEIO E A 2, VERMELHA
DEBAIXO É A 3, VERMELHA

A DE BAIXO 3, QUE FICA AO ABRI O SITE



Existe um código para trocar a imagem quando passamos o mouse sobre ela, é um código simples e funciona perfeitamente, passe o mouse sobre nosso banner ao lado e veja que ele muda, o código para fazer isso é:<a href="COLOQUE AQUI O LINK DO SEU SITE "target="_blank" onMouseOver="document.images['myimage'].src='COLOQUE AQUI O ENDEREÇO DA IMAGEM';" onMouseOut="document.images['myimage'].src='COLOQUE AQUI O ENDEREÇO DA IMAGEM ';"><img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM " border="0" id="myimage"/></a><br />

Fundo estendido na página.

HTML e CSS: Colocando fundo estendido na página (como na área de trabalho)
Mostro aqui uma técnica simples que desenvolvi para simular um fundo na página web que se redimensiona conforme o tamanho da janela do navegador. Além disso ele fica fixo, como o efeito de "marca d'água".




<body style="margin: 0; overflow: hidden"><br /> <img src="fundo.jpg" style="position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%" /><br /> <div style="position: absolute; z-index: 1; width: 100%; height: 100%; overflow: auto"> <div style="margin: 10px"> Coloque o conteúdo da página aqui.<br /> </div> </div></body><br />