Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Secuencia de imágenes con enlace

HTML - Secuencia de imágenes con enlace

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Secuencia de imágenes con enlace

Publicado por juanfrangm (3 intervenciones) el 01/10/2015 11:41:20
Hola a todos. Tengo una web en la que he creado una secuencia de imágenes en html. El problema es que no sé como poner en el código un enlace distinto a otra web para cada una de las imágenes. MI objetivo final es poder mapear cada una de esas imágenes a varios enlaces, pero prefiero ir poco a poco.
Mi web es www.servigali.es y el código que he insertado es:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<html>
<head>
<script type="text/javascript">
function rotarImagenes(idDestino, imagenInicial){
this.SecuenciaID=null;
this.imagen=imagenInicial;
this.duracion=2000;
this.imagenes="";
this.listadoImagenes="";
this.showId=idDestino;
 
this.CreaArray=function(n) {
this.length = n
for (var i = 0; i<n; i++) {
this[i] = new Image()
}
return this
};
 
this.Secuencia=function(type) {
if(type=="stop")
{
clearTimeout(this.SecuenciaID);
}else if(type=="start"){
this.MostrarSecuencia();
}
};
 
this.MostrarSecuencia=function() {
document.getElementById(this.showId).src = this.imagenes[this.imagen].src;
this.imagen++;
if(this.imagen>=this.listadoImagenes.length)
this.imagen=0
 
var instant = this;
this.SecuenciaID=setTimeout(function() { instant.MostrarSecuencia();}, this.duracion);
};
 
this.IniciarSecuencia=function(listadoImagenes) {
this.listadoImagenes=listadoImagenes;
 
this.imagenes=new this.CreaArray(listadoImagenes.length);
for (var i = 0; i<listadoImagenes.length; i++) {
this.imagenes[i].src = listadoImagenes[i];
}
this.MostrarSecuencia();
};
};
 
var img1=new rotarImagenes("secuencia1",0);
 
var listadoImagenes1=[
'http://servigali.es/wp-content/uploads/2015/09/Conjunto1-1.png',
'http://servigali.es/wp-content/uploads/2015/09/Conjunto1-2.png',
'http://servigali.es/wp-content/uploads/2015/09/Conjunto1-3.png',
'http://servigali.es/wp-content/uploads/2015/09/Conjunto1-4.png'
 
];
 
function start_rotarImagenes()
{
 
img1.IniciarSecuencia(listadoImagenes1);
 
}
</script>
</head>
 
<body onload="start_rotarImagenes()">
 
&nbsp;&nbsp;Publicidad:<p>
 
<img src="" alt="Secuencia" id="secuencia1">
 
 
</p>
 
 
</body>
</html>


Es un código que encontré ya que yo no sé mucho de programación. Si creéis que sería mejor otro también vale. Gracias.
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
sin imagen de perfil

Secuencia de imágenes con enlace

Publicado por juanfrangm (3 intervenciones) el 05/10/2015 21:41:06
Muchas gracias Xavi por tu respuesta. La verdad es que cambiando las imágenes por las que tengo en la web me funcionan perfectamente los enlaces.
Para complicarlo aun más. Ahora estoy intentando sustituir los enlaces de las imágenes por distintos enlaces resultantes de mapear cada una de ellas y no lo consigo. ¿es esto posible?.

Las imágenes que intento mapear para que en cada una de ellas me derive a un enlace distinto según un mapeo son:


http://servigali.es/wp-content/uploads/2015/10/Conjunto1-1png
http://servigali.es/wp-content/uploads/2015/10/Conjunto1-2.png
http://servigali.es/wp-content/uploads/2015/10/Conjunto1-3.png
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
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Secuencia de imágenes con enlace

Publicado por xve (1543 intervenciones) el 06/10/2015 08:29:00
En principio no deberías de tener ningún problema... nos puedes mostrar el código para ver donde puedes tener el problema?

Te da algún error la consola del navegador?
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
sin imagen de perfil

Secuencia de imágenes con enlace

Publicado por juanfrangm (3 intervenciones) el 06/10/2015 22:12:28
Hola xve.

A partir del código que muy acertadamente me indicó Xavi para poder realizar links:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<html>
<head>
<meta charset="utf-8">
 
<script>
function rotarImagenes(idDestino, imagenInicial){
 
	this.SecuenciaID=null;
 
	this.imagen=imagenInicial;
 
	this.duracion=3000;
 
	this.imagenes="";
 
	this.listadoImagenes="";
 
	this.listadoEnlaces="";
 
	this.showId=idDestino;
 
	this.CreaArray=function(n) {
		this.length = n
		for (var i = 0; i<n; i++) {
			this[i] = new Image()
		}
		return this
	};
 
 
	this.Secuencia=function(type) {
		if(type=="stop")
		{
			clearTimeout(this.SecuenciaID);
		}else if(type=="start"){
			this.MostrarSecuencia();
		}
	};
 
	this.MostrarSecuencia=function() {
 
		document.getElementById(this.showId).href=this.listadoEnlaces[this.imagen];
 
		document.getElementById(this.showId).getElementsByTagName("img")[0].src = this.imagenes[this.imagen].src;
 
		this.imagen++;
		if(this.imagen>=this.listadoImagenes.length)
		this.imagen=0
 
		var instant = this;
		this.SecuenciaID=setTimeout(function() { instant.MostrarSecuencia();}, this.duracion);
	};
 
	this.IniciarSecuencia=function(listadoImagenes,listadoEnlaces) {
		this.listadoImagenes=listadoImagenes;
		this.listadoEnlaces=listadoEnlaces
 
		this.imagenes=new this.CreaArray(listadoImagenes.length);
		for (var i = 0; i<listadoImagenes.length; i++) {
			this.imagenes[i].src = listadoImagenes[i];
		}
		this.MostrarSecuencia();
	};
};
 
 
var img1=new rotarImagenes("secuencia1",0);
 
 
var listadoImagenes1=[
	'http://servigali.es/wp-content/uploads/2015/10/Conjunto1-1.png',
    'http://servigali.es/wp-content/uploads/2015/10/Conjunto1-2.png',
	'http://servigali.es/wp-content/uploads/2015/10/Conjunto1-3.png',
	'http://servigali.es/wp-content/uploads/2015/10/Conjunto1-4.png'
 
];
 
var listadoEnlaces1=[
 
	'http://www.servigali.es/',
	'http://www.servigali.es/beneficios/',
	'http://www.servigali.es/funcionamiento/',
	'http://www.servigali.es/servicios/'
];
 
window.onload=function()
{
	img1.IniciarSecuencia(listadoImagenes1,listadoEnlaces1);
}
</script>
</head>
 
<body>
 
<a href="" id="secuencia1"><img src="" alt="Secuencia" id=""></a>
 
</body>
</html>




Intento sustituir los enlaces por algo así en cada uno de ellos

1
2
3
4
5
<map name="mapeo">
	<area alt="Ir a regalos" shape= "rect" coords= "21,118,314,217" href="http://servigali.es/servicios/regalos/">
	<area alt="Ir a hogar" shape= "rect" coords= "358,8,649,105" href="http://servigali.es/servicios/hogar/">
</map>
<img src="http://servigali.es/wp-content/uploads/2015/10/Conjunto1-1.png" usemap="#mapeo">

Pero como lo mio no es la programación no sé ni donde ni cómo insertarlo para que funcione. para cada imagen

Gracias de antemano.
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