JavaScript - Programar varios eventos onclick a diferentes imagenes

   
Vista:
Imágen de perfil de cris

Programar varios eventos onclick a diferentes imagenes

Publicado por cris cris@mainecolibro.com (11 intervenciones) el 14/11/2014 15:51:35
Buenos días programadores, trabajando en un reproductor de video y su consecuente lista de reproducción quisiera generar una lista de imagenes por cada video con sus correspondientes onclick hacia el video.
El evento onclick llamará a una función de carga de video en el reproductor 'cargarvideo(nombre)'.
El problema es que onclick no puede asignarse varias veces desde un ciclo for hacia cada imagen.
Los algoritmos funcionan bien sin el ciclo for asignando un numero a listaii, me gusta programar de esta manera porque me agiliza la velocidad de la página. Pero creo que me falta aprender algo que desconozco de javascript sobre eventos.
Si alguien puede ayudarme a corregir este problemita, le agradezco desde ya!
Saludos.

var listamusica = ["paz-corazon", "niño-feliz", "baile-de-vaquita", "feliz-dia-mariposas", "dancer-anima", "delfin-loop-dando-saltos", "la-ratita-tita", "travel-loop-sinthpop", "musica-dance-emir-wow", "melodia-cielo-de-seda", "music-dance-composer", "musica-galaxial", "music-dance-cris-main-ok", "music-dance-transmission", "melodia-atardecer-esperanza", "melodia-del-alma-cielo-esperanza", "music-dance-man-lionmen", "music-dance-tin-tin", "dance-goal-loop", "ratitas-dance", "vida-romantica"];

Código HTML
1
2
3
4
5
6
7
8
9
10
11
<div id="Lista">
  <div align="center">
<script type="application/x-javascript" language="javascript">
	for (listaii=0; listaii <= listamusica.length; listaii++)
	{
		vistaprevia(listamusica[listaii]);
	}
 
</script>
	 </div>
</div>

Funciones JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function cargarvideo(nombre)
{
	var vid = '<video id="video01" class="video-js vjs-default-skin" controls preload="" width="394" height="218" poster="" data-setup="{}">'
	var a = '<source '
	var b = 'src='
	var c = '.webm'
	var d = '/'
	var e = '"'
	var f = "type='video/webm'/>"
	var g = '</video>'
	var h = 'contenidos'
	var insertar = a + b + e + h + d + nombre + c + e + f
	var j = vid + insertar + g;
	document.getElementById('video').innerHTML = j;
 
function vistaprevia(video)
{
	var videoa = '<img src="'
	var videob = '"'
	var videoc = ' width="80px" height="80px" border="0" align="absmiddle"/>'
	var videod = 'contenidos/'
	var videoe = '.jpg'
	var videof = ' title="'
	var videog = ' onClick="cargarvideo(listamusica[listaii])"'
	var videoh = videoa + videod + video + videoe + videob + videog + videof + video + videob + videoc
	document.writeln(videoh);
}


No soy de utilizar rutinas preprogramadas como las playlist xml, porque soy de personalizar la mayoria de las cosas en mi paginas, suerte.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de cris

Programar varios eventos onclick a diferentes imagenes

Publicado por cris (11 intervenciones) el 14/11/2014 16:42:32
Solucionado! necesitaba agregar un contador extra en el ciclo for y predefinirlo en la función vistaprevia como contador inro.
Cualquier duda visitar

www.mainecollage.net/musica.html

para ver la lista de imagenes con sus correspondientes onclick.

Gracias!

Codigo HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="Lista">
  <div align="center">
<script type="application/x-javascript" language="javascript">
 
	var inro = -1
	for (listaii=0; listaii < listamusica.length; listaii++)
	{
		inro = inro + 1;
		vistaprevia(listamusica[listaii],inro);
	}
 
</script>
	 </div>
</div>

Función JS
1
2
3
4
5
6
7
8
9
10
11
12
function vistaprevia(video,inro)
{
	var videoa = '<img src="'
	var videob = '"'
	var videoc = ' width="80px" height="80px" border="0" align="absmiddle"/>'
	var videod = 'contenidos/'
	var videoe = '.jpg'
	var videof = ' title="'
	var videog = ' onClick="cargarvideo(listamusica[' + inro + '])"'
	var videoh = videoa + videod + video + videoe + videob + videog + videof + video + videob + videoc
	document.writeln(videoh);
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Programar varios eventos onclick a diferentes imagenes

Publicado por xve (1594 intervenciones) el 14/11/2014 20:39:09
Gracias por compartirlo cris!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de cris

Programar varios eventos onclick a diferentes imagenes

Publicado por cris (11 intervenciones) el 04/12/2014 06:43:25
Muchas gracias! y a ustedes por ayudar con este emprendimiento.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de cris

Programar varios eventos onclick a diferentes imagenes

Publicado por cris (11 intervenciones) el 04/12/2014 06:45:40
Vi los cambios en la web, no les recomiendo letras verdes para los códigos y fondos amarillos, son colores que cansan y se rechazan les aconsejo los azules, los amarillos son muy llamativos y los verdes los ves todos los días (es un decir si hay vegetacion en tu habitat). Gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar