Duda sobre banner Gif y enlaces

Citar

Escrito el 13 May 2008 10:22 am

No estoy muy seguro de si esta es la sección adecuada, estaba por ponerlo en Diseño gráfico, pero al final creo que va mejor. aquí.

Al lío. Tengo un banner que anuncia 3 secciones diferentes de la página. El jefe dice que quiere que según lo que enseña el banner pues vaya a un enlace diferente. Pero a mi me da que eso no se puede hacer con un gif. Según el si que se puede pues lo tiene hecho con un programa, pero no se acuerda cual es.

¿es posible entonces o no?

Por xilitos

53 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Vigo / Galicia

Citar

Escrito el 13 May 2008 11:12 am

No.
No se puede.
Al menos, no de forma sencilla.
(quizá mediante un javascript, que contara el tiempo, y mandara a uno u otro sitio... pero no dejaría de ser una chapuza)

Lo que puedes, es:

Hacerlo con Flash. Y los enlaces, los regulará el propio Flash.
Hacerlo por JavaScript: una función hará el cambio entre tres gifs diferentes, y cada uno, con su enlace.

Yo no soy amigo del flash... pero puede que sea lo más acertado (aunq si el visitante no tiene flash...)
Hacerlo con javascript sería mucho más rápido (para mí, q no tengo NPI de Flash)

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 13 May 2008 11:55 am

Entonces le diré que con JavaScript o nada.

Ya que la página al entrar te da a elegir si html o flash, así que no veo lógico meter flash en la versión html.
Yo tampoco tengo ni idea de flash.

Saludos y gracias

Por xilitos

53 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Vigo / Galicia

Citar

Escrito el 13 May 2008 12:15 pm

con JSP es muy fácil. Básicamente:
- window.onload -> función con un "setTimeout".
- setTimeout, que rota entre los valores de una matriz, con las URL del GIF, y los enlaces a donde apunta cada uno.
- la función cambia el atributo "src" del baner, y el "href" del enlace, según la rotación definida.
Si el navegador, tiene desactivado el JSP, al menos se verá el primer Banner, con el primer enlace.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 14 May 2008 10:04 am

Lo he conseguido, más o menos. El código JavaScript es el siguiente:

Código :

var imgn = new Array()
   var enlc = new Array()
   var indice = 0
   var pausa = 3000
   
   imgn[0] = new Image()
   imgn[0].src = "img_tienda/banner_parte1.jpg"
   enlc[0] = "enlace1"
   
   imgn[1] = new Image()
   imgn[1].src = "img_tienda/banner_parte2.jpg"
   enlc[1] = "enlace2"
   
   imgn[2] = new Image()
   imgn[2].src = "img_tienda/banner_parte3.jpg"
   enlc[2] = "enlace3"
   
   
   function rota()
   {
   if (indice ==  imgn.length) indice = 0
   
   if (document.images)
   {
   document.images.banner.src = imgn[indice].src  
   }
   else
   {
   document.getElementById('banner').src=imgn[indice].src
   }
   indice++
   setTimeout('rota()',pausa)
   }
   function vete()
   {
   window.open(enlc[indice-1])
   }

Luego lo llamo con:

<body onLoad="rota();">

<a href="#" onclick="vete()"><img name="banner"></a>

El caso es que quería añadir un title y un alt a cada imagen pero no soy capaz de conseguirlo

Por xilitos

53 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Vigo / Galicia

Citar

Escrito el 14 May 2008 12:05 pm

Con ese código, abrirás el enlace en una nueva página.
No te lo recomiendo.

De paso, adaptándolo un poco, se arregla eso, y lo que pides:

Código :

<script>
<!--
var imgn = new Array();  //matriz de las imágenes
var enlc = new Array();  //matriz de los enlaces
var alts = new Array();  //matriz de los textos 'alt'
var titles = new Array();  //matriz de los textos 'title'
var indice = 0;     //por cuál empieza
var pausa = 3000;  //milisegundos entre cada banner
   
imgn[0] = new Image();
imgn[0].src = 'url_de_imagen_1.jpg' //en javascript, no se deben usar comillas "dobles", sino 'simples'.
enlc[0] = 'url_del_enlace_1'; //en javascript, se debe acabar cada línea, con un 'punto-y-coma'
titles[0] = 'texto_título_1';
alts[0] = 'texto_alt_1';
   
imgn[1] = new Image();
imgn[1].src = 'url_de_imagen_1.jpg';
enlc[1] = 'url_del_enlace_1';
titles[1] = 'texto_título_2';
alts[1] = 'texto_alt_2';
   
//GEBI: esta función, asegura la compatibilidad con navegadores antiguos
var NS4=(document.layers&&!document.getElementById)?true:false; //Netscape v.4
var IE4=(document.all&&!document.getElementById)?true:false; //Internet Explorer v.4
var DOM=(document.getElementById)?true:false; //Netscape v.6 ó Internet Explorer v.6
function GEBI(ID)
{if(NS4){return document.layers[ID];}
 if(IE4){return document.all(ID);}
 if(DOM){return document.getElementById(ID);}
}
   
function rota()
{if(indice==imgn.length){indice=0;}
 GEBI('banner').src=imgn[indice].src;
 GEBI('banner').title=titles[indice]; //igual que se puede cambiar el "src", se puede cambiar el "title"
 GEBI('banner').alt=alts[indice]; //o el atributo "alt"
 GEBI('enlace').href=enlc[indice]; //o incluso a dónde apuntan los enlaces, con sus "href"
 indice++;
 setTimeout('rota();',pausa);
}

window.onload=rota;   //ésta es la manera adecuada de llamar al "onload", no desde el <body>
//-->
</script>
<body>
<a href="url_del_enlace_1" id="enlace" target="_blank">
<!-- si sigues queriendo q el enlace se abra en otra ventana (lo desaconsejo), usa el target="_blank", si no, quítalo //-->
   <img src="url_de_imagen_1.jpg" id="banner" title="texto_título_1" alt="texto_alt_1" style="border-width:0px;" />
<!-- Desde hace mucho que ya no se usa el atributo "name" para referirse a los elementos que no sean de formularios; ahora se usa el "id" //-->
<!-- TODOS los elementos del xHTML se cierran. Incluso los que no se cerraban. Fíjate en el último caracter del <img />, es una barra inclinada (/); esa es la manera de cerrar los elementos que antes, se dejaban abiertos; con el <br />, o el <input />, se hace lo mismo (entre tantos otros) //-->
</a>
</body>

Fíjate en los comentarios, pues ahí explico los cambios.
Suerte

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 16 May 2008 07:56 am

Cada día me doy más cuenta de lo poco que se.

Gracias de veras Rizome. No sólo me has arreglado todo el código sino que me has ayudado a aprender unas cuantas cosas muy útiles.

Por xilitos

53 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Vigo / Galicia

Citar

Escrito el 16 May 2008 09:55 am

Me alegro de haberte sido útil.

Para seguir aprendiendo JSP y xHTML, te recomiendo los libritos de siempre: (si no sabes a cuáles me refiero, pregunta)
La guía para usuarios de ANAYA (unos 13€/unidad)
Varás qué útiles.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 16 May 2008 12:31 pm

De hecho, hace más de 1 mes me pedi unos libros porque vi que los recomendabais en el foro. No se si tu u otra persona.

Me cogí el CSS y DHTML de Anaya, el de PHP y uno de flash de otra editorial. El caso es que me llegó ayer... el de CSS y DHTML. Casi me muero de la espera. Porque los otros no los pudieron conseguir al parecer. Tendré que ver ahora que más coger, cuando me ventile este.

Por xilitos

53 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Vigo / Galicia

Citar

Escrito el 16 May 2008 08:58 pm

Sí... yo los recomiendo siempre que sale la ocasión.

El de CSS/DHTML lo veo más propio una vez que se domina el JSP, pues aunque lo explica bien, se entiende mejor si ya se tienen los conocimientos de JavaScript del primero

Ya sabes dónde encontrarnos si te surgen dudas.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Duda sobre banner Gif y enlaces

Escribe una respuesta rapida