Este tema está cerrado, no puede editar mensajes o enviar nuevas respuestas  [ 2 mensajes ] 
Javascript para rotar imágenes en el portal 
Autor Mensaje
Forero Habitual
Forero Habitual

Registrado: 02-25-2008, 11:34
Mensajes: 223
Nota Javascript para rotar imágenes en el portal
Hola,

Es mi primer tutorial así que no me castigueis mucho jeje.

Os voy a explicar como poner en el portal (ó por ej en el texto de la cabecera ó el pie), dos tipos de rotadores de imágenes.

SCRIPT ROTADOR DE IMÁGENES nº1

Con este script, las imágenes se rotan cada un tiempo determinado por nosotros.

El script es:

<script language="JavaScript1.1">

var specifyimage=new Array() //Your images

specifyimage[0] ="URL DE LA IMAGEN 0"

specifyimage[1] ="URL DE LA IMAGEN 1"

specifyimage[2] ="URL DE LA IMAGEN 2"

specifyimage[ultimo numero]= "URL DE LA IMAGEN ULTIMA

var delay=5000 //
//Counter for array
var count =1;
var cubeimage=new Array()
for (i=0;i<specifyimage.length;i++){
cubeimage[i]=new Image()
cubeimage[i].src=specifyimage[Math.floor(Math.random() * specifyimage.length)]
}

function movecube(){
if (window.createPopup)
cube.filters[0].apply()
document.images.cube.src=cubeimage[count].src;
if (window.createPopup)
cube.filters[0].play()
count++;
if (count==cubeimage.length)
count=0;
setTimeout("movecube()",delay)
}

window.onload=new Function("setTimeout('movecube()',delay)")
</script>
<img src="URL DE LA IMAGEN 0 " name="cube" border=0 style="filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')">



    La imagen 0 siempre será la primera que aparece en pantalla. Las siguientes imágenes se mostraran aleatoriamente.

    var delay=5000 …… Este número indica en milisegundos (5000 quiere decir 5 segs), el tiempo que permanece fija cada foto antes de rotar.




SCRIPT ROTADOR DE IMÁGENES nº2


Con este script, se rotan las imágenes cada vez que se actualiza la página.

<script language="javascript">
<!--
function VecImagenes()
{
n=0;

this[n++]='<URL DE LA IMAGEN 1>'

this[n++]='<URL DE LA IMAGEN 2>'

this[n++]='<URL DE LA IMAGEN ULTIMA>'

this.N=n;
}
var Imagenes=new VecImagenes();

src= Imagenes[Math.floor(Math.random() * Imagenes.N)];
document.write (src);
//-->


Si en lugar de rotar imágenes queremos rotar banners (ó imagen) con enlaces directos a una web, hay que cambiar los this[n++]= anteriores por los de la siguiente forma:

this[n++]='<a href="http://www.PAGINAWEB/"target="_blank"><img src=”URL DEL BANNER Ó IMAGEN ENLACE"border="0"about:_blank></a>'


Observaciones: Todo lo que está en rojo, se ha de cambiar por vuestros datos.

un saludo,

_________________
http://www.forobici.forogeneral.es

Imagen


08-14-2009, 23:17
Perfil
Forero Fijo
Forero Fijo
Avatar de Usuario

Registrado: 05-01-2008, 17:03
Mensajes: 688
Nota Re: [TUTORIAL] Javascripts para rotar imágenes en el portal
Muchas gracias, angliru, un tutorial muy interesante y útil.

Un comentario: creo que el código de la primera opción no es completamente correcto. En concreto:

Código:
for (i=0;i<specifyimage.length;i++){
cubeimage[i]=new Image()
cubeimage[i].src=specifyimage[Math.floor(Math.random() * specifyimage.length)]
}

esta parte del código no genera un array completo (con todas las imágenes especificadas) en orden aleatorio, como creo que se pretendía, sino más bien genera una lista de la misma longitud que puede tener imágenes repetidas y pueden faltar otras. No sé si era la intención, pero ese será el comportamiento.

Si se quiere una secuencia aleatoria (sin importar repeticiones y ausencias), entonces mejor poner el random() dentro de la función movecube. Y si se quiere una secuencia completa pero desordenada (todas las imágenes, sin ausencias ni repeticiones), que se repite regularmente en la misma sesión (carga de página), entonces mejor hacerlo donde está, pero corrigiendo este punto.

Por último, si se quiere una secuencia concreta, y siempre la misma, hay que quitar toda la parte de random(), en ambas opciones, y sustituirlo por una secuencia fija.

Después de estas posibles "mejoras" al código, ahora la pregunta: si quiero añadir esto en mi FORO, pero ni tengo ni quiero PORTAL, dónde sería el mejor sitio para hacerlo?

Por ejemplo, se me ocurre para rotar la imagen del foro, dónde se podría hacer? Y en qué otros sitios se podría añadir?

Y otra cosita: el código style="filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')", es válido en todos los navegadores, o sólo en MSIE? alguna versión específica?

Muchas gracias, de nuevo, por una gran idea y buena aportación!
Saludos,
-javiexin
http://exin.forogratis.es

_________________
http://www.exincastillos.es


08-15-2009, 0:57
Perfil
Mostrar mensajes previos:  Ordenar por  
Este tema está cerrado, no puede editar mensajes o enviar nuevas respuestas   [ 2 mensajes ] 

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 0 invitados


No puede abrir nuevos temas en este Foro
No puede responder a temas en este Foro
No puede editar sus mensajes en este Foro
No puede borrar sus mensajes en este Foro
No puede enviar adjuntos en este Foro

Saltar a:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.
Traducción al español por Huan Manwë para phpbb-es.com
phpBB SEO