Tutorial: Motor en javascript para cambiar imagenes al azar, (para direct links)

Saag10 Seguir

Gamma
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
2 Jul 2015
Mensajes
274
Hola, este es mi primer tutorial de programación, bueno, minitutorial.

Advierto que esto quizás no te pueda funcionar, ya que está hecho para mi uso personal pero igual te lo comparto por si pudieras encontrarle un uso práctico.

El motor lo hice para una de mis web y poder mostrar mis propios anuncios con direct link, porque tengo 2 sitios XXX y los anuncios banner me dejaban muy pocas ganancias, por lo que me decidí hacer este motorcito para que me mostrara las imágenes que yo quisiera al azar con un link de redirect link para tener mejores ganancias sin usar redirección movil o intersitial.
Yo uso por ahora Ero-advertising y está masomenos las ganancias, no recomiendo para nada Exoclick, luego si pruebo otra empresa les aviso.

Esto es masomenos los principios que utilizan las empresas de anuncios para mostrarlos con un pequeño código sin que subas nada a tu hosting.

Bueno, avancemos a la parte buena. Para los que saben de programación, si les da un poco de tiempo corríjanme por si hago algo mal en el código o escribí de más como lo hice en el objeto engine.MotorRandom() ya que uso un for y regreso solo una matriz :witless: .

Este lo vamos a llamar engine.js y lo subirás en tu hosting.
Insertar CODE, HTML o PHP:
var engine = {
 	
	MotorRandom:
      //aqui no mover nada por que explota
        function(){
		var randomize = {};
		for(var i = 0; i <= this.pictures.length; i++){
		randomize [i] = Math.floor(Math.random() * (this.pictures.length)); 
		
		return randomize[0];
		}
		
	},
	//aquí cambiar las rutas de las imágenes 
	pictures: [
	"uno.gif",
	"engine/dos.gif",
	"engine/tres.gif",
	"engine/cuatro.gif",
	"engine/cinco.gif",
	"engine/seis.gif",
	"engine/siete.gif",
	"engine/static.png",
	"engine/staticDos.png",
	"engine/staticTres.png",
	"engine/staticCuatro.png"
	],

	aplicarImagenes: 
	function(){
	//estos son las capas que usarás en tu documento, puedes agregar mas si lo deseas
	 document.getElementsByClassName('capaUno')[0].innerHTML = '<img src="'+this.pictures[this.MotorRandom()]+'" />';
	document.getElementsByClassName('capaDos')[0].innerHTML = '<img src="'+this.pictures[this.MotorRandom()]+'" />';
 	document.getElementsByClassName('capaTres')[0].innerHTML = '<img src="'+this.pictures[this.MotorRandom()]+'" />';
	document.getElementsByClassName('capaCuatro')[0].innerHTML = '<img src="'+this.pictures[this.MotorRandom()]+'" />';
	document.getElementsByClassName('capaCinco')[0].innerHTML = '<img src="'+this.pictures[this.MotorRandom()]+'" />';


	}

	// final de engine 
	};


	onload = engine.aplicarImagenes;

En el código estamos utilizando objetos y funciones. Entonces vayamos a la otra parte.

En mi caso, yo generé algunas imágenes GIF puedes agregar tantas como quieras, luego las subí en mi servidor y tan solo agregué html en mi documento, así:

HTML:
<a href="Aqui va el redirect link">
<div class="capaUno"></div>
<script type="text/javascript" src="Direccion donde tienes el engine.js"></script></a>

Y ya :witless: , puedes cambiarle el nombre a la clase para diferenciarlo y tener un poquito mas de control.
Ahora cada vez que actualices la página tendrás diferentes imágenes en el lugar que las pusiste.


Espero haber explicado con claridad, sino, déjame un comentario en el post. Saludos, ¡ojalá les guste y les funcione!.
 
Última edición:

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
939
Buen tutorial... pero hagamos mas sencillo asi lo manejan todos...

1- Creamos un div el cual mostrara nuestra publicidad
HTML:
<div id="mostrarADS"></div>

2- Creamos un archivo JS (publi.js) con esto:
HTML:
  	Imagen = new Array('http://www.rsc.org/images/011107_Leaderboard_728x90px_2_tcm18-201691.gif', 'http://comparegithosting.com/_media/ads728.png','http://playnstuff.com/wp-content/themes/StartWPA/images/728.png');
	
	//Obtenemos un valor al azar
	var X = Math.floor((Math.random() * Imagen.length));

  	document.getElementById("mostrarADS").innerHTML = '<a href="http://www.google.com.ar" target="_blank"><img src="'+ Imagen[X] +'" border="0"></a>';
(Cambiar google por la url de destino)...
Guardamos el archivo y lo llamamos antes del </body> de nuestro sitio de esta manera:
HTML:
<script type="text/javascript" src="/publi.js"></script>

Lo que se hace es crear un array con las imagenes y mostrar aleatoriamente uno!

Demo (desactivar adblock): Edit fiddle - JSFiddle
Ahora si buscamos mostrar a cada banner una url distinta: Edit fiddle - JSFiddle

PD: No te compliques con los tutoriales, porque dsp tendras que dar miles de explicaciones de como usarlo, mientras mas sencillo mejor! :) :encouragement:
 

Saag10

Gamma
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
2 Jul 2015
Mensajes
274
Buen tutorial... pero hagamos mas sencillo asi lo manejan todos...

1- Creamos un div el cual mostrara nuestra publicidad
HTML:
<div id="mostrarADS"></div>

