Foros del Web » Programación web » Javascript »

Imágenes estilo marquesina

Estas en el tema de Imágenes estilo marquesina en el foro de Javascript en Foros del Web. Quisiera que me ayuden con un script que haga un efecto parecido a una marquesina (marquee) con varias imágenes que estén juntas con diferentes links ...
  #1 (permalink)  
Antiguo 19/12/2002, 17:37
Avatar de medinauta  
Fecha de Ingreso: diciembre-2002
Ubicación: Guayaquil
Mensajes: 159
Antigüedad: 11 años, 9 meses
Puntos: 0
Imágenes estilo marquesina

Quisiera que me ayuden con un script que haga un efecto parecido a una marquesina (marquee) con varias imágenes que estén juntas con diferentes links cada una, y al dar click me lleve a ese link.

Algo como se puede ver en Encarta 2000 (ej: brasil)


Un montón de gracias.
  #2 (permalink)  
Antiguo 19/12/2002, 17:50
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 889
Antigüedad: 12 años, 8 meses
Puntos: 4
Lo puedes hacer perfectamente con marquee:

<marquee>
&nbsp;&nbsp;&nbsp;<a href="enlace1.htm"> <img src="imagen1.jpg"></a>
&nbsp;&nbsp;&nbsp;<a href="enlace1.htm"> <img src="imagen2.jpg"></a>
&nbsp;&nbsp;&nbsp;<a href="enlace1.htm"> <img src="imagen3.jpg"></a>
&nbsp;&nbsp;&nbsp;<a href="enlace1.htm"> <img src="imagen4.jpg"></a>
</marquee>

PD: &nbsp; equivale a 1 espacio en blanco

Saludos!
  #3 (permalink)  
Antiguo 10/10/2003, 00:58
 
Fecha de Ingreso: octubre-2003
Mensajes: 52
Antigüedad: 10 años, 11 meses
Puntos: 0
Hay forma de hacer q la marquesina se repita por ejemplo 3 veces y no de forma indefinida ?
  #4 (permalink)  
Antiguo 10/10/2003, 01:00
 
Fecha de Ingreso: octubre-2003
Mensajes: 52
Antigüedad: 10 años, 11 meses
Puntos: 0
O que al pasar el raton sobre la imagen se detenga la marquesina ?
  #5 (permalink)  
Antiguo 10/10/2003, 03:50
Avatar de homer  
Fecha de Ingreso: marzo-2003
Ubicación: Madrid
Mensajes: 40
Antigüedad: 11 años, 6 meses
Puntos: 0
Te paso un script que hace lo que pides, eso sí no consigo hacer que se pare después de un cierto número de pasadas

<HTML>
<HEAD>
<TITLE>Banner que rota imágenes</TITLE>

</HEAD>

<BODY>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="web_bg">&nbsp;</td>
<td bgcolor="#CCCCCC" width="1"></td>
<td width="325">
<div align="left">
<a href="">
<img src="imagenes/logo.gif" width="321" height="60" border="0"></div>
</td>
<td width="450">
<div align="right"><script language="JavaScript1.2">

//Specify the slider's width (in pixels)
var sliderwidth=450
//Specify the slider's height
var sliderheight=60
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=2

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''


slidebgcolor="#FFFFFF"
leftrightslide[0]='<a href="tuenlace1.html"><img src="imagenes/image1.jpg" border=0></a>'
leftrightslide[1]='<a href="tuenlace2.html"><img src="imagenes/image2.jpg" border=0></a>'
leftrightslide[2]='<a href="tuenlace3.html"><img src="imagenes/image3.jpg" border=0></a>'
leftrightslide[3]='<a href="tuenlace4.html"><img src="imagenes/image4.jpg" border=0></a>'
leftrightslide[4]='<a href="tuenlace5.html"><img src="imagenes/image5.jpg" border=0></a>'
leftrightslide[5]='<a href="tuenlace6.html"><img src="imagenes/image6.jpg" border=0></a>'



var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(" ")+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp"

