Imágenes clicables con sonido
wicolas
Mensajes publicados
9
Estado
Miembro
-
Pitet Mensajes publicados 2845 Estado Miembro -
Pitet Mensajes publicados 2845 Estado Miembro -
Hola
Estoy buscando crear una página en html.
Quiero insertar imágenes.
Me gustaría que al hacer clic en una imagen se reproduzca un sonido sin que se abra una página que indique la reproducción del archivo de audio.
En resumen, permanecer en la página de las imágenes.
Aquí está mi código html:
1 <html>
2 <head>
3 <title>Picto</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 </head>
6 <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
7 <!-- Save for Web Slices (Sans titre-1) -->
8 <hr>
9 <img src="images/image_01.jpg" width="300" height="300">
10 <!-- End Save for Web Slices -->
11 </body>
12 </html>
Gracias por tu ayuda.
EDIT: el título "Communication avec enfants dans une situation d'handicap" que no tenía relación con el problema técnico planteado, ha sido reemplazado
Estoy buscando crear una página en html.
Quiero insertar imágenes.
Me gustaría que al hacer clic en una imagen se reproduzca un sonido sin que se abra una página que indique la reproducción del archivo de audio.
En resumen, permanecer en la página de las imágenes.
Aquí está mi código html:
1 <html>
2 <head>
3 <title>Picto</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 </head>
6 <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
7 <!-- Save for Web Slices (Sans titre-1) -->
8 <hr>
9 <img src="images/image_01.jpg" width="300" height="300">
10 <!-- End Save for Web Slices -->
11 </body>
12 </html>
Gracias por tu ayuda.
EDIT: el título "Communication avec enfants dans une situation d'handicap" que no tenía relación con el problema técnico planteado, ha sido reemplazado
9 respuestas
-
Hola,
Un comienzo de solución posible:<!-- HTML --> <img class="image" data-num="image1" src="images/image_01.jpg" width="300" height="300"> <img class="image" data-num="image2" src="images/image_02.jpg" width="300" height="300"> <audio id="son-image1" src="audio/son-image1.mp3"></audio> <audio id="son-image2" src="audio/son-image2.mp3"></audio>
// javascript (con jQuery) $(function() { $('.image').click(function() { var num = $(this).attr('data-num'); $('#son-' + num).get(0).play(); }); });
Bonne journée, -
Gracias, pero eso no funciona. Es posible que venga de mí. ¿Podría reescribirme el código e incluirlo en mi código, por favor? Muchas gracias.
-
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Picto</title> </head> <body> <img class="image" data-num="image1" src="images/image_01.jpg" width="300" height="300"> <img class="image" data-num="image2" src="images/image_02.jpg" width="300" height="300"> <audio id="son-image1" src="audio/son-image1.mp3"></audio> <audio id="son-image2" src="audio/son-image2.mp3"></audio> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function() { $('.image').click(function() { var num = $(this).attr('data-num'); $('#son-' + num).get(0).play(); }); }); </script> </body> </html>
-
-
Hola
he hecho un copiar-pegar con su código en Dreamweaver, lo he guardado y luego he abierto el archivo html; se abre en Firefox,
Las 2 imágenes se muestran pero cuando hago clic en una u otra de las imágenes, no pasa nada.
¿Tiene alguna sugerencia? -
En realidad me limité a copiar tu código en Dreamweaver
sé que puse los archivos de audio en la carpeta de imágenes y en la carpeta del archivo HTML por si acaso.
¿Qué llamas atributo src de las etiquetas audio? -
13 <audio id="son-image1" src="audio/son-image1.mp3" />
14 <audio id="son-image2" src="audio/son-image2.mp3" />
Sí, es lo que está escrito en las líneas 13 y 14-
Para las imágenes, tienes un archivo llamado image_01.jpg en la carpeta imágenes de tu proyecto. Por lo tanto, debes indicar en la etiqueta img la ruta "images/image_01.jpg".
Lo mismo para los archivos de audio. Debes tener un archivo llamado son-image1.mp3 en la carpeta audio de tu proyecto (o en otra carpeta siempre que la ruta indicada en el atributo src sea correcta).
-
-
Sí, exactamente, acabo de verificar que las imágenes aparecen, pero no pasa nada cuando hago clic en una imagen.
-
Usando un mp3 de ejemplo encontrado en línea, el código funciona bien: http://jsfiddle.net/8765gtst/
Verifica que no tengas errores de JavaScript en la consola de desarrollo de tu navegador.
-
-
el ejemplo funciona pero no vale con mi código
pensé que sería simple afortunadamente ya no me quedaban mechones para arrancarme -
-
La barra que indica la reproducción del archivo de audio