2- Creamos un archivo JS (publi.js) con esto:
HTML:
  	Imagen = new Array('http://www.rsc.org/images/011107_Leaderboard_728x90px_2_tcm18-201691.gif', 'http://comparegithosting.com/_media/ads728.png','http://playnstuff.com/wp-content/themes/StartWPA/images/728.png');
	
	//Obtenemos un valor al azar
	var X = Math.floor((Math.random() * Imagen.length));

  	document.getElementById("mostrarADS").innerHTML = '<a rel="nofollow" href="http://www.google.com.ar" target="_blank"><img src="'+ Imagen[X] +'" border="0"></a>';
(Cambiar google por la url de destino)...
Guardamos el archivo y lo llamamos antes del </body> de nuestro sitio de esta manera:
HTML:
<script type="text/javascript" src="/publi.js"></script>

Lo que se hace es crear un array con las imagenes y mostrar aleatoriamente uno!

Demo (desactivar adblock): Edit fiddle - JSFiddle
Ahora si buscamos mostrar a cada banner una url distinta: Edit fiddle - JSFiddle

PD: No te compliques con los tutoriales, porque dsp tendras que dar miles de explicaciones de como usarlo, mientras mas sencillo mejor! :) :encouragement:

Vaya, veo que me hace falta demasiado por aprender, me gustó tu código, seguiré estudiando :encouragement: . Saludos.
 

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
939
Vaya, veo que me hace falta demasiado por aprender, me gustó tu código, seguiré estudiando :encouragement: . Saludos.

para nada, lo armaste bien al tutorial (armando las estructuras y demas de las funciones, eso denota la forma de programar tuya), pero hay muchos que no saben y para cada modificación tendrías que dar una explicación de como hacerlo, entonces se trata de hacer lo mas sencillo para que al menos pueda ser entendible por los demas!

Y de facil de aprender, el que quiere aprender como funciona se le hace mas facil entender un código simple y no salirle desde el inicio con estructuras de programacion y demas :encouragement::encouragement:
 

xdsebaxd

Dseda
Verificación en dos pasos desactivada
Desde
28 Oct 2011
Mensajes
1.009
El tutorial especificamente no me sirve, pero me copo mucho la actitud de apenas tener 2 msj y que uno de ellos sea un tutorial. Segui asi!!
 

Saag10

Gamma
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
2 Jul 2015
Mensajes
274
Gracias, tomaré en cuenta el consejo, se aprende algo nuevo cada día.

- - - Actualizado - - -

El tutorial especificamente no me sirve, pero me copo mucho la actitud de apenas tener 2 msj y que uno de ellos sea un tutorial. Segui asi!!

Yo aprendí muchas cosas del internet, me toca devolverle el favor :witless:
 

Andres128

Iota
Programador
Verificación en dos pasos activada
Desde
17 Feb 2012
Mensajes
2.391
Gracias por el tutorial :)

Yo en verdad soy malo con javascript pero ya le voy entendiendo mas :encouragement:

Gracias cicklow por el código resumido con array muy sencillo de entender :)
 

Saag10

Gamma
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
2 Jul 2015
Mensajes
274
Gracias por el tutorial :)

Yo en verdad soy malo con javascript pero ya le voy entendiendo mas :encouragement:

Gracias cicklow por el código resumido con array muy sencillo de entender :)

En librosweb yo aprendí muchas cosas, te lo recomiendo, saludos.
 

Juanix

Beta
Programador
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
7 Sep 2010
Mensajes
120
Concuerdo con [MENTION=9679]cicklow[/MENTION]

En cuanto a lo que escribiste, te dejare algunos fallos que note:

1:
usas:
Insertar CODE, HTML o PHP:
var randomize = {};
que es un objeto, pero en tu bucle lo usas como array:
Insertar CODE, HTML o PHP:
randomize [i]

No se si probaste tu codigo, esto parece como que no deberia funcionar, a menos que sea algun quirk o bug de javascript.

2:

Tu bucles es inecesario y ademas de eso, lo usas mal porque tienes
Insertar CODE, HTML o PHP:
return randomize[0];
dentro de este, lo que efectivamente hace que el buble corra una sola vez y ya, por esto mismo dije que es incesesario.

3:

El bucle hubiera estado mejor puesto en la funcion aplicarImagenes, algo asi como:

Insertar CODE, HTML o PHP:
for (var i = 1; i <= 5; i++)
    document.getElementsByClassName('capa_' + i)[0].innerHTML = '<img src="'+this.pictures[this.MotorRandom()]+'" />';

Salu2 :encouragement:
 

Saag10

Gamma
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
2 Jul 2015
Mensajes
274
Concuerdo con [MENTION=9679]cicklow[/MENTION]

En cuanto a lo que escribiste, te dejare algunos fallos que note:

1:
usas:
Insertar CODE, HTML o PHP:
var randomize = {};
que es un objeto, pero en tu bucle lo usas como array:
Insertar CODE, HTML o PHP:
randomize [i]

No se si probaste tu codigo, esto parece como que no deberia funcionar, a menos que sea algun quirk o bug de javascript.

2:

Tu bucles es inecesario y ademas de eso, lo usas mal porque tienes
Insertar CODE, HTML o PHP:
return randomize[0];
dentro de este, lo que efectivamente hace que el buble corra una sola vez y ya, por esto mismo dije que es incesesario.

3:

El bucle hubiera estado mejor puesto en la funcion aplicarImagenes, algo asi como:

Insertar CODE, HTML o PHP:
for (var i = 1; i <= 5; i++)
    document.getElementsByClassName('capa_' + i)[0].innerHTML = '<img src="'+this.pictures[this.MotorRandom()]+'" />';

Salu2 :encouragement:

Gracias hermano, s[i me di cuenta del error, ya aprendí algo nuevo :afro:
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba