JavaScript - enlaces en galeria de imagenes

   
Vista:

enlaces en galeria de imagenes

Publicado por rocalcha rocalcha@hotmail.com (1 intervención) el 01/05/2014 12:01:47
Hola aver si me podeis ayudar soy nueva en javascript y tengo que realizar una galeria de imagenes donde aparezca el titulo de la imagen debajo de esta y un enlace en cada imagen a una web. me falta realizar lo último que cuando salga una imagen pinchar en ella y que salga el enlace a la web. esto con cada imagen. me podeis ayudar no se como hacerlo.




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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pase de diapositivas</title>
<script type="text/javascript">
var i = 0;
var path = new Array();
 
// LIST OF SLIDES
path[0] = "imagen1.jpg";
path[1] = "imagen2.jpg";
path[2] = "imagen3.jpg";
 
var k = path.length-1;
 
var caption = new Array();
// LIST OF CAPT&#304;ONS
 
caption[0] = "The Time Through Ages.";
caption[1] = "In the Name of Allah, Most Gracious, Most Merciful.";
caption[2] = "1. By the Time, ";
 
var enlace = new Array();
//LIST OF URLs
 
enlace[0] = "http://url" 
enlace[1] = "http://url" 
enlace[2] = "http://url/" 
enlace[3] = "http://url/" 
 
 
 
 
function swapImage(){
var el = document.getElementById("mydiv");
el.innerHTML=caption[i];
var img= document.getElementById("slide");
img.src= path[i];
 
 
 
 
 
if(i < k ) { i++;}
else  { i = 0; }
setTimeout("swapImage()",5000);
// alert(document.body.innerHTML);
 
}
 
// Multiple onload function written by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
 
addLoadEvent(function() {
swapImage();
});
</script>
</head>
<body>
<img name="slide" id="slide" alt ="my images" height="130" width="770" src="images/law1.jpg"/>
<div id ="mydiv"></div>
 
</body>
</html>
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 xve

enlaces en galeria de imagenes

Publicado por xve (1597 intervenciones) el 01/05/2014 19:38:37
Hola Rocalcha, aqui lo tienes... haber si te sirve...
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pase de diapositivas</title>
<script type="text/javascript">
var i = 0;
 
var path = new Array();
path[0] = "imagen1.jpg";
path[1] = "imagen2.jpg";
path[2] = "imagen3.jpg";
 
var k = path.length-1;
 
var caption = new Array();
caption[0] = "The Time Through Ages.";
caption[1] = "In the Name of Allah, Most Gracious, Most Merciful.";
caption[2] = "1. By the Time, ";
 
var enlace = new Array();
enlace[0] = "http://urlA";
enlace[1] = "http://urlB";
enlace[2] = "http://urlC";
 
function swapImage(){
    var el = document.getElementById("mydiv");
    el.innerHTML=caption[i];
    var img= document.getElementById("slide");
    img.src= path[i];
    var link= document.getElementById("url");
    link.href= enlace[i];
 
    if(i < k )
        { i++;}
    else
        { i = 0; }
 
    setTimeout("swapImage()",5000);
    // alert(document.body.innerHTML);
}
 
window.onload = function() {
    swapImage();
};
</script>
</head>
<body>
 
<a href="" id="url"><img name="slide" id="slide" alt ="my images" height="130" width="770" src="images/law1.jpg"/></a>
<div id ="mydiv"></div>
 
</body>
</html>

Coméntanos, ok?
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