View original (French)

HTML: clickable images with sounds

wicolas Posted messages 9 Status Member -  
Pitet Posted messages 2845 Status Member -
Bonjour

I am looking to create a page in HTML.
I want to insert images into it.
I would like that when clicking on an image, a sound is triggered without opening a page indicating the playback of the audio file.
In short, I want to stay on the image page.
Here is my HTML code:

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>

Thank you for your help.

EDIT: the title "Communication avec enfants dans une situation d'handicap" having nothing to do with the technical problem stated, has been replaced

9 answers

Answer 1 / 9
Pitet Posted messages 2845 Status Member 530
 
Hello,

A possible starting solution: 
 <!-- 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 (with jQuery) $(function() { $('.image').click(function() { var num = $(this).attr('data-num'); $('#son-' + num).get(0).play(); }); });


Have a nice day,
0
Answer 2 / 9
wicolas Posted messages 9 Status Member
 
Thank you, but it's not working. It might be my fault.
Could you please rewrite the code and include it in my code?
Thank you.
0
Pitet Posted messages 2845 Status Member 530
  
 <!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>
0
Answer 3 / 9
wicolas Posted messages 9 Status Member
 
Hello
I copied your code into Dreamweaver, saved it, and then launched the HTML file. It opens with Firefox,
the 2 images are displayed, but when I click on either of the images, nothing happens.
Do you have any suggestions for me?
0
Pitet Posted messages 2845 Status Member 530
 
Have you properly added audio files to your project and updated the src attribute of the audio tags?
0
Answer 4 / 9
wicolas Posted messages 9 Status Member
 
In fact, I just copied your code into Dreamweaver
I correctly placed the audio files in the image folder and in the folder of the HTML file just in case.
What do you mean by "src attribute of the audio tags"?
0
Pitet Posted messages 2845 Status Member 530
  
<audio id="son-image1" src="audio/son-image1.mp3"></audio>

The path specified in the src attribute of the audio tag must correspond to the path to the audio file, just like the src attribute of the img tag specifies the path to the image.
0
Answer 5 / 9
wicolas Posted messages 9 Status Member
 
13 <audio id="son-image1" src="audio/son-image1.mp3" />
14 <audio id="son-image2" src="audio/son-image2.mp3" />

Yes, that is what is written on lines 13 and 14.
0
Pitet Posted messages 2845 Status Member 530
 
For the images, you indeed have a file named image_01.jpg in the images folder of your project. So, you will correctly specify in the img tag the path "images/image_01.jpg".

The same goes for audio files. You should have a file named son-image1.mp3 in the audio folder of your project (or in another folder as long as the path specified in the src attribute is correct).
0
Answer 6 / 9
wicolas Posted messages 9 Status Member
 
Absolutely, I just checked the images appear but nothing happens when I click on an image.
0
Pitet Posted messages 2845 Status Member 530
 
Using an example mp3 found online, the code works well: http://jsfiddle.net/8765gtst/

Make sure you have no JavaScript errors in your browser's development console.
0
Answer 7 / 9
wicolas Posted messages 9 Status Member
 
The example works but nothing to do with my code
I thought it would be simple luckily I no longer have any hair to pull out.
0
Answer 8 / 9
wicolas Posted messages 9 Status Member
 
<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Untitled-1) -->
<a href="images/son-image1.mp3"><img src="images/image_01.jpg" width="300" height="300"></a>
<!-- End Save for Web Slices -->
</body>
</html>

This code is quite simple,
why is this damn bar appearing???
Grrrr
0
Pitet Posted messages 2845 Status Member 530
 
Why resubmit your first code without audio tags or JavaScript code?
What bar??
0
Answer 9 / 9
wicolas Posted messages 9 Status Member
 
The bar that indicates the playback of the audio file.
0