codigojavascript: outubro 2008

Efeito imagem aparecendo (esquerda para direita)

Um efeito desenvolvido em JavaScript, muito utilizado em banners de publicidade, que faz com que uma imagem ou texto vá abrindo (aparecendo) lentamente da esquerda para a direita como uma barra de carregamento.

Fabio Poletto Obs: Entre com a imagem o texto e o local onde deve ser exibido

<script language="JavaScript">
//this script may be used freely as long as the next 2 lines are left in
//this script made by Larry Chambers (a.k.a. Overtkill) from Overtkill's Playroom
//homepage http://overtkill.magas.net/
//modified by A1 javascripts - http://www.a1javascripts.com

<!--
counter = 0;

function slideIt()
{
if (document.all)
{ banner.style.clip = "rect(0," + counter + ",60,0)"; }
if (document.layers)
{ document.banner.clip.top = 0;
  document.banner.clip.right = counter;
  document.banner.clip.bottom = 60;
  document.banner.clip.left = 0; }
counter += 2;
time_out = setTimeout("slideIt()", 50);
if (counter >= 468)
{ clearTimeout(time_out); }
}
// -->
</script>


<body onload="slideIt()">


<div id="banner" style="position: absolute; top: 300; left:15%; clip:rect(0,0,0,0)">
<a href="http://www.codigofonte.com.br/membro/soartes /"><img src="http://www.codigofonte.com.br/img/logo.gif" border="0"></a></div><!-- -->

Efeito pisca-pisca em texto (letra a letra)

O código apresenta um função em JavaScript que vai alterando a cor em cada uma das letras da uma sentença. Recurso interessante para ser utilizado em propagandas e banners.

<script language="JavaScript1.2">

var msg = "JavaScript is nice!";
var colorTimer = null;
for (var i=0; i<msg.length; i++){
	document.write("<span id = \"vjeko" + i + "\" style = \"color:blue; font-size:xx-large;\">" + msg.charAt(i) + "</span>");
}
function toHex(n){
	var hexChars = "0123456789ABCDEF";
	if (n == 0) return n;
	var j, k;
	var temp = "";
	while (n != 0){
		j = n % 16;
		n = (n - j)/16;
		temp = hexChars.charAt(j) + temp;
	}
	return temp;
}
function colorize(){
if (!document.all) return;
for (i=0; i<msg.length; i++){
	k = Math.round(Math.random() * 16777215);
	k = toHex(k);
	while (k.length < 6){
		k = k + "0";
	}
document.all["vjeko" + i].style.color = '#' + k;
}
colorTimer = window.setTimeout("colorize()", 200);
}
</script>

<body onload="colorize()">

Linhas transversais acompanhando o cursor do mouse

Com este código (desenvolvido utilizando JavaScript com CSS) é possível criar duas linhas transversais que acompanha o cursor do mouse.
Este script pode ser utilizado como recurso de para deficientes visuais e também para marcação de pontos na tela para uma aplicação web, por exemplo.

<style>
<!--
#leftright, #topdown{
position:absolute;
left:0;
top:0;
width:1px;
height:1px;
layer-background-color:black;
background-color:#0080FF;
z-index:100;
font-size:1px;
}
-->
</style>

<div id="leftright" style="width:expression(document.body.clientWidth-2)"></div><div id="topdown" style="height:expression(document.body.clientHeight-2)"></div><!-- -->
<script language="JavaScript1.2">
<!--

/*
Document crosshair Script- 
By Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more free DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

if (document.all&&!window.print){
leftright.style.width=document.body.clientWidth-2
topdown.style.height=document.body.clientHeight-2
}
else if (document.layers){
document.leftright.clip.width=window.innerWidth
document.leftright.clip.height=1
document.topdown.clip.width=1
document.topdown.clip.height=window.innerHeight
}

function followmouse1(){
//move cross engine for IE 4+
leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
topdown.style.pixelTop=document.body.scrollTop
if (event.clientX<document.body.clientWidth-2)
topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
else
topdown.style.pixelLeft=document.body.clientWidth-2
}

function followmouse2(e){
//move cross engine for NS 4+
document.leftright.top=e.y+1
document.topdown.top=pageYOffset
document.topdown.left=e.x+1
}

if (document.all)
document.onmousemove=followmouse1
else if (document.layers){
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=followmouse2
}

function regenerate(){
window.location.reload()
}
function regenerate2(){
setTimeout("window.onresize=regenerate",400)
}
if ((document.all&&!window.print)||document.layers)
//if the user is using IE 4 or NS 4, both NOT IE 5+
window.onload=regenerate2

//-->

</script>

Tooltip em forma de Letreiro

Com este código é possível criar um ToolTip (também conhecido como Hint) com efeito de Letreiro (Marquee).
Este Script é de fácil implementação e customização para qualquer tipo de site na internet.

<!----------começa aqui------->
<SCRIPT language=JavaScript>
<!-- 
function showtip2(current,e,text){
  if (document.all&&document.readyState=="complete"){
    document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'
    document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
    document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
    document.all.tooltip2.style.visibility="visible"
}
  else if (document.layers){
    document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
    document.tooltip2.document.nstip.document.close()
    document.tooltip2.document.nstip.left=0
    currentscroll=setInterval("scrolltip()",100)
    document.tooltip2.left=e.pageX+10
    document.tooltip2.top=e.pageY+10
    document.tooltip2.visibility="show"
}
}
function hidetip2(){
  if (document.all)
    document.all.tooltip2.style.visibility="hidden"
    else if (document.layers){
    clearInterval(currentscroll)
    document.tooltip2.visibility="hidden"
}
}
//  -->
</SCRIPT>

<DIV id=tooltip2 style="Z-INDEX: 10; VISIBILITY: hidden; WIDTH: 223; CLIP: rect(0px 150px 50px 0px); POSITION: absolute; BACKGROUND-COLOR: #3366cc; left:10; top:63; height:19"></DIV>
<DIV onmouseover="showtip2(this,event,'Codigo fonte o melhor conteudo para programadores');" style="CURSOR: hand" onmouseout=hidetip2(); align=center name="divTest">
<TABLE cellSpacing=0 cellPadding=0 border=0>
  <TBODY>
  <TR>
    <TD colSpan=7><IMG src="http://www.codigofonte.com.br/img/logo.gif" border=0></TD>
  </TR>
  </TBODY>
</TABLE>
</DIV>
<!----------termina aqui------->

Imagem giratória em torno do botão

Este código apresenta um efeito muito interessante. Ao clicar em um botão uma imagem gira 360 graus em torno do botão.
Este tipo de efeito pode ser utilizado de diversas formas dentro de uma página web, como em peças publicitárias, por exemplo.

<html>
<head>
<title>Imagem giratória</title>
<script language="JavaScript">
var timeout = null
var funcao = null

function init() {
	if(funcao=='1'||funcao==null) sobe()
	else if(funcao=='2') desce()
	else if(funcao=='3') frente()
	else if(funcao=='4') tras()
}

function sobe(){
	funcao = 1
	tempo = setTimeout("sobe()", 1)
	timeout = 1
	var divi = div.style
	var action = -5
	divi.xpos = parseInt(divi.top)
	if(divi.xpos==80){
		clearTimeout(tempo)
		frente()
	}
	divi.xpos += action
	divi.top = divi.xpos
}

function desce(){
	funcao = 2
	time = setTimeout("desce()", 1)
	timeout = 2
	var divo = div.style
	var action = 5
	divo.ypos = parseInt(divo.top)
	if(divo.ypos==350){
		clearTimeout(time)
		tras()
	}
	divo.ypos += action
	divo.top = divo.ypos
}


function frente(){
	funcao = 3
	terceiro = setTimeout("frente()", 1)
	timeout = 3
	var divs = div.style
	var action = 5
	divs.zpos = parseInt(divs.left)
	if(divs.zpos==600){
		clearTimeout(terceiro)
		desce()
	}
	divs.zpos += action
	divs.left = divs.zpos
}

function tras(){
	funcao = 4
	quarto = setTimeout("tras()", 1)
	timeout = 4
	var divx = div.style
	var action = -5
	divx.cpos = parseInt(divx.left)
	if(divx.cpos==180){
		clearTimeout(quarto)
		sobe()
	}
	divx.cpos += action
	divx.left = divx.cpos
}
</script>
</head>
<body bgcolor=#FFFFFF>

<div id="div" style="top: 350; left: 100; position: absolute"><img src="http://www.codigofonte.com.br/img/logo.gif"></div>

<div style="top: 200; left: 450; position: absolute">
	<input type=button name=comeca onclick="init(); this.style.visibility='hidden'; stop.style.visibility='visible'; this.value='Reiniciar'" value="Iniciar" style="width:100px; visibility: visible; position: absolute; top:0; left:0"><br><input name=stop type=button value="Parar" onclick="if(timeout=='1') { clearTimeout(tempo) } else if(timeout=='2') { clearTimeout(time) } else if(timeout=='3') { clearTimeout(terceiro) } else if(timeout=='4') { clearTimeout(quarto) }; comeca.style.visibility='visible'; this.style.visibility='hidden'" style="width:100px; visibility: hidden; position: absolute; top:0; left:0">
</div>

</body>
</html>

Efeito expansão de textos

Texto que se expande você pode colocar várias mensagens neste mesmo código ele vem até a frente da tela depois diminui até quase sumir e volta com o restante das mensagens que você optou por colocar.

<!---começa aqui------>
<font face=Verdana><b><SCRIPT LANGUAGE="JavaScript">
<!-- 
var speed = 100;
var cycledelay = 2000;
var maxsize = 28;

var x = 0;
var y = 0;
var themessage, size;
var esize = "</font>";

function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
   }
}
var themessage2 = new initArray(
"FABIO POLETTO !",
"OS MELHORES JAVASCRIPTS DA INTERNET !",
"fabio_ptto@hotmail.com !",
"ADD MEU MSN GALERA  !"
);
if(navigator.appName == "Netscape")
document.write('<layer id="wds"></layer><br>');
if (navigator.appVersion.indexOf("MSIE") != -1)
document.write('<span id="wds"></span><br>');
function upwords(){ 
themessage = themessage2[y];
if (x < maxsize) {
x++;
setTimeout("upwords()",speed);
}
else setTimeout("downwords()",cycledelay);

if(navigator.appName == "Netscape") {
size = "<font point-size='"+x+"pt'>"; 
document.wds.document.write(size+"<center>"+themessage+"</center>"+esize);
document.wds.document.close();
}
if (navigator.appVersion.indexOf("MSIE") != -1){
wds.innerHTML = "<center>"+themessage+"</center>";
wds.style.fontSize=x+'px'
   }
} 
function downwords(){
if (x > 1) {
x--;
setTimeout("downwords()",speed);
}
else {
setTimeout("upwords()",cycledelay);
y++;
if (y > themessage2.length - 1) y = 0;
}
if(navigator.appName == "Netscape") {
size = "<font point-size='"+x+"pt'>"; 
document.wds.document.write(size+"<center>"+themessage+"</center>"+esize);
document.wds.document.close();
}
if (navigator.appVersion.indexOf("MSIE") != -1){
wds.innerHTML = "<center>"+themessage+"</center>";
wds.style.fontSize=x+'px'
   }
}
setTimeout("upwords()",speed);
//  End -->
</script>
<!---termina aqui------>

Gerador de textos com sombras

Este scritp é um gerador automático de textos com efeito de sombra.
Você adiciona o texto a fonte (não obrigatório) e a cor (em inglês) e ele produz o texto com um efeito de sombra.

<body>
<head>

<!--------------------COMEÇA AQUI----------------------------->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function mketxt()
{
text=window.document.form1.textval.value;
font=window.document.form1.fontnme.value;
color=window.document.form1.col.value;
window.document.write("<font size='7' color='b3b3b3' style='position: relative; left: 15px;' face='" + font + "'><b>" + text + "</b></font><br><font size='7' color='" + color + "' style='position: relative; left: 0px; top: -45px;'face='" + font + "'><b>" + text + "</b></font><br>Pressione o botão voltar para editar novamente.");
}
//  -->
</script>
</HEAD>

<BODY>
<form name="form1">
<center>
<b>Fabio Poletto o melhor do javascript</b>
<p>
Texto: <input type="text" name="textval"><br>
Fonte: <input type="text" name="fontnme"><br>
Cor:(inglês) <input type="text" name="col"><p>
<input type="button" value="Criar texto!" onClick="mketxt()">
</center>
</form>
<!-------------------------TERMINA AQUI-------------------------------->

</body>
</html>

Texto movendo na diagonal

O texto fica em movimento diagonal sobre a página, como se fosse uma pop up, mas sem a opção de fechar.
Interessante para ser utilizado como propoganda ou até mesmo como um quadro de avisos no site.

<body>
<head>

<STYLE type="text/css">
div{position:absolute;left:9;top:9};
div big{font-family:sans-serif;font-size:13pt};
</STYLE>

<SCRIPT language="JavaScript">
<!--;
var nav=navigator.appName.substring(0,4);
var ver=parseInt(navigator.appVersion.substring(0,1));
var jsOK=(nav=="Nets" || nav=="Micr") && ver>3;
var xP,yP,xS,yS,xMax,yMax,stm,txt,tmx,zx,obrf;
if(jsOK) txt=(parent.location.href.search("_engl")>0)?"Tasks Solutions with":"SCRIPT?<BR><font color=GREEN> é";
xS=yS=stm=1;
function objRef(){
clearInterval(stm);
tmx=70;xP=yP=9;
if(document.all){zx=1;obrf=document.all['sl'].style}
else if(document.layers){zx=2;obrf=document.layers['sl']}
else if(document.getElementById){tmx=105;obrf=document.getElementById('sl').style};
xMax=(zx==1)?parent.document.body.clientWidth-242:window.innerWidth-97;
yMax=(zx==1)?parent.document.body.clientHeight-280:window.innerHeight-120;
if(zx==1 && xMax>413) xMax=413;
stm=setInterval("mvTxt()",tmx);
};
function mvTxt(){
obrf.top=yP+=yS;
obrf.left=xP+=xS;
if(xP>xMax || xP<8) xS=-xS;
if(yP>yMax || yP<8) yS=-yS;
};
//-->
</SCRIPT>

</HEAD>
<BODY bgcolor="#ffffff" text="#000000" onResize="if(jsOK)objRef()" onLoad="if(jsOK)objRef()">
<PRE>

</PRE>
<CENTER></CENTER>
<DIV id="sl"><TABLE border=0 width=60><TH><BIG>
<SCRIPT language="JavaScript">document.write(txt," Fabio Poletto<BR>");</SCRIPT>
</BIG></TH></TABLE></DIV>

</BODY>
</HTML>

Efeito em Texto com Tag Marquee

O código apresenta um texto que se movimenta de acordo com o mouse. O eeito é realizado através de algumas funções em JavaScript e da tag Marquee do HTML.

<body>

<!--------------------COMEÇA AQUI------------------------->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- 
var ostat = false;
function scrollstop() {
news.scrollAmount = 0;
ostat = true;
}
function scrollplay() {
news.scrollAmount = 5;
ostat = false;
}
function scrolldir() {
mid = screen.width / 2;
mouse = event.x;
if(mouse > mid) {
if(ostat == false) {
speed = (mouse - mid) / 25;
news.scrollAmount = speed;
}
news.direction = "right";
}
else {
if(ostat == false) {
speed = (mid - mouse) / 25;
news.scrollAmount = speed;
}
news.direction = "left";
   }
}
//   -->
</script>
</HEAD>
<BODY onMouseMove="scrolldir()">
<marquee name=news id=news behavior=scroll direction=left scrollamount=5 scrolldelay=1 hspace=0 vspace=0 onmouseover="scrollstop()" onmouseout="scrollplay()">
<font face=verdana size=3 color=#1e90ff><b>Fabio Poletto . . .O melhor do javascript!</b></font>
</marquee>
<br><br>
(Mova seu mouse para cima do marquee para ver o efeito.)
<!--------------------TERMINA AQUI------------------------->

</body>
</html>

Tela reluzindo ao carregar a página

Com este código a página fica reluzindo o fundo durante o carregamento.
A implementação e customização deste script é bem fácil. Se você quer incrementar seu site com um efeito legal, não perca tempo.

<body>
<head>
<SCRIPT LANGUAGE="JavaScript">
// -->
</SCRIPT>
<B><FONT COLOR="BLACK"><FONT SIZE=6><CENTER>Neste efeito<BR>A tela fica reluzindo antes de carregar.<BR></FONT>
<script>
function initArray() {
  this.length = initArray.arguments.length
  for (var i = 0; i < this.length; i++)
    this[i+1] = initArray.arguments[i]
}

var hexChars = "0123456789ABCDEF";

function Dec2Hex (Dec) {
  var a = Dec % 16;
  var b = (Dec - a)/16;
  hex = "" + hexChars.charAt(b) + hexChars.charAt(a);
  return hex;
}

function bgChanger (begin, end, steps) {
  steps = steps -1 ;
  redA     = begin.charAt(0) + begin.charAt(1);
  red_valA = parseInt(redA,'16');
  redB     = end.charAt(0) + end.charAt(1);
  red_valB = parseInt(redB,'16');
  red_int  = ((red_valB - red_valA) / steps) * -1;
  grnA     = begin.charAt(2) + begin.charAt(3);
  grn_valA = parseInt(grnA,'16');
  grnB     = end.charAt(2) + end.charAt(3);
  grn_valB = parseInt(grnB,'16');
  grn_int  = ((grn_valB - grn_valA) / steps) * -1;
  bluA     = begin.charAt(4) + begin.charAt(5);
  blu_valA = parseInt(bluA,'16');
  bluB     = end.charAt(4) + end.charAt(5);
  blu_valB = parseInt(bluB,'16');
  blu_int  = ((blu_valB - blu_valA) / steps) * -1;
  step = 2;
  red = red_valA;
  grn = grn_valA;
  blu = blu_valA;
  document.bgColor = begin;

  while ( steps >= step ) {
    red -= red_int;
    red_round = Math.round(red);
    red_hex = Dec2Hex(red);
    grn -= grn_int;
    grn_round = Math.round(grn);
    grn_hex = Dec2Hex(grn);
    blu -= blu_int;
    blu_round = Math.round(blu);
    blu_hex = Dec2Hex(blu);
    document.bgColor = red_hex + grn_hex + blu_hex;
    step++;
  }
  document.bgColor = end;
}
</script>

<script>
<!-- 
// de preto pra preto (pausa)
  bgChanger("000000","000000",25);
// preto pra vermelho
  bgChanger("000000","FF0000",25);
// vermelho pra preto
  bgChanger("FF0000","000000",25);
// preto pra roxo
  bgChanger("000000","AA00EE",25);
// roxo pra preto
  bgChanger("AA00EE","000000",25);
// preto pra azul
  bgChanger("000000","0000FF",25);
// azul pra preto
  bgChanger("0000FF","000000",25);
// preto pra preto (pausa)
  bgChanger("000000","FFFFFF",25);
// -->
</script>
</body>
</html>

Textos com efeito de mudança de cor

Com este código desenvolvido em JavaScript é possível criar um efeito de mudança de cor (com FadeIn e FadeOut em textos contidos em um Array.

<body bgcolor=#3366cc>
<head>

<base="FRITEM">
<BODY onLoad='glow()'>



  <center>
  <table border="0" cellpadding="0" cellspacing="0" width="736" height="379">
    <tr>
  <td width="736" height="13" colspan="3">

<FONT FACE="Arial Black">
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--

var loop = true;    // LIGA DESLIGA
var xpos = "280";    // DISTANCIA DA MARGEN
var ypos = "3";    // DISTANCIA DO TOPO
var wide = "405";   // TAMANHO DA LINHA
var rate = "150";   // MUDAR A VELOCIDADE

var tnum = "1";
var t = new Array();  
t[1] = "......codigos......";
t[2] = "......é com......";
t[3] = "....fabio poletto.....";
t[4] = "......fabio_ptto@hotmail.com......";
t[5] = "......codigo fonte......";
t[6] = "......Membro Soartes......";


var cnum = "1";
var c = new Array();
c[1] = "gray";
c[2] = "gray";
c[3] = "silver";
c[4] = "whitesmoke";
c[5] = "white";
c[6] = "white";
c[7] = "white";
c[8] = "White";
c[9] = "whitesmoke";
c[10] = "silver";
c[11] = "gray";
c[12] = "black";

if(document.layers)document.write("<layer name='hi' Left='"+xpos+"' Top='"+ypos+"' Width='"+wide+"'></layer>");
if(document.all)document.write("<div id='hi' style='position:absolute;left:"+xpos+";top:"+ypos+";width:"+wide+"'>");

function glow()
{
	if(document.layers)
	{
		if(tnum < t.length)
		{
			if(cnum < c.length-1)
			{
				document.layers["hi"].document.write("<font size=2 color='"+c[cnum]+"'>"+t[tnum]+"</font>");
				document.layers["hi"].document.close();
				cnum++;
			}
			else
			{	
        cnum = 1;
			  tnum++;
        if(loop)
        {
          if(tnum == t.length) tnum = 1;
        }
			}
  		setTimeout("glow()",rate);
		}
    else
    {
      document.layers["hi"].document.write("");
	    document.layers["hi"].document.close();
    }
	}

  if(document.all)
	{
	  if(tnum < t.length)
		{
			if(cnum < c.length-1)
			{
				document.all("hi").innerHTML = "<font size=4 color='"+c[cnum]+"'>"+t[tnum]+"</font>";
				cnum ++;
			}	
			else
			{
			  cnum = 1;
        tnum ++;
        if(loop)
        {
          if(tnum == t.length) tnum = 1;
        }
			}
	    setTimeout("glow()",rate);
		}
    else document.all("hi").innerHTML = "";
	}
}
//-->
</SCRIPT>
</font></td>
    </tr>

</body>
</html>

Tooltip em formato de balão

Esta demonstração mostra como trabalhar com dicas em formato de balão semelhantes ao do Windows.
Baixe o arquivo em anexo para ver na prática este efeito.

tooltipbalao.zip
Arquivo ZIP
7 Kb
1258

function showToolTip(e,text){
	if(document.all)e = event;
	
	var obj = document.getElementById('bubble_tooltip');
	var obj2 = document.getElementById('bubble_tooltip_content');
	obj2.innerHTML = text;
	obj.style.display = 'block';
	var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
	if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; 
	var leftPos = e.clientX - 100;
	if(leftPos<0)leftPos = 0;
	obj.style.left = leftPos + 'px';
	obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';
}	

function hideToolTip()
{
	document.getElementById('bubble_tooltip').style.display = 'none';
	
}

Informações deslizantes para páginas com pouco espaço

Este código é versátil, pois pode ser utilizado de diversas formas, além de economizar muito espaço.
Pode ser utilizado como menu deslizante e também como chamada de notícias rolantes.
Muito fácil de customizar e personalizar, basta alterar código CSS.

<body>
<head>

<style type="text/css">
<!--
.minifonts {font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #000066}
.black {font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #000000}
.bodyfonts {font-family: Arial, Helvetica, sans-serif; font-size: 9pt}
.destaque {font-family: Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: bold; color: #FF9900}
a:hover {text-decoration: underline}
.branco {font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: bold; color: #FFFFFF}
-->
</style>


<script language="JavaScript1.2">
<!--
var largura=150
var altura=25
var bgcolor='white'
var fundo=''

var mensagens=new Array()
mensagens[0]="<center><font face='Arial' size=2><a href='banner.html'>FABIO POLETTO</a></font></center>"
mensagens[1]="<center><font face='Arial' size=2><a href='paginadois.html'>MEMBRO SOARTES.</a></font></center>"
mensagens[2]="<center><font face='Arial' size=2><a href='mailto:fabio_ptto@hotmail.com'>E-MAIL</a></font></center>"
mensagens[3]="<center><font face='Arial' size=2><a href='modelosdemenus.html'>O MELHOR</a></font></center>"


if (mensagens.length>1)
i=2
else
i=0

function mover1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("mover1(tlayer)",3000)
setTimeout("mover2(document.principal.document.segundo)",3000)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("mover1(tlayer)",100)
}
else{
tlayer.top=altura
tlayer.document.write(mensagens[i])
tlayer.document.close()
if (i==mensagens.length-1)
i=0
else
i++
}
}

function mover2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("mover2(tlayer2)",3000)
setTimeout("mover1(document.principal.document.primeiro)",3000)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("mover2(tlayer2)",100)
}
else{
tlayer2.top=altura
tlayer2.document.write(mensagens[i])
tlayer2.document.close()
if (i==mensagens.length-1)
i=0
else
i++
}
}

function mover3(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){
tdiv.style.pixelTop=0
setTimeout("mover3(tdiv)",3000)
setTimeout("mover4(segundo2)",3000)
return
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=5
setTimeout("mover3(tdiv)",100)
}
else{
tdiv.style.pixelTop=altura
tdiv.innerHTML=mensagens[i]
if (i==mensagens.length-1)
i=0
else
i++
}
}

function mover4(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){
tdiv2.style.pixelTop=0
setTimeout("mover4(tdiv2)",3000)
setTimeout("mover3(primeiro2)",3000)
return
}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=5
setTimeout("mover4(segundo2)",100)
}
else{
tdiv2.style.pixelTop=altura
tdiv2.innerHTML=mensagens[i]
if (i==mensagens.length-1)
i=0
else
i++
}
}

function iniciar(){
if (document.all){
mover3(primeiro2)
segundo2.style.top=altura
segundo2.style.visibility='visible'
}
else if (document.layers){
document.principal.visibility='show'
mover1(document.principal.document.primeiro)
document.principal.document.segundo.top=altura+5
document.principal.document.segundo.visibility='show'
}
}
//-->
</script>

<table width="150" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><ilayer id="principal" width=&{largura}; height=&{altura}; bgColor=&{bgcolor}; background=&{fundo}; visibility=hide>
<layer id="primeiro" left=0 top=1 width=&{largura};>
<script language="JavaScript1.2">
if (document.layers)
document.write(mensagens[0])
</script>
</layer>
<layer id="segundo" left=0 top=0 width=&{largura}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(mensagens[1])
</script>
</layer>
</ilayer>

<script language="JavaScript1.2">
<!--
if (document.all){
document.writeln('<span id="principal2" style="position:relative;width:'+largura+';height:'+altura+';overflow:hiden;background-color:'+bgcolor+' ;background-image:url('+fundo+')">')
document.writeln('<div style="position:absolute;width:'+largura+';height:'+altura+';clip:rect(0 '+largura+' '+altura+' 0);left:0;top:0">')
document.writeln('<div id="primeiro2" style="position:absolute;width:'+largura+';left:0;top:1;">')
document.write(mensagens[0])
document.writeln('</div>')
document.writeln('<div id="segundo2" style="position:absolute;width:'+largura+';left:0;top:0;visibility:hidden">')
document.write(mensagens[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')
}
iniciar()
//-->
</script>

</td>
</tr>
</table>
 
</body>
</html>

Texto com efeito elástico

Com este script, pequeno e prático é possível criar um efeito elástico em textos.
Para personalizar você pode alterar as variáveis:
- speed: Controla a velocidade do efeito
- msg: Texto que será utilizado para o efeito
- size: Tamanho da fonte
- color: Cores que o texto pode assumir

<script language="javascript">

//How fast the text will slide
var speed=50

//The Message
var msg="Codigo Fonte"

//The Text Size
var size="4"

//Don't Edit below this line - Except the colors.
var s="0"
var i="0"

function slide(){

var indent=new Array()
indent[1]="0pt"
indent[2]="5pt"
indent[3]="10pt"
indent[4]="15pt"
indent[5]="20pt"
indent[6]="25pt"
indent[7]="30pt"
indent[8]="25pt"
indent[9]="20pt"
indent[10]="15pt"
indent[11]="10pt"
indent[12]="5pt"
indent[13]="0pt"
indent[14]="-5pt"
indent[15]="0pt"
indent[16]="0pt"
indent[17]="0pt"
indent[18]="0pt"
indent[19]="0pt"
indent[20]="0pt"

i=(i==20)?1:++i
//You can Edit the colors
var color=new Array()
color[1]="blue"
color[2]="red"
color[3]="green"

//Don't Edit below this line
s=(s==3)?1:++s

var code="<font size=" + size + " color='" + color[s] + "'>" + msg + "</font>"

document.all.M1.style.letterSpacing=indent[i]
document.all.M1.innerHTML=code

setTimeout("slide()",speed)

}
window.onload=slide
</script>

<div id="M1"></div>

Efeito de estrelas luminosas no cursor do mouse

Script bastante interessante que reproduz um efeito de estrelas que ficam circundando o cursor do mouse.

Pode ser utilizado em várias situações e é bem fácil de personalizar.
Para alterar as cores das estrelas, por exemplo, basta alterar o array colours.

<!--Começo --->  
<script language="JavaScript"> 
<!--Scripts...http://www.cristinyonline.com.br--->
if (document.all){ 
//To add more stars simply add more colours in below array!! 
colours=new Array('ff0000','00ff00','3366ff','ff00ff','ffa500','ffffff','fff000') 
//Alter nothing below!! 
amount=colours.length; 
YgetDelay=0,XgetDelay=0,Ydelay=0,Xdelay=0,step=0.2,currStep=0,my=0,mx=0; 
document.write('<div id="ie" style="position:absolute;top:0;left:0;"><div style="position:relative">'); 
for (i=0; i < amount; i++) 
document.write('<div id="iestars" style="position:absolute;top:0px;left:0px;height:50px;width:50px;font-family:Courier New;font-size:5px;color:'+colours[i]+';padding-top:20px;text-align:center">.</div>'); 
document.write('</div></div>'); 
ini=1; 
gstep=1; 
function iMouse(){ 
my=event.y;mx=event.x; 
} 
document.onmousemove=iMouse 
function dim(){ 
ini-=gstep; 
dt=setTimeout('dim()',10); 
if (ini < 2){ 
clearTimeout(dt); 
glow(); 
} 
} 
function glow(){ 
ini+=gstep; 
gt=setTimeout('glow()',10); 
if (ini > 14){ 
clearTimeout(gt); 
dim(); 
} 
} 
function stars(){ 
ie.style.top=document.body.scrollTop; 
for (i=0; i < amount; i++) 
 { 
 var layer=iestars[i].style; 
 layer.filter='glow(color='+colours[i]+', strength='+ini+')'; 
 layer.top= Ydelay+100*Math.sin((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10); 
 layer.left=Xdelay+180*Math.cos((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10); 
 } 
currStep+=step; 
} 
function delay(){ 
Ydelay = YgetDelay+=(my-YgetDelay)*1/20; 
Xdelay = XgetDelay+=(mx-XgetDelay)*1/20; 
stars(); 
setTimeout('delay()',10); 
} 
delay(); 
glow(); 
} 
//--> 
</script>
<!--Fim --->

Load de Página em HTML e Java Script

Este código permite a você exibir uma mensagem durante o carregamento de sua página. Não é necessário saber php, .net, asp ou qualquer outra coisa, basta saber um pouco de HTML.

Este código funciona corretamente em Internet Explorer, Firefox e Opera (não testado em outros navegadores).

load.zip
Arquivo ZIP
43,3 Kb
72744

<!-- Por favor mantenha os créditos. -->
<!-- Tente não modificar o código pois -->
<!-- ele está assim por questões de compatibilidade. -->

<html>
  <head>
    <title>Mensagem durante Carregamento</title>
    <script>
    <!--
    //Criado por: Igor Ferreira Cemim
    //E-mail: i.cemim@yahoo.com.br
    //Site: http://www.igorcemim.php0h.com/
    function Carregado() {
      Carregando.style.display='none';
      Pagina.style.display='block';
    }
    -->
    </script>
  </head>
  <body OnLoad="Carregado()">
    <script>
      <!--
	document.write('<div id='Carregando'>')
        document.write('Carregando...')
	document.write('</div>')
	document.write('<div id='Pagina' style='display: none;'>')
      -->
    </script>

    SUA PÁGINA VAI AQUI.

    <script>
    <!--
    document.write('</div>')
    -->
    </script>
  </body>
</html>

Calda de cursor do mouse com texto

Código que faz com que seja exibido um texto na calda do cursor do mouse. Basta trocar o texto desejado diretamente no código.

<head>
<style>
.spanstyle {
	position:absolute;
	visibility:visible;
	top:-50px;
	font-size:10pt;
	font-family:Comic Sans MS;
      font-weight:bold;
	color:Red;
}
</style>
</head>
<body onLoad="makesnake()" style="width:100%;overflow-x:hidden;overflow-y:scroll">
<script>
var x,y
var step=12
var flag=0
var message="Escreva aqui o que tu quer! www.ailtonlinux.home.sapo.pt "
message=message.split("")
var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
	xpos[i]=-50
}

var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
	ypos[i]=-50
}

function handlerMM(e){
	x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
	y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
	flag=1
}
function makesnake() {
	if (flag==1 && document.all) {
    	for (i=message.length-1; i>=1; i--) {
   			xpos[i]=xpos[i-1]+step
			ypos[i]=ypos[i-1]
    	}
		xpos[0]=x+step
		ypos[0]=y
	
		for (i=0; i<message.length-1; i++) {
    		var thisspan = eval("span"+(i)+".style")
    		thisspan.posLeft=xpos[i]
			thisspan.posTop=ypos[i]
    	}
	}
	
	else if (flag==1 && document.layers) {
    	for (i=message.length-1; i>=1; i--) {
   			xpos[i]=xpos[i-1]+step
			ypos[i]=ypos[i-1]
    	}
		xpos[0]=x+step
		ypos[0]=y
	
		for (i=0; i<message.length-1; i++) {
    		var thisspan = eval("document.span"+i)
    		thisspan.left=xpos[i]
			thisspan.top=ypos[i]
    	}
	}
		var timer=setTimeout("makesnake()",30)
}
</script>

<script>
for (i=0;i<=message.length-1;i++) {
    document.write("<span id='span"+i+"' class='spanstyle'>")
	document.write(message[i])
    document.write("</span>")
}
if (document.layers){document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
</script>
</body>

Texto editável com JavaScript

Neste exemplo vamos fazer um título editável, ou seja, um título normal que, ao ser clicado se transforma em um campo de texto (INPUT) que ao perder o foco salva o novo valor e volta a ser um título novamente.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Texto editável com JavaScript</title>
  <style type="text/css">
    h1 { 
      font:normal 2.4em/1.6 georgia, "times new roman", "bitstream vera serif", times, serif;
      color:#900;
    }
  </style>
  <script type="text/javascript">
    window.onload = function(){
      function editTitle(){
        var title = document.getElementsByTagName('h1')[0];
        var span = title.firstChild;
        span.onmouseover = function(){
          this.title = 'Clique para editar o texto';
          this.style.background = '#f5f5f5';
        }
        span.onmouseout = function(){
          this.title = '';
          this.style.background = '';
        }
        span.onclick = function(){
          var textoAtual = this.firstChild.nodeValue;
          var input = '<input type="text" name="1" value="'+textoAtual+'">';
          this.innerHTML = input;
          var field = this.firstChild;
          this.onclick = null;
          this.onmouseover = null;
          field.focus();
          field.select();
          field.onblur = function(){
            this.parentNode.innerHTML = this.value;
            editTitle();
          }
        }
      }
      editTitle();
    }
  </script>
</head>
<body>
  <h1><span>Edite este título</span></h1>
</body>
</html>

Link com tooltip personalizado

Esse script faz com que quando você passe o mouse sobre o link, apareça uma breve descrição dele, numa janelinha ao lado mais conhecida como ToolTip.

Para editar o link,texto e cabeçalho encontre aonde diz ="Texto aqui,..."

<head>
<style>
#PCL {
		font-family: Verdana,Arial,Helvetica;
		font-style: none;
		font-weight: normal;
		text-decoration: none;
		font-size: 8pt;
}

#PTT {
		font-family: Verdana,Arial,Helvetica;
		font-size: 8pt;
}

#PST {
		font-family: Verdana,Arial,Helvetica;
		font-size: 8pt;
}
</style>
</head>
<body>
</body>
</html>
<div id="overDiv" style="position:absolute; visibility:hide; z-index:1;"></div>
<script language="JavaScript">
////////////////////////////////////////////////////////////////////////////////////
// CONFIGURATION
////////////////////////////////////////////////////////////////////////////////////

// Main background color (the large area)
// Usually a bright color (white, yellow etc)
	if (typeof fcolor == 'undefined') { var fcolor = "#CCCCFF";}
	
// Border color and color of caption
// Usually a dark color (black, brown etc)
	if (typeof backcolor == 'undefined') { var backcolor = "#333399";}
	
	
// Text color
// Usually a dark color
	if (typeof textcolor == 'undefined') { var textcolor = "#000000";}
	
// Color of the caption text
// Usually a bright color
	if (typeof capcolor == 'undefined') { var capcolor = "#FFFFFF";}
	
// Color of "Close" when using Sticky
// Usually a semi-bright color
	if (typeof closecolor == 'undefined') { var closecolor = "#9999FF";}
	
	
// Width of the popups in pixels
// 100-300 pixels is typical
	if (typeof width == 'undefined') { var width = "200";}
	
// How thick the border should be in pixels
// 1-3 pixels is typical
	if (typeof border == 'undefined') { var border = "1";}
	
	
// How many pixels to the right/left of the cursor to show the popup
// Values between 3 and 12 are best
	if (typeof offsetx == 'undefined') { var offsetx = 10;}
	
// How many pixels to the below the cursor to show the popup
// Values between 3 and 12 are best
	if (typeof offsety == 'undefined') { var offsety = 10;}
	
////////////////////////////////////////////////////////////////////////////////////
// END CONFIGURATION
////////////////////////////////////////////////////////////////////////////////////

ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

// Microsoft Stupidity Check.
if (ie4) {
	if (navigator.userAgent.indexOf('MSIE 5')>0) {
		ie5 = true;
	} else {
		ie5 = false; }
} else {
	ie5 = false;
}

var x = 0;
var y = 0;
var snow = 0;
var sw = 0;
var cnt = 0;
var dir = 1;
var tr = 1;
if ( (ns4) || (ie4) ) {
	if (ns4) over = document.overDiv;
	if (ie4) over = overDiv.style;
	document.onmousemove = mouseMove;
	if (ns4) document.captureEvents(Event.MOUSEMOVE);
}

// Public functions to be used on pages.

// Simple popup right
function drs(text) {
	dts(1,text);
}

// Caption popup right
function drc(text, title) {
	dtc(1,text,title);
}

// Sticky caption right
function src(text,title) {
	stc(1,text,title);
}

// Simple popup left
function dls(text) {
	dts(0,text);
}

// Caption popup left
function dlc(text, title) {
	dtc(0,text,title);
}

// Sticky caption left
function slc(text,title) {
	stc(0,text,title);
}

// Simple popup center
function dcs(text) {
	dts(2,text);
}

// Caption popup center
function dcc(text, title) {
	dtc(2,text,title);
}

// Sticky caption center
function scc(text,title) {
	stc(2,text,title);
}

// Clears popups if appropriate
function nd() {
	if ( cnt >= 1 ) { sw = 0; };
	if ( (ns4) || (ie4) ) {
		if ( sw == 0 ) {
			snow = 0;
			hideObject(over);
		} else {
			cnt++;
		}
	}
}

// Non public functions. These are called by other functions etc.

// Simple popup
function dts(d,text) {
	txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD><FONT FACE=\"Arial,Helvetica\" COLOR=\""+textcolor+"\" SIZE=\"-2\">"+text+"</FONT></TD></TR></TABLE></TD></TR></TABLE>";
	layerWrite(txt);
	dir = d;
	disp();
}

// Caption popup
function dtc(d,text, title) {
	txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><SPAN ID=\"PTT\"><B><FONT COLOR=\""+capcolor+"\">"+title+"</FONT></B></SPAN></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD><SPAN ID=\"PST\"><FONT COLOR=\""+textcolor+"\">"+text+"</FONT><SPAN></TD></TR></TABLE></TD></TR></TABLE>";
	layerWrite(txt);
	dir = d;
	disp();
}

// Sticky
function stc(d,text, title) {
	sw = 1;
	cnt = 0;
	txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><SPAN ID=\"PTT\"><B><FONT COLOR=\""+capcolor+"\">"+title+"</FONT></B></SPAN></TD><TD ALIGN=RIGHT><A HREF=\"/\" onMouseOver=\"cClick();\" ID=\"PCL\"><FONT COLOR=\""+closecolor+"\">Close</FONT></A></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD><SPAN ID=\"PST\"><FONT COLOR=\""+textcolor+"\">"+text+"</FONT><SPAN></TD></TR></TABLE></TD></TR></TABLE>";
	layerWrite(txt);
	dir = d;
	disp();
	snow = 0;
}

// Common calls
function disp() {
	if ( (ns4) || (ie4) ) {
		if (snow == 0) 	{
			if (dir == 2) { // Center
				moveTo(over,x+offsetx-(width/2),y+offsety);
			}
			if (dir == 1) { // Right
				moveTo(over,x+offsetx,y+offsety);
			}
			if (dir == 0) { // Left
				moveTo(over,x-offsetx-width,y+offsety);
			}
			showObject(over);
			snow = 1;
		}
	}
// Here you can make the text goto the statusbar.
}

// Moves the layer
function mouseMove(e) {
	if (ns4) {x=e.pageX; y=e.pageY;}
	if (ie4) {x=event.x; y=event.y;}
	if (ie5) {x=event.x+document.body.scrollLeft; y=event.y+document.body.scrollTop;}
	if (snow) {
		if (dir == 2) { // Center
			moveTo(over,x+offsetx-(width/2),y+offsety);
		}
		if (dir == 1) { // Right
			moveTo(over,x+offsetx,y+offsety);
		}
		if (dir == 0) { // Left
			moveTo(over,x-offsetx-width,y+offsety);
		}
	}
}

// The Close onMouseOver function for Sticky
function cClick() {
	hideObject(over);
	sw=0;
}

// Writes to a layer
function layerWrite(txt) {
        if (ns4) {
                var lyr = document.overDiv.document;
                lyr.write(txt);
                lyr.close();
        }
        else if (ie4) document.all["overDiv"].innerHTML = txt;
		if (tr) { trk(); }
}

// Make an object visible
function showObject(obj) {
        if (ns4) obj.visibility = "show";
        else if (ie4) obj.visibility = "visible";
}

// Hides an object
function hideObject(obj) {
        if (ns4) obj.visibility = "hide";
        else if (ie4) obj.visibility = "hidden";
}

// Move a layer
function moveTo(obj,xL,yL) {
        obj.left = xL;
        obj.top = yL;
}

function trk() {
	if ( (ns4) || (ie4) ) {
			nt=new Image(32,32); nt.src="http://www.nedstat.nl/cgi-bin/nedstat.gif?name=ol2t";
			bt=new Image(1,1); bt.src="http://www.bosrup.com/web/overlib/o2/tr.gif";
			refnd=new Image(1,1); refnd.src="http://www.nedstat.nl/cgi-bin/referstat.gif?name=ol2t&refer="+escape(top.document.referrer);
			
	}
	tr = 0;
}
</script>
<a href="url-aqui" onMouseOver="drc('TEXTO AQUI','CABEÇALHO AQUI'); return true;" onMouseOut="nd(); return true;">Seu texto do link aqui</a>

Criar caixa de texto com cantos arredondados

Este exemplo você aprenderá como fazer uma caixa de texto com os cantos arredondados.
Não esqueça de baixar o script para funcionar corretamente.

rounded_corners_lite.inc.js
Arquivo JS
24,5 Kb
893

border_script.html
Arquivo HTML
4,2 Kb
1016

<html>
<head>
<title>:: Caixa Arredondada com JavaScript ::</title>
<script type="text/JavaScript" src="rounded_corners_lite.inc.js"></script>
<style>

.myBox
{
    margin: 0 auto;
    border: 0px solid #ffffff;
    color: #ffffff;
    width: 60%;
    padding: 20px;
    text-align: left;
    background-color: #ff0000;
    border: 2px solid #ffffff;
}

html,body{
    height: 100%;
    text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
    background-image: url(grass.jpg);
}

</style>
<script type="text/JavaScript">

window.onload = function()
{
      /*
      Essa função em Javascript usaremos para definir
as configurações da borda arrendondada.
      */
      settings = {
          tl: { radius: 20 },
          tr: { radius: 20 },
          bl: { radius: 20 },
          br: { radius: 20 },
          antiAlias: true,
          autoPad: true,
          validTags: ["div"]
      }

      /*
      Usage:

      newCornersObj = new curvyCorners(settingsObj, classNameStr);
      newCornersObj = new curvyCorners(settingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]);
      */
      var myBoxObject = new curvyCorners(settings, "myBox");
      myBoxObject.applyCornersToAll();
}

</script>
</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" bgcolor="#000000">

    <br><br><br><br>

    <div class="myBox">
    <font face="verdana" size="1"><p align="justify">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi est, cursus sit amet, pellentesque et, ultricies a, ipsum. Nulla facilisi. Sed quis lacus. Aenean ut risus et lectus blandit gravida. Nam sed nunc. Aliquam non felis non diam aliquam gravida. Phasellus quis sem. Curabitur at velit. Vivamus libero velit, condimentum sit amet, tempus ut, aliquam sit amet, velit. Nunc hendrerit ante. Quisque egestas feugiat erat. Morbi tellus.
    <br /><br />
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus. Maecenas tristique augue vel enim. Duis blandit euismod pede. Pellentesque facilisis. Fusce dapibus sapien tristique massa. Nunc accumsan. Integer pretium risus et odio. Phasellus tincidunt rhoncus velit. Donec eu neque at massa mollis iaculis. Aliquam pellentesque auctor mi. Cras ante justo, ultricies quis, iaculis eu, tincidunt ac, velit. Etiam nunc erat, tincidunt sit amet, luctus quis, interdum a, nunc. Suspendisse elit.
    <br /><br />
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus. Maecenas tristique augue vel enim. Duis blandit euismod pede. Pellentesque facilisis. Fusce dapibus sapien tristique massa. Nunc accumsan. Integer pretium risus et odio. Phasellus tincidunt rhoncus velit. Donec eu neque at massa mollis iaculis. Aliquam pellentesque auctor mi. Cras ante justo, ultricies quis, iaculis eu, tincidunt ac, velit. Etiam nunc erat, tincidunt sit amet, luctus quis, interdum a, nunc. Suspendisse elit.
    </p></font>
    </div>

<p><br>
<br>
<br>
<font color="#FFFFFF">..: by Winters | </font>
<a target="_blank" href="http://www.universodownloads.110mb.com/princ.htm">
<font color="#FFFFFF">UniversoDownloads</font></a><font color="#FFFFFF"> :..<br>
<br>
</font><a target="_blank" href="http://www.codigofonte.com.br">
<font color="#FFFFFF">CódigoFonte</font></a><font color="#FFFFFF"><br>
<font style="font-size: 7pt">O melhor conteúdo para programadores.</font></font></p>

</body>
</html>

codigojavascript