| Home | Importante! | História | Tutorial | HTML | Glossário | Faqs | Buscadores | Sinapse |
| Fóruns | ASCII | Cores | JavaScript | CSS | Links | Novidades | Browsers | Conclusão |
Iniciando...Observe o quadro acima. Ele possui uma relação de 3 links (Hotmail, Tutopia e Internet Grátis) que estão se alternando. Se você clicar sobre ele, ele abrirá o endereço apresentado no momento do clique.
Pois bem, insira o parâmetro a seguir dentro de body.
onload="if (document.all||document.layers) {regenerate2();update()}"
Depois copie a sintaxe javascript abaixo em seu código-fonte onde você quer que ela apareça.
Sintaxe javascript:
<style>
<!--
#mensagem{
position:relative;
layer-background-color:black;
width:150;
height:12;
}
#submensagem{
background-color:black;
position:absolute;
border: 3px solid #008000;
width:150;
height:12;
}
.submensagemfont{
font:bold 12px Verdana;
text-decoration:none;
color:white;
}
.submensagemfont a{
top:0;
color:#00bfff;
text-decoration:none;
}
-->
</style>
<div id="mensagem">
<div id="submensagem" class="submensagemfont">Iniciando...</div>
</div>
<script language="JavaScript1.2">
var speed=4500
var textos=new Array()
textos[0]="<center><a href='http://www.hotmail.com'>Hotmail</a></center>"
textos[1]="<center><a href='http://www.tutopia.com.br'>Tutopia</a></center>"
textos[2]="<center><a href='http://www.ig.com.br'>Internet Gratis</a></center>"
i=0
if (document.all)
tickerobject=document.all.submensagem.style
else
tickerobject=document.mensagem.document
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",450)
}
function update(){
BgFade(0xff,0xff,0xff, 0x00,0x00,0x00,10);
if (document.layers){
document.mensagem.document.submensagem.document.write('<span class="submensagemfont">'+textos[i]+'</span>')
document.mensagem.document.submensagem.document.close()
}
else
document.all.submensagem.innerHTML=textos[i]
if (i<textos.length-1)
i++
else
i=0
setTimeout("update()",speed)
}
function BgFade(red1, grn1, blu1, red2,
grn2, blu2, steps) {
sred = red1; sgrn = grn1; sblu = blu1;
ered = red2; egrn = grn2; eblu = blu2;
inc = steps;
step = 0;
RunFader();
}
function RunFader() {
var epct = step/inc;
var spct = 1 - epct;
if (document.layers)
tickerobject.bgColor =
Math.floor(sred * spct + ered *
epct)*256*256 +
Math.floor(sgrn * spct + egrn * epct)*256 +
Math.floor(sblu * spct + eblu * epct);
else
tickerobject.backgroundColor=
Math.floor(sred * spct + ered *
epct)*256*256 +
Math.floor(sgrn * spct + egrn * epct)*256 +
Math.floor(sblu * spct + eblu * epct);
if ( step < inc ) {
setTimeout('RunFader()',50);
}
step++;
}
</script>
Para acrescentar mais links basta seguir a seqüência:
textos[3]="<center><a href='URL'>Nome</a></center>"
textos[4]="<center><a href='URL'>Nome</a></center>"
Para alterar a largura do quadro configure o segundo width:150;.
Para alterar a cor da letra configure o segundo color:#00bfff;. No exemplo acima ele está em azul = #00bfff.
Em border: 3px solid #008000; você configura a espessura e a cor da borda. No exemplo acima configurei a espessura com 3px e a cor verde (#008000).
Nos demais parâmetros, se não conhece Javascript, aconselho não mexer. Ao copiar o código fonte procure respeitar os espaços.
Ele é semelhante a um link, porém, ao invés que mudar a página ele apresenta um quadro com informações a respeito do objeto clicado. Este recurso é útil quando se tem um termo técnico desconhecido e o webmaster não deseja inserir a definição do termo no contexto da página. Então é criado um quadro explicativo com a definição inserida nele, deixando a critério do internauta clicar ou não no link. Exemplo: Clique no termo PETAR logo abaixo.
O PETAR é a principal província espeleológica de São Paulo, abriga cerca de 50% de todas as grutas conhecidas e cadastradas no Estado, é uma importante província paleontológica, arqueológica e geológica. Apesar das sucessivas investidas espéleo-exploratórias de diversos grupos do estado, ainda sabemos muito pouco sobre ele.
A sintaxe JavaScript abaixo deve ser inserida no cabeçalho, entre as tags <HEAD> e </HEAD>. A mensagem não deve ter quebra de linha.
<SCRIPT language=JavaScript>
<!--
function clique () {
alert (" mensagem ");
}
// -->
</SCRIPT>Depois envolva o termo que deverá conter o quadro explicativo com o seguinte parâmetro:
<A onmouseover="self.status='petar'; return true;" href="javascript:clique();">termo</A>
| Home | Importante! | História | Tutorial | HTML | Glossário | Faqs | Buscadores | Sinapse |
| Fóruns | ASCII | Cores | JavaScript | CSS | Links | Novidades | Browsers | Conclusão |