Bloco de destaques igual do Yahoo

ZamoTy · Dezembro 29, 2008

Olá,

Estou querendo desenvolver um bloco na home de um site, parecido com o bloco de destaques da nova home page do Yahoo. Gostaria de saber se alguém conhece algum código pronto naquele estilo ou se alguém teria alguma idéia para criar algo daquele tipo.

Seriam quatro destaques, com 4 chamadas ao lado, ou em baixo (tipo botões) que quando clicados mudem a foto e o texto legenda.

Gostaria de fazer em php, talvez com ajax ou algo do tipo, mas não gostaria de fazê-lo em flash.

Obrigado pela atenção!

Wanderson Camargo · Janeiro 2, 2009

Os destaques geralmente são, na minha opinião, as últimas notícias. O que tu podes fazer é na página principal do teu site mostrar, digamos, as últimas 4 notícias.

Simples assim...

Feliz ano novo!

Añd®é™ · Janeiro 5, 2009

Eu sei o que você quer fazer, eu também quero por um na minha página inicial, mais não consigo achar um que bacana, até encontrei um, mais não funcionou legal.

Vou ta passar ele derrepente serve pra alguma coisa.

<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=125
var bgcolor='white'
var fundo=''

var mensagens=new Array()
mensagens[0]="<center><font face='Arial' size=2><a href='http://www.google.com.br/images?q=tbn:gcDhloWA8wsX3M::werleykrohling.com/blog/wp-content/uploads/2008/04/salsicha.jpg'>André</a></font></center>"
mensagens[1]="<center><font face='Arial' size=2><a href='http://tbn2.google.com/images?q=tbn:6LWOMzbyEnNDBM:http://inexo.com.br/~danton/fotos/cachorros/salsicha.jpg'>web designer</a></font></center>"
mensagens[2]="<center><font face='Arial' size=2><a href='mailto:finam007@yahoo.com.br'>E-MAIL</a></font></center>"
mensagens[3]="<center><font face='Arial' size=2><a href='http://tbn3.google.com/images?q=tbn:FeTXm7T04-CUaM:http://www.duvets-and-curtains-direct.co.uk/sitedata/191/Scoob-Doo%2520Hook.jpg'>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>

Sorte ae!!!

Entrar

Bloco de destaques igual do Yahoo

Pergunta

ZamoTy

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Wanderson Camargo

Link para o comentário

Compartilhar em outros sites

Añd®é™

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades