Menu Javascript ayuda
Publicado por Augusto (1 intervención) el 09/10/2019 14:49:12
Buenas...
Soy bastante principiante con el Javascript pero aprendo rápido y me vendría bien un poco de ayuda.
Necesito hacer un botón de imagen que al pasar el cursor por encima muestre una secuencia de 40 imágenes y haga un bucle y que al hacer click pase a una secuencia de las siguientes 20 imágenes antes de abrir el enlace.
Les muestro el código que tengo hasta ahora y estoy peleando para que detecte el mouse para hacer la secuencia pero no logro conseguirlo.
Si alguien me ayuda con el diseño del boton puedo devolver el favor si es necesario con diseño gráfico o 3D
Desde ya muchas gracias. Saludos
Soy bastante principiante con el Javascript pero aprendo rápido y me vendría bien un poco de ayuda.
Necesito hacer un botón de imagen que al pasar el cursor por encima muestre una secuencia de 40 imágenes y haga un bucle y que al hacer click pase a una secuencia de las siguientes 20 imágenes antes de abrir el enlace.
Les muestro el código que tengo hasta ahora y estoy peleando para que detecte el mouse para hacer la secuencia pero no logro conseguirlo.
Si alguien me ayuda con el diseño del boton puedo devolver el favor si es necesario con diseño gráfico o 3D
Desde ya muchas gracias. Saludos
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
<!DOCTYPE html>
<head>
<script>
/**
* Array con las imagenes y enlaces que se iran mostrando en la web
*/var imagenes=new Array(
['img/1botoninicio0000.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0001.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0002.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0003.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0004.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0005.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0006.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0007.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0008.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0009.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0010.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0011.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0012.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0013.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0014.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0015.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0016.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0017.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0018.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0019.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0020.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0021.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0022.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0023.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0024.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0025.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0026.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0027.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0028.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0029.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0030.png','https://augusto-3d.blogspot.com/#'],
['img/1botoninicio0031.png','https://augusto-3d.blogspot.com/#'],
); var contador=0; /**
* Funcion para cambiar la imagen y link
*/function rotarImagenes()
{rotarImagenesimagenes.addEventListener('mouseover', Imagenes, false);
// cambiamos la imagen y la url
contador++
document.getElementById("imagen").src=imagenes[contador%imagenes.length][0];
document.getElementById("link").href=imagenes[contador%imagenes.length][1];
} /**
* Función que se ejecuta una vez cargada la página
*/onload=function()
{ // Cargamos una imagen aleatoria
rotarImagenes();
// Indicamos que cada 5 segundos cambie la imagen
setInterval(rotarImagenes,240);
}</script>
</head>
<body>
<a href="" id="link"><img src="" id="imagen"></a>
</body>
</html>
Valora esta pregunta
0
