Telinha

maktub · Julho 9, 2006

Salve galera,

Estava procurando um tuto para produzir uma tela igual a do IG e a do Terra que fica rodando com as noticias, descobri que aquilo é actionscript do flash, mas não tem exemplos e tem que fazer na unha, bem achei um outro código bem legal parecido mas não é flash entrem nesse site: TELA ACTION MAS EM JAVA, o que quero fica abaixo do banner de 120x60 que tem um botão "próximo" que mostra as notícias, achei bem legal

Alguém sabe como faz aquilo, ou se tem algo parecido para baixar e adaptar?

grato

fercosmig · Julho 9, 2006

isto aí você faz com javascript...

uma div um array, usa o innerHTML

maktub · Julho 9, 2006

Putz boiei

conhece algum exemplo para que eu possa estudar?

abs

fercosmig · Julho 9, 2006

fiz um exemplo aí pra você dar uma olhada!

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--

.fora{
width: 300px;
height: 150px;
border: #000000 1px Solid;
padding: 10px;
}
.i_esq{
width: 135px;
height: 130px;
border: #000000 1px Solid;
float: left;
}
.i_dir{
width: 135px;
height: 130px;
border: #000000 1px Solid;
}

-->
</style>

<script language="JavaScript" type="text/javascript">
<!--
imagens = new Array();
textos = new Array();

imagens[0] = '<img src="004.jpg" width="135px" height="130px">';
imagens[1] = '<img src="001.jpg" width="135px" height="130px">';
imagens[2] = '<img src="barra.jpg" width="135px" height="130px">';
imagens[3] = '<img src="fcm.jpg" width="135px" height="130px">';

textos[0] = 'Fernando Costa Migliorini';
textos[1] = 'bla bla bla bla bla bla bla bla bla';
textos[2] = 'o rato roeu a roupa do rei de roma';
textos[3] = 'Italia Italy Italia Italy Italia Italy Italia Italy Italia Italy';

cont = 0;

function muda(){
    cont++;
   if (cont == 4){
       cont = 0;
   }
    document.getElementById('esq').innerHTML = imagens[cont];
    document.getElementById('dir').innerHTML = textos[cont];
}

//-->
</script>

</head>
<body>

<div align="center" class="fora">

<div id="esq" class="i_esq"><script> document.write(imagens[0]); </script></div>
<div id="dir" class="i_dir"><script> document.write(textos[0]); </script></div>
<a onclick="muda();" onmouseover="style.cursor= 'pointer';">Próximo</a>

</div>

</body>
</html>

maktub · Julho 9, 2006

Opa cara, legal esse teu exemplo hein, tem como randomizar ele? (infinitamente?), aproveitando achei um código bem legal, a dúvida agora é como eu faço que os layers randomizem auomaticamente? Por exemplo, ir do 1 para o 2 do 2 para o 3 e fazer o loop

segue o código:

index.asp

<html>
<link rel="stylesheet" type="text/css" href="tabcontent.css" />
<script type="text/javascript" src="tabcontent.js">
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Tab 1</title>
</head>

<body>
<ul id="maintab" class="shadetabs">
<li class=show><a href="#" rel="tcontent1">1</a></li>
<li><a href="#" rel="tcontent2">2</a></li>
<li><a href="#" rel="tcontent3">3</a></li>
<li><a href="#" rel="tcontent4">4</a></li>
<li><a href="http://www.dynamicdrive.com">5</a></li>
</ul>

<div class="tabcontentstyle" style="width: 181px; height: 159px">

<div class=show id="tcontent1" class="tabcontent">
Tab content 1 here<br/><a href="http://www.dynamicdrive.com">5</a><br/>
</div>

<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</form>
</div>

</div>

<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>
</p>
</body>

</html>

tabcontent.js

//** Tab Content script- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Last updated: June 29th, 06

var enabletabpersistence=1 //enable tab persistence via session only cookies, so selected tab is remembered?

////NO NEED TO EDIT BELOW////////////////////////
var tabcontentIDs=new Object()

function expandcontent(linkobj){
var ulid=linkobj.parentNode.parentNode.id //id of UL element
var ullist=document.getElementById(ulid).getElementsByTagName("li") //get list of LIs corresponding to the tab contents
for (var i=0; i<ullist.length; i++){
ullist[i].className=""  //deselect all tabs
if (typeof tabcontentIDs[ulid][i]!="undefined") //if tab content within this array index exists (exception: More tabs than there are tab contents)
document.getElementById(tabcontentIDs[ulid][i]).style.display="none" //hide all tab contents
}
linkobj.parentNode.className="selected"  //highlight currently clicked on tab
document.getElementById(linkobj.getAttribute("rel")).style.display="block" //expand corresponding tab content
saveselectedtabcontentid(ulid, linkobj.getAttribute("rel"))
}

function savetabcontentids(ulid, relattribute){// save ids of tab content divs
if (typeof tabcontentIDs[ulid]=="undefined") //if this array doesn't exist yet
tabcontentIDs[ulid]=new Array()
tabcontentIDs[ulid][tabcontentIDs[ulid].length]=relattribute
}

function saveselectedtabcontentid(ulid, selectedtabid){ //set id of clicked on tab as selected tab id & enter into cookie
if (enabletabpersistence==1) //if persistence feature turned on
setCookie(ulid, selectedtabid)
}

function getullistlinkbyId(ulid, tabcontentid){ //returns a tab link based on the ID of the associated tab content
var ullist=document.getElementById(ulid).getElementsByTagName("li")
for (var i=0; i<ullist.length; i++){
if (ullist[i].getElementsByTagName("a")[0].getAttribute("rel")==tabcontentid){
return ullist[i].getElementsByTagName("a")[0]
break
}
}
}

function initializetabcontent(){
for (var i=0; i<arguments.length; i++){ //loop through passed UL ids
if (enabletabpersistence==0 && getCookie(arguments[i])!="") //clean up cookie if persist=off
setCookie(arguments[i], "")
var clickedontab=getCookie(arguments[i]) //retrieve ID of last clicked on tab from cookie, if any
var ulobj=document.getElementById(arguments[i])
var ulist=ulobj.getElementsByTagName("li") //array containing the LI elements within UL
for (var x=0; x<ulist.length; x++){ //loop through each LI element
var ulistlink=ulist[x].getElementsByTagName("a")[0]
if (ulistlink.getAttribute("rel")){
savetabcontentids(arguments[i], ulistlink.getAttribute("rel")) //save id of each tab content as loop runs
ulistlink.onclick=function(){
expandcontent(this)
return false
}
if (ulist[x].className=="selected" && clickedontab=="") //if a tab is set to be selected by default
expandcontent(ulistlink) //auto load currenly selected tab content
}
} //end inner for loop
if (clickedontab!=""){ //if a tab has been previously clicked on per the cookie value
var culistlink=getullistlinkbyId(arguments[i], clickedontab)
if (typeof culistlink!="undefined") //if match found between tabcontent id and rel attribute value
expandcontent(culistlink) //auto load currenly selected tab content
else //else if no match found between tabcontent id and rel attribute value (cookie mis-association)
expandcontent(ulist[0].getElementsByTagName("a")[0]) //just auto load first tab instead
}
} //end outer for loop
}


function getCookie(Name){ 
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

function setCookie(name, value){
document.cookie = name+"="+value //cookie value is domain wide (path=/)
}

tabcontent.css

.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li.selected{
position: relative;
top: 1px;
}

.shadetabs li.selected a{ /*selected main tab style */
background-image: url(shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block!important;
}
}

Tu manja?

Entrar

Telinha

Pergunta

maktub

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

fercosmig

Link para o comentário

Compartilhar em outros sites

maktub

Link para o comentário

Compartilhar em outros sites

fercosmig

Link para o comentário

Compartilhar em outros sites

maktub

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades