| 25 comentarios ]

Para los webmasters con mayor experiencia en la edición de sitios en PWGratis, un recurso muy personalizable y llamativo es un banner o presentación de imágenes.
Una opción sencilla es hacerlo a través de Javascript, que permite usar una serie de imágenes temporizadas y botones de selección, tal como se aprecia en la página principal del Portal.
A continuación está el código original, tal como se usa en nuestro sitio. Simplemente hay que reemplazar al final la dirección de cada una de las imágenes (con el formato: http://www.sitio.com/imagen_1.jpg), donde el texto aparece en rojo.

Ver código...




<script type="text/javascript">
//==================================================
function slide(src,link,text,target,attr) {
this.src = src;

this.link = link;

this.text = text;

this.target = target;

this.attr = attr;

if (document.images) {
this.image = new Image();
}

this.loaded = false;

//--------------------------------------------------
this.load = function() {

if (!document.images) { return; }

if (!this.loaded) {
this.image.src = this.src;
this.loaded = true;
}
}

//--------------------------------------------------
this.hotlink = function() {

var mywindow;

if (!this.link) return;

if (this.target) {

if (this.attr) {
mywindow = window.open(this.link, this.target, this.attr);

} else {
mywindow = window.open(this.link, this.target);
}

if (mywindow && mywindow.focus) mywindow.focus();

} else {
location.href = this.link;
}
}
}

//==================================================
// slideshow object
//==================================================
function slideshow( slideshowname ) {
this.name = slideshowname;

this.repeat = true;

this.prefetch = -1;

this.image;

this.textid;
this.textarea;

this.timeout = 7000;


this.slides = new Array();
this.current = 0;
this.timeoutid = 0;

//--------------------------------------------------
this.add_slide = function(slide) {

var i = this.slides.length;

if (this.prefetch == -1) {
slide.load();
}

this.slides[i] = slide;
}

//--------------------------------------------------
this.play = function(timeout) {
this.pause();

if (timeout) {
this.timeout = timeout;
}

if (typeof this.slides[ this.current ].timeout != 'undefined') {
timeout = this.slides[ this.current ].timeout;
} else {
timeout = this.timeout;
}

this.timeoutid = setTimeout( this.name + ".loop()", timeout);
}

//--------------------------------------------------
this.pause = function() {

if (this.timeoutid != 0) {

clearTimeout(this.timeoutid);
this.timeoutid = 0;

}
}

//--------------------------------------------------
this.update = function() {

if (! this.valid_image()) { return; }

if (typeof this.pre_update_hook == 'function') {
this.pre_update_hook();
}

var slide = this.slides[ this.current ];

var dofilter = false;
if (this.image &&
typeof this.image.filters != 'undefined' &&
typeof this.image.filters[0] != 'undefined') {

dofilter = true;

}

slide.load();

if (dofilter) {

if (slide.filter &&
this.image.style &&
this.image.style.filter) {

this.image.style.filter = slide.filter;

}
this.image.filters[0].Apply();
}

// Update the image.
this.image.src = slide.image.src;

if (dofilter) {
this.image.filters[0].Play();
}

this.display_text();

if (typeof this.post_update_hook == 'function') {
this.post_update_hook();
}

if (this.prefetch > 0) {

var next, prev, count;

next = this.current;
prev = this.current;
count = 0;
do {

if (++next >= this.slides.length) next = 0;
if (--prev < 0) prev = this.slides.length - 1;

// Preload the slide image
this.slides[next].load();
this.slides[prev].load();


} while (++count < this.prefetch);
}
}

//--------------------------------------------------
this.goto_slide = function(n) {

if (n == -1) {
n = this.slides.length - 1;
}

if (n < this.slides.length && n >= 0) {
this.current = n;
}

this.update();
}


//--------------------------------------------------
this.goto_random_slide = function(include_current) {
var i;

if (this.slides.length > 1) {

do {
i = Math.floor(Math.random()*this.slides.length);
} while (i == this.current);

// Display the slide
this.goto_slide(i);
}
}


//--------------------------------------------------
this.next = function() {
if (this.current < this.slides.length - 1) {
this.current++;
} else if (this.repeat) {
this.current = 0;
}

this.update();
}


//--------------------------------------------------
this.previous = function() {
if (this.current > 0) {
this.current--;
} else if (this.repeat) {
this.current = this.slides.length - 1;
}

this.update();
}


//--------------------------------------------------
this.shuffle = function() {

var i, i2, slides_copy, slides_randomized;

slides_copy = new Array();
for (i = 0; i < this.slides.length; i++) {
slides_copy[i] = this.slides[i];
}

slides_randomized = new Array();

do {

i = Math.floor(Math.random()*slides_copy.length);

slides_randomized[ slides_randomized.length ] =
slides_copy[i];

for (i2 = i + 1; i2 < slides_copy.length; i2++) {
slides_copy[i2 - 1] = slides_copy[i2];
}
slides_copy.length--;


} while (slides_copy.length);

this.slides = slides_randomized;
}


//--------------------------------------------------
this.get_text = function() {
// This method returns the text of the current slide

return(this.slides[ this.current ].text);
}


//--------------------------------------------------
this.get_all_text = function(before_slide, after_slide) {

all_text = "";

for (i=0; i < this.slides.length; i++) {

slide = this.slides[i];

if (slide.text) {
all_text += before_slide + slide.text + after_slide;
}

}

return(all_text);
}


//--------------------------------------------------
this.display_text = function(text) {
if (!text) {
text = this.slides[ this.current ].text;
}

if (this.textarea && typeof this.textarea.value != 'undefined') {
this.textarea.value = text;
}

if (this.textid) {

r = this.getElementById(this.textid);
if (!r) { return false; }
if (typeof r.innerHTML == 'undefined') { return false; }

// Update the text
r.innerHTML = text;
}
}


//--------------------------------------------------
this.hotlink = function() {

this.slides[ this.current ].hotlink();
}


//--------------------------------------------------
this.save_position = function(cookiename) {
if (!cookiename) {
cookiename = this.name + '_slideshow';
}

document.cookie = cookiename + '=' + this.current;
}


//--------------------------------------------------
this.restore_position = function(cookiename) {
if (!cookiename) {
cookiename = this.name + '_slideshow';
}

var search = cookiename + "=";

if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search);
// if cookie exists
if (offset != -1) {
offset += search.length;
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1) end = document.cookie.length;
this.current = parseInt(unescape(document.cookie.substring(offset, end)));
}
}
}


$html = "n";

// Loop through all the slides in the slideshow
for (i=0; i < this.slides.length; i++) {

slide = this.slides[i];

$html += '<P>';

if (slide.link) {
$html += '<a href="' + slide.link + '">';
}

$html += '<img src="' + slide.src + '" ALT="FINCA International">';

if (slide.link) {
$html += "</a>";
}

if (slide.text) {
$html += "<BR>n" + slide.text;
}

$html += "</P>" + "nn";
}

// Make the HTML browser-safe
$html = $html.replace(/&/g, "&" );
$html = $html.replace(/</g, "<" ); $html = $html.replace(/>/g, ">" );

return('<pre>' + $html + '</pre>');
}


//==================================================
// Private methods
//==================================================

//--------------------------------------------------
this.loop = function() {
if (this.current < this.slides.length - 1) {
next_slide = this.slides[this.current + 1];
if (next_slide.image.complete == null || next_slide.image.complete) {
this.next();
}
} else { // we're at the last slide
this.next();
}

// Keep playing the slideshow
this.play( );
}


//--------------------------------------------------
this.valid_image = function() {
// Returns 1 if a valid image has been set for the slideshow

if (!this.image)
{
return false;
}
else {
return true;
}
}

//--------------------------------------------------
this.getElementById = function(element_id) {

if (document.getElementById) {
return document.getElementById(element_id);
}
else if (document.all) {
return document.all[element_id];
}
else if (document.layers) {
return document.layers[element_id];
} else {
return undefined;
}
}


this.set_image = function(imageobject) {

if (!document.images)
return;
this.image = imageobject;
}

//--------------------------------------------------
this.set_textarea = function(textareaobject) {
this.textarea = textareaobject;
this.display_text();
}

//--------------------------------------------------
this.set_textid = function(textidstr) {

this.textid = textidstr;
this.display_text();
}
}
</script>

<SCRIPT type="text/javascript">
SLIDES = new slideshow("SLIDES");

s = new slide();
s.src = "IMAGEN_1";
s.text = "";
SLIDES.add_slide(s);

s = new slide();
s.src = "IMAGEN_2";
s.text = "";
SLIDES.add_slide(s);

s = new slide();
s.src = "IMAGEN_3";
s.text = "";
SLIDES.add_slide(s);

s = new slide();
s.src = "IMAGEN_4";
s.text = "";
SLIDES.add_slide(s);

s = new slide();
s.src = "IMAGEN_5";
s.text = "";
SLIDES.add_slide(s);

s = new slide();
s.src = "IMAGEN_6";
s.text = "";
SLIDES.add_slide(s);

</SCRIPT>

<img src="IMAGEN_1" name="SLIDESIMG" usemap="#SlideMap" height="304" width="590" border="0"><map name="SlideMap">  <area shape="rect" coords="247,235,274,249" href="javascript:SLIDES.goto_slide(5)" alt="Slide 6">  <area shape="rect" coords="216,235,243,250" href="javascript:SLIDES.goto_slide(4)" alt="Slide 5">  <area shape="rect" coords="185,235,212,250" href="javascript:SLIDES.goto_slide(3)" alt="Slide 4">  <area shape="rect" coords="153,235,180,250" href="javascript:SLIDES.goto_slide(2)" alt="Slide 3">  <area shape="rect" coords="122,235,149,250" href="javascript:SLIDES.goto_slide(1)" alt="Slide 2">  <area shape="rect" coords="90,235,117,249" href="javascript:SLIDES.goto_slide(0)" alt="Slide 1">  <area shape="rect" coords="3,3,586,218" href="/"></map><script type="text/javascript">if (document.images) {  SLIDES.image = document.images.SLIDESIMG;  SLIDES.textid = "SLIDESTEXT";  SLIDES.update();  SLIDES.play();}</script>


25 comentarios

Anónimo dijo... @ 28 de octubre de 2009, 15:58

sep, maso, mucho codigo :P

adriph dijo... @ 10 de noviembre de 2009, 12:29

Hola!
Me gusta mucho su web, y en especial esta aplicación. Intenté poner esta aplicación en mi web :S , pero no me funcionó.
Copié el código tal y como esta, y le cambié la imagen URL. Subí las imagenes a: tinypic.com No se si ese será el error.
Ojala me puedan ayudar.
Les agradesco,
-Adriana.

Anónimo dijo... @ 13 de noviembre de 2009, 22:39

Hola Adriana,
Visita Http://www.ieadec.es.tl/Iniciar.htm
de ahi despues de aber ingresado los datos. Buscas es link Llamado codejava.
das clic ahi y acontinuacion ara un tuto para que preguntes lo que kieras.
alguna duda: juancamenes@etb.net.co.
juancameneses11@hotmail.com.

Anónimo dijo... @ 27 de noviembre de 2009, 9:46

gracias por la ayuda a aquellos que somos principiantes...

Anónimo dijo... @ 13 de diciembre de 2009, 4:07

muchasss graciass por poner este codigo, ace un mes más o menos pregunte por el en la página y ara he venido para consultar alguna cosa y lo e vistoo muchas gracias!

Anónimo dijo... @ 23 de diciembre de 2009, 6:08

no funcionaaa

Anónimo dijo... @ 4 de enero de 2010, 8:19

hola hay algo que no entiendo como hago para poner los codigos , si lo te ngo que subir a tynipic por ejemplo , me tira tres datos , como cual tomo y como para hacer lo que decis aca , de cambiar lo rojo por los qe me da tynipic , desde ya agradeseria la respuesta .

Anónimo dijo... @ 11 de enero de 2010, 6:42

HOLA ME PODRIAN AYUDAR A COLOCAR ESOS CODIGOS, ES Q LO HE INTENTADO PERO CUANDO ABRO LA PAG ME SALEN TODOS LOS CODIGOS Y NO LA IMAGEN GRACIAS....

patin dijo... @ 13 de enero de 2010, 12:13

me aparece la primera imagen pero se pasan o sea no aparece como presentacion, coo se hace para que pasen las imagenes?

Anónimo dijo... @ 17 de enero de 2010, 5:12

El codigo no funciona, lo rpobe varias veces pero no. Pueden explicarlo de otra manera o no se resolver el problema¿?

Anónimo dijo... @ 18 de enero de 2010, 15:08

NO FUNCIONA ME APARCE SOLO UNA IMAGEN HAY Y NADA MAS ALGUIEN ME PUEDE DECIR COMO AGO PARA QUE ME SALGA BIEN LA PRESENTACION DE IMAGENES EMAIL:
jstb77@hotmail.com

i.e ana de castrillon dijo... @ 28 de enero de 2010, 7:48

les recomiendo que usen macromedia flash para esto, hacen un slide flash en mr google hai muchos tutoriales, espero que sea lo mejor.
juan meneses

Camilo Castro dijo... @ 24 de febrero de 2010, 23:36

A mi me funciono y lo personalize el que nescesite ayuda que me escriba en el area de contactos.

http://reparacionescartagena.es.tl/

michael dijo... @ 1 de abril de 2010, 11:59

a mi me salio pero la imagen no se mueve que hago?

Uvaxat dijo... @ 22 de mayo de 2010, 11:41

mira esque ami solo me sale la imagen y no me sale nada mas me puedes solucionar el problema porfavor? mira aca esta mi web http://uvaxat.es.tl
y aca el mail uvaxat@hotmail.com o uvaxat@gmail.com

Anónimo dijo... @ 7 de junio de 2010, 19:54

No me salen las imagenes alguien me puede ayudar ?

cristian dijo... @ 9 de junio de 2010, 15:13

espero que les guste mi web
todos los partidos de. mundial solo por

http://zonecerp.es.tl/futbol.htm

Anónimo dijo... @ 21 de julio de 2010, 17:42

en que parte de l apagina debo montar esos codigos me pueden asesorar porfavor

mixer dijo... @ 12 de diciembre de 2010, 22:36

hola cm stan?? no puede ver nada cn este codigo lo copie tal cual y lo pegue en mi web pero nada sia alguien me puede ayudar se lo agradeceria

Anónimo dijo... @ 27 de diciembre de 2010, 15:17

no entendí alguien me explica por fa

dmv dijo... @ 7 de febrero de 2011, 21:08

no anda el url es muy larga

uptodownloads dijo... @ 8 de marzo de 2011, 6:10

visiten http://uptodownloads.site88.net

Anónimo dijo... @ 8 de marzo de 2011, 9:46

este codigo no funciona TT

Anónimo dijo... @ 4 de marzo de 2012, 1:24

no funciona

brian dijo... @ 11 de mayo de 2012, 17:17

http://fayhack.es.tl/Foro/index.htm
metance ami foro ya essuper bueno suban todos sus pots

Publicar un comentario en la entrada