Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Romeu_A

[Resolvido] banner lateral

Por , em Javascript

Recommended Posts

Romeu_A    0

Romeu_A
Postado

Gostaria de um banner como este do site do terra da argentina chamado ofertas alguem pode me dar uma força não sei nem por onde começar

 

www.terra.com.ar/home/

 

ja tentei pegar da pagina para fazer as devidas alterações mas não consigo e não consigo fazer um novo pois ele vai da direita para a esquerda.

 

por favor alguem me ajude.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Romeu_A    0

Romeu_A
Postado

parece que é isto mesmo mas como baixo a biblioteca jQuery para testar?

 

Consegui testar mas tem um problema ele não é assim o conteudo vai para a esquerda e o conteudo oculto que aparece fica na direita alem disso quando você retira o mouse não volta veja np site do terra da argentina como é www.terra.com.ar/home

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Cara, a idéia do fórum não é vir e pedir códigos prontos.

 

Tente fazer, faça perguntas. Estude, aprenda.

 

Ninguém trabalha de graça.

Se quiser contratar um profissional para fazer para você, pode dar uma olhada em:

Empregos / Curriculos / Parcerias e Negocios

 

Qual é a sua dúvida ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Romeu_A    0

Romeu_A
Postado

Bem se não quer ajudar beleza, é só dar espaço que alguém ajuda, não precisa ficar nervoso.

Estou tentando fazer isso faz um tempo, mas ninguém entende o que eu quero, principalmente porque faz pouco tempo que achei no terra da argentina, o cliente viu quando estava no portal do terra Brasil, depois disso o terra tirou, e desde então tento fazer a tal banner.

Já fiz em flash, inclusive tem um site: Clique que tem ele pronto em flash mas o cliente não quer assim, tem também

http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_menu_slidehorizontal que tem ele da esquerda para a direita em java.

Inclusive estou analisando o seu código.

 

você usa display: none; para deixar oculto e position: absolute; para deixar fixo, você usa mouseover para a funcão e eu joguei mouseout para ele voltar, porem como fazer ele desaparecer e não ficar a direita do site? se você notar tanto no site w3schools quanto no do terra da argentina uma parte fica visível e depois se desloca.

 

Quanto ao profissional, se alguém que entende,(porque o banner tem que sair perfeito, por que não vai ficar somente abrindo e fechando, o próprio cliente vai alimentar os anúncios via banco de dados), fizer direito e não meter a faca na hora de cobrar, pela dor de cabeça que tenho para fazer esse banner, até pago, mas duvido que alguém queira pegar só um banner para fazer e ainda cobrar justo, eu tenho muito mais pra fazer já perco muito tempo com isso e agradeço qualquer ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Romeu_A    0

Romeu_A
Postado

Não consigo trocar ele de lado, esta na esquerda indo para direita, mas eu quero ele na direita indo para esquerda

Compartilhar este post

Link para o post
Compartilhar em outros sites

Romeu_A    0

Romeu_A
Postado

Consegui mudar de lado e fazer o movimento da direita para a esquerda, porem tenho outro problema como colocar o conteúdo da segunda coluna oculto se usar o display apago as duas e como fazer para ele fazer o efeito de aparecer e desaparecer como no site terra.com.ar

pode me dar uma luz ai vai o que consegui até agora

<html>
<head>
<style>
* {
        margin: 0; padding: 0;
}
body{
margin:0;
padding:0;
background:#ccc;
text-align:center; /* hack para o IE */	
font-family:arial;}
#tudo {
width: 976px;
margin:0 auto;			
padding: 10px;
text-align:left; /* "remédio" para o hack do IE */ }
#tudo a{color:black;text-decoration:none;font:bold}
#tudo a:hover{color:#606060}
#tudo td.menu{background:lightblue}

#topo {	
	height:100px;
	background-color:#9CC;
	}

#conteudo {
	background-color:#09F;
	width: 900px;
	float:left;
	}
		
#anuncio { background-color:#CCF; width:50px;
    float:right;
    }
#rodape {	
	clear:both;
	background-color:#b5daa2;
	height: 50px;
	}

table.nav
{
background:black;
position:relative;
font: bold 80% arial;
top:0px; 
width:0px;

}

</style>


<script type="text/javascript">
var i=-135;
var intHide;
var speed=2;
function showmenu()
{
clearInterval(intHide);
intShow=setInterval("show()",10);
}
function hidemenu()
{
clearInterval(intShow);
intHide=setInterval("hide()",10);
}
function hide()
{
if (i<-18)
	{
	i=i+speed;
	document.getElementById('myMenu').style.left=i;
	}
}
function show()
{
if (i>-50)
	{
	i=i-speed;
	document.getElementById('myMenu').style.left=i;
	}
}
</script>
</head>

<body>
<div id="tudo">
<div id="topo">
teste
</div>
<div id="conteudo">
teste
</div>
<div id="anuncio">
<table id="myMenu" class="nav" width="150" onMouseOver="showmenu()" onMouseOut="hidemenu()">
<td rowspan="7" align="center" bgcolor="#FF8080">
HOME<br />
<img src="1.JPG" width="50" height="50"><br />
<img src="2.jpg" width="50" height="50"><br />
<img src="3.jpg" width="50" height="50"><br />
<img src="4.gif" width="50" height="50"><br />
<img src="5.gif" width="50" height="50"><br />
<img src="6.gif" width="50" height="50"></td>
<td class="menu"><a href="#">HOME</a></td></tr>
<tr><td class="menu"><a href="#"><img src="1.JPG" width="50" height="50"></a></td></tr>
<tr><td class="menu"><a href="#"><img src="2.jpg" width="50" height="50"></a></td></tr>
<tr><td class="menu"><a href="#"><img src="3.jpg" width="50" height="50"></a></td></tr>
<tr><td class="menu"><a href="#"><img src="4.gif" width="50" height="50"></a></td></tr>
<tr><td class="menu"><a href="#"><img src="5.gif" width="50" height="50"></a></td></tr>
<tr><td class="menu"><a href="#"><img src="6.gif" width="50" height="50"></a></td></tr>
</table>
</div>
<div id="rodape">
teste
</div>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tentei fazer um bem simples aqui...

<html>
<head>
<style type="text/css">
#tudo {
	border: 1px solid #ccc;
	width: 800px;
	margin: 0 auto;
	min-height: 500px;
	position: relative;
}
#banner {
	top: 0;
	right: 0;
	position: absolute;
	width: 200px;
	height: 500px;
	background: #ff0;
	overflow: hidden;
	cursor: pointer;
}
#banner span {
	width: 15px;
	padding-right: 10px;
	position: absolute;
	left: 0;
	top: 0;
	height: 500px;
	background: #0ff;
}
#propagandas {
	position: absolute;
	right: 0;
	top: 0;
	width: 170px;
}
</style>
<script type="text/javascript">
window.onload = function()
{
	id('banner').style.width = '15px';
	id('propagandas').style.display = 'none';
	
	id('banner').onmouseover = function(){
		this.style.width = '200px';
		id('propagandas').style.display = 'block';
	};
	id('banner').onmouseout = function(){
		this.style.width = '15px';
		id('propagandas').style.display = 'none';
	};
};
function id( el ){
	return document.getElementById( el );
};
</script>
</head>

<body>
<div id="tudo">
	<h1>Conteudo do site</h1>
	
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent 
	eros diam, dignissim convallis molestie vitae, mollis ut lacus. Sed 
	dapibus euismod nulla, quis dictum velit hendrerit sit amet. Suspendisse
	et purus et velit pulvinar viverra eget ut lorem. Nulla aliquam orci a 
	turpis imperdiet nec</p>
	
	<div id="banner">
		<span id="mostra">P a s s e o M o u s e a q u  i e v e r á</span>
		<div id="propagandas">
			<p>Nulla et turpis ut sapien faucibus accumsan. Mauris pulvinar lacus nec
			diam egestas et blandit sem blandit. Sed id diam sed lectus ornare congue.
			Fusce iaculis tincidunt risus ultrices </p>
		</div><!-- /propagandas -->		
	</div><!-- /banner -->

</div><!-- /tudo -->
</body>
</html>
veja que usei 3 elementos.

um deles foi apenas para o conteudo do banner em si, assim consigo esconder só ele.

Acho que isso responde a tua dúvida sobre como deixar um elemento escondido... ne?!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Romeu_A    0

Romeu_A
Postado

[resolvido] é exatamente assim, parabéns, ficou pequeno e prático, muito bom, vou estudar bem ele, com este script e algumas adaptações consigo fazer o que o cliente quer. Muito obrigado pela aula.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito