Ir para conteúdo

POWERED BY:

Arquivado

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

Antonella

Mudança de imagem

Por , em Javascript

Recommended Posts

William Bruno    1501

William Bruno
Postado

Desenvolvemos um parecido com o do Yahoo.

Dê uma olhada.. a idéia é sempre a mesma..

 

http://forum.imasters.com.br/index.php...t&p=1202784

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Sim.. basta colocar as imagens no lugar do texto.

<ul id="noticias">
		<li class="bloco">Noticia 1<img src="" alt="" /></li>
		<li>Noticia 2<img src="" alt="" /></li>
 ...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Antonella    0

Antonella
Postado

Sim.. basta colocar as imagens no lugar do texto.

<ul id="noticias">
		<li class="bloco">Noticia 1<img src="" alt="" /></li>
		<li>Noticia 2<img src="" alt="" /></li>
 ...

ola, fiz para puxar do banco de dados so que nao ta puxando. so puxa a primeira imagem

 

olha como estou fazendo:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">

<head>

<title>Versão 2.0 </title>

<script type="text/javascript">

// por William Bruno

// modificado por Aprendiz CSS

// http://forum.imasters.com.br/index.php?showtopic=324735

 

function muda(){

var el = document.getElementById("noticias").getElementsByTagName("li");

var proximo = 0;

var atual;

for( var i=0; i < el.length; i++ ) {

if( el.className == "bloco" ) {

atual = i;

el.className = "";

break;

}

}

proximo = atual + 1;

if(proximo > el.length-1) // condição para retornar à primeira notícia.

proximo = 0;

el[proximo].className = "bloco";

setTimeout("muda()", "2000");

}

 

window.onload=function(){

setTimeout("muda()", "2000");

var el = document.getElementById("noticias").getElementsByTagName("li");

var nav = document.getElementById("nav").getElementsByTagName("li");

 

for( var i=0; i < nav.length; i++ ) {

nav.onmouseover = function(){

this.style.backgroundColor = '#f0f'; // muda o bg ao passar o mouse

for( var i=0; i < el.length; i++ ) { // procura a notícia atual que está ativa

if( el.className == 'bloco' )

el.className = ''; // esconde ela para mostrar a que o mouse estiver por cima

}

 

var cont = this.getAttribute("id"); // não encontrei forma melhor =X

for( var i=0; i < el.length; i++ )

el[1].className = '';

 

el[cont].className = 'bloco'; // mostra a notícia atual, ao passar o mouse

 

}//fecha mouseOver

 

nav.onmouseout = function(){

this.style.backgroundColor = '#fff';

for( var i=0; i < el.length; i++ )

el.className = '';

 

var cont = this.getAttribute("id"); // não achei forma melhor para pegar parâmetro e fazer ligação entre lista e noticia

el[cont].className = 'bloco'; // mantém a notícia atual mesmo ao tirar o mouse

 

}//fecha mouseOut

 

}

}// carregando tudo no onLoad, não obstrutivo

</script>

</head>

<body>

<?php

$link = mysql_connect("localhost", "agitacam_portal", "123123");

mysql_select_db("agitacam_portal", $link);

$result = mysql_query("SELECT * FROM agenda order by data asc limit 0, 5", $link);

$linhas = mysql_num_rows($result);

?>

<div>

<ul><?php

while ($vetor=mysql_fetch_array($result)) { ?>

<li class="bloco"><img src="gera_pag.php?imagem=fotos/agenda/<?php echo $vetor[11] ?>" alt=""width="165" height="165" border="0" /></li>

<?php } ?>

</ul><!-- /noticias -->

</div>

</body>

</html>

eu quero que ele puxe do bd as ultimas 5 imagens e fica alterando

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Poste a estrutura da tabela.

 

Se bem, que o erro parece estar em: gera_pag.php?imagem=fotos/agenda/

Oq esse script ai faz ??

 

Se você jogar apenas a imagem.. sem passar por essa página, dá certo ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Antonella    0

Antonella
Postado

Poste a estrutura da tabela.

 

Se bem, que o erro parece estar em: gera_pag.php?imagem=fotos/agenda/

Oq esse script ai faz ??

 

Se você jogar apenas a imagem.. sem passar por essa página, dá certo ?

o gera_pag.php na verdade e para gerar miniatura, eu fiz agora sem ele, do jeito que ta, aparece as 3 imagens uma em baixo da outra, ao inves de ficar alterando.

 

codigo:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">

<head>

<title>Versão 2.0 </title>

<script type="text/javascript">

// por William Bruno

// modificado por Aprendiz CSS

// http://forum.imasters.com.br/index.php?showtopic=324735

 

function muda(){

var el = document.getElementById("noticias").getElementsByTagName("li");

var proximo = 0;

var atual;

for( var i=0; i < el.length; i++ ) {

if( el.className == "bloco" ) {

atual = i;

el.className = "";

break;

}

}

proximo = atual + 1;

if(proximo > el.length-1) // condição para retornar à primeira notícia.

proximo = 0;

el[proximo].className = "bloco";

setTimeout("muda()", "2000");

}

 

window.onload=function(){

setTimeout("muda()", "2000");

var el = document.getElementById("noticias").getElementsByTagName("li");

var nav = document.getElementById("nav").getElementsByTagName("li");

 

for( var i=0; i < nav.length; i++ ) {

nav.onmouseover = function(){

this.style.backgroundColor = '#f0f'; // muda o bg ao passar o mouse

for( var i=0; i < el.length; i++ ) { // procura a notícia atual que está ativa

if( el.className == 'bloco' )

el.className = ''; // esconde ela para mostrar a que o mouse estiver por cima

}

 

var cont = this.getAttribute("id"); // não encontrei forma melhor =X

for( var i=0; i < el.length; i++ )

el[1].className = '';

 

el[cont].className = 'bloco'; // mostra a notícia atual, ao passar o mouse

 

}//fecha mouseOver

 

nav.onmouseout = function(){

this.style.backgroundColor = '#fff';

for( var i=0; i < el.length; i++ )

el.className = '';

 

var cont = this.getAttribute("id"); // não achei forma melhor para pegar parâmetro e fazer ligação entre lista e noticia

el[cont].className = 'bloco'; // mantém a notícia atual mesmo ao tirar o mouse

 

}//fecha mouseOut

 

}

}// carregando tudo no onLoad, não obstrutivo

</script>

</head>

<body>

<?php

$link = mysql_connect("localhost", "agitacam_portal", "123123");

mysql_select_db("agitacam_portal", $link);

$result = mysql_query("SELECT * FROM agenda order by data asc limit 0, 3", $link);

$linhas = mysql_num_rows($result);

?>

<div>

<ul><?php

while ($vetor=mysql_fetch_array($result)) { ?>

<li class="bloco"><img src="imgs/agenda/<?php echo $vetor[11] ?>" alt=""width="165" height="165" border="0" /></li>

<?php } ?>

</ul><!-- /noticias -->

</div>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Antonella    0

Antonella
Postado

bd:

create table agenda (

id int(11) not null auto_increment,

nome varchar(255) default null,

local varchar(255) default null,

cidade varchar(255) default null,

estado varchar(255) default null,

dia varchar(255) default null,

mes varchar(255) default null,

ano varchar(255) default null,

data date default null,

destaque ENUM ('1','2') default null,

descricao varchar(6000) default null,

imagem varchar(255) default null,

PRIMARY KEY(id)

);

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Você não usou o CSS ne?!

Tava lá no tópico que postei tb..

<style type="text/css">
*{
	margin:0;
	padding:0;
	list-style: none;
}
body {
	margin: 200px;
}
#noticias {
	float: left;
}
#noticias li {
	display: none;
	height: 150px;
	width: 200px;
	background-color: #ff0;
	border: 1px ridge #f00;

}
#nav {
	border: 1px ridge #f00;
	width: 150px;
	float: left;
}
#nav li{
	height: 28px;
	border: 1px ridge #f00;
	text-align: center;
	line-height: 28px;
}

#noticias li.bloco {
	display: block;
}
</style>
E ai, você precisa informar isso na marcação tb:

<div id="quadro">
	<ul id="noticias">
<?php
	while ($vetor=mysql_fetch_array($result)) 
	{
		echo '<li class="bloco"><img src="figuras/'.$vetor[11].'" alt=""width="165" height="165" border="0" /></li>';
	}
?>
	</ul><!-- /noticias -->
</div>
Só arruma o teu diretório de imagens ai..

Se o script funcionava qndo eu postei em Javascript + CSS e xHTML, e parou de funcionar qndo você foi usar o banco de dados, existe um erro na "cópia do código", ou na implementação do server-side. O teu caso, foi esquecer o CSS :lol:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Antonella    0

Antonella
Postado

Você não usou o CSS ne?!

Tava lá no tópico que postei tb..

<style type="text/css">
*{
	margin:0;
	padding:0;
	list-style: none;
}
body {
	margin: 200px;
}
#noticias {
	float: left;
}
#noticias li {
	display: none;
	height: 150px;
	width: 200px;
	background-color: #ff0;
	border: 1px ridge #f00;

}
#nav {
	border: 1px ridge #f00;
	width: 150px;
	float: left;
}
#nav li{
	height: 28px;
	border: 1px ridge #f00;
	text-align: center;
	line-height: 28px;
}

#noticias li.bloco {
	display: block;
}
</style>
E ai, você precisa informar isso na marcação tb:

<div id="quadro">
	<ul id="noticias">
<?php
	while ($vetor=mysql_fetch_array($result)) 
	{
		echo '<li class="bloco"><img src="figuras/'.$vetor[11].'" alt=""width="165" height="165" border="0" /></li>';
	}
?>
	</ul><!-- /noticias -->
</div>
Só arruma o teu diretório de imagens ai..

Se o script funcionava qndo eu postei em Javascript + CSS e xHTML, e parou de funcionar qndo você foi usar o banco de dados, existe um erro na "cópia do código", ou na implementação do server-side. O teu caso, foi esquecer o CSS :lol:

ola, agora esta fazendo a mudança de imagem, o unico problema que esta acontecendo, e que quando abre a pagina ele aparece todos os cadastros e depois some, por exemplo, existem 3 cadastros ai aparece os 3 e depois some 2. Depois que some os 2 que começa a ficar alterando a imagem

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Exato.. por que não são todas as DIVs que devem começar com a classe bloco.

Veja que na marcação original, apenas uma que é a primeira, tem isso:

<ul id="noticias">
		<li class="bloco">Noticia 1</li>
		<li>Noticia 2</li>
		<li>Noticia 3</li>
		<li>Noticia 4</li>
		<li>Noticia 5</li>
	</ul><!-- /noticias -->
Consegue ajeitar ? ai vai ser usando php..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Antonella    0

Antonella
Postado

Exato.. por que não são todas as DIVs que devem começar com a classe bloco.

Veja que na marcação original, apenas uma que é a primeira, tem isso:

<ul id="noticias">
		<li class="bloco">Noticia 1</li>
		<li>Noticia 2</li>
		<li>Noticia 3</li>
		<li>Noticia 4</li>
		<li>Noticia 5</li>
	</ul><!-- /noticias -->
Consegue ajeitar ? ai vai ser usando php..

nao, mais gostaria que me explicasse para que eu tentasse

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Bom.. não tá nem um pouco elegante, mas resolve:

<div id="quadro">
	<ul id="noticias">
<?php
		$i = 1;
	while ($vetor=mysql_fetch_array($result)) 
	{
		if( $i == 1 )
			$class = ' class="bloco"';
		else 
			$class = '';		
		$i++;
		echo "\t\t".'<li'.$class.'><img src="figuras/'.$vetor[11].'" alt=""width="165" height="165" border="0" /></li>'."\n";
	}
?>
	</ul><!-- /noticias -->
</div><!-- /quadro -->

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