style="visibility:hidden;position:absolute;top:-100;left:-3000">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftr ightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+4
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slideme nu2
ns_slide2=document.ns_slidemenu.document.ns_slidem enu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+20
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style. left)-copyspeed
else
cross_slide.style.left=parseInt(cross_slide2.style .left)+actualwidth+3

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.styl e.left)-copyspeed
else
cross_slide2.style.left=parseInt(cross_slide.style .left)+actualwidth+3

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+3

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+3
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';hei ght:'+sliderheight+';overflow:hidden">')
write('<div

style="position:absolute;width:'+sliderwidth+';hei ght:'+sliderheight+';background-color:'+slidebgcolor+'"

onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0;top:0"></div>')
write('<div id="test3" style="position:absolute;left:-1000;top:0"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu"

bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0"

onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0"

onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script></div>
</td>
<td class="web_bg">&nbsp;</td>
</tr>
</table>
</BODY>
</HTML>
  #6 (permalink)  
Antiguo 25/12/2003, 14:08
 
Fecha de Ingreso: julio-2002
Ubicación: stgo rec
Mensajes: 434
Antigüedad: 12 años, 1 mes
Puntos: 3
consulta

Hola

El codigo , funciona super buen, pero tiene un pero, yo necesito agragarle un texto y este solo apararece en una linea, al agregarle un <br> no queda bien, se repiten los elemetos del listado y a demas no se ve el texto que deveria aparecer en la segunda liena.

existira una solucion para esto.


gracias, y saludos, y feliz navidad jo jo jo
__________________
Saludos
Leo
  #7 (permalink)  
Antiguo 11/02/2004, 23:29
Avatar de Artepop  
Fecha de Ingreso: noviembre-2002
Ubicación: Fuengirola
Mensajes: 292
Antigüedad: 11 años, 10 meses
Puntos: 1
Código:
<SCRIPT LANGUAGE="JavaScript">
document.write('<marquee direction="up" width="218" height="280" scrollamount="4" scrolldelay="100" onMouseOver="stop()" onMouseOut="start()" style="background-color:#FFFFFF">');
document.write('<p><b>Contenido de la marquesina</b> puedes poner etiquetas HTML<br><br>Imagenes<br><imr src="imagenes.gif"><br>Links <a href="web.htm"><br><br>O lo que sea.</p>');
document.write('</marquee>');
</SCRIPT>
Variables de Marquesina:

Direction
- up (sale hacia arriba)
- down (sale desde abajo)
- left (izquierda)
- right (derecha)

Width (define el ancho de marquesina)

Height (define el alto)

Scrollamount (define velocidad)

Luego para detener y reanudar, esta dos:

onMouseOver="stop()" (Define cuando estamos con el puntero encima de la marquesina se detenga, stop)

onMouseOut="start()" (Cuando estamos fuera de la marquesina, osea el puntero no esta sobre esta, start, empieza o reanuda el movimiento)

Estilos para marquesina:

Etiqueta style
- background-color:#000000 (Definimos el color de fondo)
- border:1 solid red (Borde de la marquesina y color de este)

Bueno esto funciona en últimas versiones de IE y Mozilla. Agradecería si alguien sabe como hacerlo funcionar en versiones anteriores, Konqueron y resto de navegadores.

En navegadores que no funciona se muestra como un bloque normal de HTML execto en Konqueron, que no aparece nada.

Un Saludo
__________________
http://www.mfo.com.es/
  #8 (permalink)  
Antiguo 02/01/2007, 08:41
 
Fecha de Ingreso: marzo-2005
Mensajes: 11
Antigüedad: 9 años, 5 meses
Puntos: 0
Re: Imágenes estilo marquesina

Tengo un marque horizontal de varias imagenes, como puedo hacer que se cargue todas las imagenes y luego el marque se quede estatico, y luego con algun boton o algo que se desplace a la izquierda o derecha?
Tengo el siguiente codigo que ahce eso, pero el problema es cuando quiero que se mueva a izquierda o derecha, comienza desde el principio y no donde se quedo al cargar....

Espero alguien peuda ayudarme, gracias.

function marquesina_izq()
{
document.getElementById('marquesina').direction='l eft';
document.getElementById('marquesina').start();
document.getElementById('marquesina').scrollAmount ='4';
}
function marquesina_der()
{
document.getElementById('marquesina').direction='r ight';
document.getElementById('marquesina').start();
document.getElementById('marquesina').scrollAmount ='4';
}
function marquesina_alto()
{
document.getElementById('marquesina').scrollAmount ='0';
}
function inicio()
{
document.getElementById('marquesina').stop();
document.getElementById('marquesina').scrollLeft=4 10;
}
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:56.
SEO by vBSEO 3.3.2