Jump to content


Photo

"topoimagem" Randômica Em Fade..como?


  • Faça o login para participar
2 replies to this topic

#1 ciclop

ciclop

    Novato no fórum

  • Usuários
  • 3 posts
  • Sexo:Não informado

Posted 17/11/2005, 00:41

:D Boa noite dreamweaveristas! Pesquisei aqui no forum e não achei, queria muito colocar na minha pagina no topo (750x150) um desenho, e enquanto o internauta está na pagina, o topo (banner ou imagem randômica) queria que trocasse fazendo uma tranzição em fade com outra imagem do mesmo tamanho obviamente. Bem, eu uso FLASH tbm, mas não sei se fica pesado e não sei se nãe é melhor ter tipo uma pasta com 5 banners em JPG na raiz do site e alguma função em Java talvez faça a troca..sei lá..se alguém puder me auxiliar nisto, ficaria mutíssimo grato, valew ae.. (y)

#2 Fábio

Fábio

    = )

  • Usuários
  • 547 posts
  • Sexo:Masculino
  • Localidade:Rio de Janeiro - RJ
  • Interesses:Aprender e, na medida do possível, ensinar.

Posted 17/11/2005, 12:20

Ciclop, a seção Truques é para serem postados apenas Tutoriais e Dicas em gerais. Tópico movido para a seção adequada. (y)

------------------------------------------
Olha, com efeito fade eu não posso ajudá-lo, mas eu tenho um código bem legal que peguei na seção de HTML daqui do fórum mesmo...

Aqui está:

<script type="text/javascript">

// Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

var ultimateshow=new Array()

//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]

ultimateshow[0]=['pordosol_a.jpg', 'site.htm', '_self']
ultimateshow[1]=['pordosol2_a.jpg', 'site.htm', '_self']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth="50%" //set to width of LARGEST image in your slideshow
var slideheight="80%" //set to height of LARGEST iamge in your slideshow
var slidecycles="continous" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=2000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById
var curcycle=0

if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}

var currentslide=0

function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}

if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow

function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<left>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}

if (ie||dom)
window.onload=start_slider

          </script>


O destaque em negrito é a parte onde você muda o endereço das imagens. Para colocar mais imagens, basta adicionar mais uma linha, com cada nº correspondente. ;)

Quando não encontrar na seção Dreamweaver, vale a pena dar uma olhada na seção DHTML / JS / CSS.

[]'s (y) :)
Fábio Martinho
www.fabiomartinho.com
Participante da equipe de 11/11/2005 a 20/11/2007.

#3 ciclop

ciclop

    Novato no fórum

  • Usuários
  • 3 posts
  • Sexo:Não informado

Posted 17/11/2005, 21:55

Legal, :D obrigado..mas eu tenho uma duvida quanto a como centralizar o banner, pois ele é adicionadao automaticamente pelo script, mas como configurar isso, eu sei só fazer isso com tabelas, CSS..mas não consigo enxergar no script onde tem q fazer isso.... :wacko:




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq