Imagenes rotativas con boton de start y stop

En este código vamos a usar la etiqueta marque que nos va a dar el efecto a estas imagenes ,rotandolas una detrás de otra también añadiéndoles otros atributos que necesitamos,vamos a ponerle la opción de empezar y parar recuerden pueden modificarlas a sus gustos como la velocidad en la que van a ir pasando la altura etc.
este código lo van a poner en donde ustedes quieran que se muestre no necesitamos poner nada en el head.
aquí pueden ver otras opciones de la etiqueta marque ver aquí

Donde dice:  

<center><a href="AQUI VA LA URL DE ENLACE" target="_blank"><img src="AQUI VA LA URL DE LA IMAGEN" alt="AQUI VA TITULO O INFORMACION" style="position: relative;" border="0" /></a>
</center>

Si quieres mostrar mas imagenes simplemente añade este codigo:

<center><a href="AQUI VA LA URL DE ENLACE" target="_blank"><img src="AQUI VA LA URL DE LA IMAGEN" alt="AQUI VA TITULO O INFORMACION" style="position: relative;" border="0" /></a>
</center>

<center><marquee behavior="scroll" style="position: relative;" id="mymarquee" align="center" direction="up" scrollamount="2" scrolldelay="5" width="200" height="280"><br /> <!--- code for http://fasetube.blogspot.com/---><br /> <center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images1.jpg" alt="aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images2.jpg" alt="'aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images3.jpg" alt="aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images4.jpg" alt="aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images5.jpg" alt="'aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images6.jpg" alt="aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images7.jpg" alt="aqui va la informacion" style="position: relative;" border="0" /></a><br /> </center><center><a href="http://fasetube.blogspot.com/" target="_blank"><img src="http://dl.dropbox.com/u/25944020/images8.jpg" alt="aqui va la informacion" style="position: relative;" border="0" /></a></center><br /> <br /> <br /> </marquee><br /> <input onclick="document.getElementById('mymarquee').start ();" value="Start" type="button" /> <input onclick="document.getElementById('mymarquee').stop ();" value="Stop" type="button" /></center>

Ejemplo:

Read More

Translucente scroller con texto y enlaces

Hoy les voy a brindar un código muy utilizado en los sitio web los cuales ponen algún texto rotativo con sus enlaces esta translucente scroller es configurable yo les voy a guiar donde poner el texto la url,enlace color de fondo el ancho y la altura y la velocidad con la que va a ir rotando el texto.

Donde dice:

var scroller_width='190px' este es el ancho
var scroller_height='80px' esta es la altura
var bgcolor='#FFDEAD' este es el color de fondo si necesitan codígo de color pueden ir aquí
var pause=3000 esta es la velocidad con la que se muestra el texto (3000=3 segundos)


scrollercontent[0]='AQUI VA TEXTO <a href="AQUI VA LA URL">AQUI VA EL ENLACE DE LA URL </a>AQUI VA MAS TEXTO'

scrollercontent[1]='AQUI VA TEXTO <a href="AQUI VA LA URL">AQUI VA EL ENLACE DE LA URL </a>AQUI VA MAS TEXTO'

scrollercontent[2]='AQUI VA TEXTO <a href="AQUI VA LA URL">AQUI VA EL ENLACE DE LA URL </a>AQUI VA MAS TEXTO'

Si quieren añadir mas simplemente añaden lo que les muestro anteriormente lo unico donde dice: scrollercontent[2] donde esta el 2 lo cambian por el 3 despues el 4 y así sucesivamente.

<script language> var scroller_width='190px' var scroller_height='80px' var bgcolor='#FFDEAD' var pause=4000 //selecciona el tiempo de uno al otro (4000=4 segundos) var textcolor='#FFDEAD' var aling='center' var scrollercontent=new Array() scrollercontent[0]='todos los <a href="http://tubetrucos.com">codigos html javascript </a>todo gratis!' scrollercontent[1]='todos los <a href="http://tubetrucos.com/">trucos blogger y web</a> aquí vas a encontrar todo lo que necesitas para tu sitio web o blog.' scrollercontent[2]='Con este <a href="http://tubetrucos.com/">descodificador html</a>descodifica tu codigo html o codificalo.' //Para mas HTML scripts, visita http://tubetrucos.com/ //////NO necesitas editar despues de aquí////// var ie4=document.all var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1 if (ie4||dom) document.write('<div style="position:relative;width:'+scroller_width+';height:'+scroller_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>') else if (document.layers){ document.write('<ilayer id=tickernsmain visibility=hide width='+scroller_width+' height='+scroller_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+scroller_width+' height='+scroller_height+' left=2 top=2>'+scrollercontent[0]+'</layer></ilayer>') } var curpos=scroller_height*(1) var degree=10 var curcanvas="canvas0" var curindex=0 var nextindex=1 function moveslide(){ if (curpos>0){ curpos=Math.max(curpos-degree,0) tempobj.style.top=curpos+"px" } else{ clearInterval(dropslide) if (crossobj.filters) crossobj.filters.alpha.opacity=100 else if (crossobj.style.MozOpacity) crossobj.style.MozOpacity=1 nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1" tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) tempobj.innerHTML=scrollercontent[curindex] nextindex=(nextindex<scrollercontent.length-1)? nextindex+1 : 0 setTimeout("rotateslide()",pause) } } function rotateslide(){ if (ie4||dom){ resetit(curcanvas) crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.style.zIndex++ if (crossobj.filters) document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20 else if (crossobj.style.MozOpacity) document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2 var temp='setInterval("moveslide()",50)' dropslide=eval(temp) curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0" } else if (document.layers){ crossobj.document.write(scrollercontent[curindex]) crossobj.document.close() } curindex=(curindex<scrollercontent.length-1)? curindex+1 : 0 } function resetit(what){ curpos=parseInt(scroller_height)*(1) var crossobj=ie4? eval("document.all."+what) : document.getElementById(what) crossobj.style.top=curpos+"px" } function startit(){ crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub if (ie4||dom){ crossobj.innerHTML=scrollercontent[curindex] rotateslide() } else{ document.tickernsmain.visibility='show' curindex++ setInterval("rotateslide()",pause) } } if (ie4||dom||document.layers) window.onload=startit </script>

Read More