Sujet Précédent Sujet Suivant

HTML: images cliquables avec sons

Fermé
wicolas Messages postés 9 Date d'inscription lundi 23 novembre 2015 Statut Membre Dernière intervention 24 novembre 2015 - Modifié par samgunsjovirow le 23/11/2015 à 15:09
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 24 nov. 2015 à 16:35
Bonjour

Je cherche à créer une page en html.
Je veux y insérer des image.
Je voudrais qu'au clic sur une image un son se déclenche sans qu'il y ai une ouverture d'une page qui indique la lecture du fichier audio.
Bref rester sur la page des images.
Voici mon code 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>

Merci pour votre aide.

EDIT: le titre "Communication avec enfants dans une situation d'handicap" n'ayant rien à voir avec le problème technique énoncé, il a été remplacé
A voir également:

9 réponses

Réponse 1 / 9
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
Modifié par Pitet le 23/11/2015 à 17:10
Salut,

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


Bonne journée,
0
Réponse 2 / 9
wicolas Messages postés 9 Date d'inscription lundi 23 novembre 2015 Statut Membre Dernière intervention 24 novembre 2015
23 nov. 2015 à 18:26
Merci mais cela ne fonctionne pas. Il est possible que cela vienne de moi.
Pourriez vous me réécrire le code en l' incluant dans mon code s'il vous plait?
Merci
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
24 nov. 2015 à 09:26 
<!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
Réponse 3 / 9
wicolas Messages postés 9 Date d'inscription lundi 23 novembre 2015 Statut Membre Dernière intervention 24 novembre 2015
24 nov. 2015 à 09:59
Bonjour
j'ai fait un copier coller avec votre code dans dreamweaver, j'ai enregistré, puis lancé le fichier html, celui ci s'ouvre avec firefox,
Les 2 images s'affichent mais lorsque je clic sur une ou l' autre des images, rien ne ce passe.
Avez vous quelque chose à me suggérer ?
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
24 nov. 2015 à 11:20
As tu bien ajouter des fichiers audio dans ton projet et mis à jour l'attribut src des balises audio ?
0
Réponse 4 / 9
wicolas Messages postés 9 Date d'inscription lundi 23 novembre 2015 Statut Membre Dernière intervention 24 novembre 2015
24 nov. 2015 à 11:29
En fait je me suis contenté de copier ton code dans dreamweaver
j'ai bien mis les fichiers audio dans le dossier image et dans le dossier du fichier html au cas ou.
Qu' appels tu "attribut src des balises audio" ?
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
24 nov. 2015 à 11:38 
<audio id="son-image1" src="audio/son-image1.mp3"></audio>

Le chemin renseigné dans l'attribut src de la balise audio doit correspondre au chemin d'accès vers le fichier audio, exactement comme l'attribut src de la balise img qui renseigne le chemin vers l'image.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
wicolas Messages postés 9 Date d'inscription lundi 23 novembre 2015 Statut Membre Dernière intervention 24 novembre 2015
24 nov. 2015 à 11:44
13 <audio id="son-image1" src="audio/son-image1.mp3"></audio>
14 <audio id="son-image2" src="audio/son-image2.mp3"></audio>

Oui s'est ce qui est écrit en ligne 13&14
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
Modifié par Pitet le 24/11/2015 à 11:57
Pour les images, tu as bien un fichier nommé image_01.jpg dans le dossier images de ton projet. Donc, tu renseignes bien dans la balise img le chemin "images/image_01.jpg".

Même chose pour les fichiers audio. Tu dois avoir un fichier nommé son-image1.mp3 dans le dossier audio de ton projet (ou dans un autre dossier du moment que le chemin renseigné dans l'attribut src est correct).
0
Réponse 6 / 9
wicolas Messages postés 9 Date d'inscription lundi 23 novembre 2015 Statut Membre Dernière intervention 24 novembre 2015
24 nov. 2015 à 12:02
Tout à fait je viens de vérifier les images apparaissent mais rien ne se passe quand je clic sur une image
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
24 nov. 2015 à 12:25
En utilisant un mp3 d'exemple trouvé en ligne, le code fonctionne bien : http://jsfiddle.net/8765gtst/

Vérifie que tu n'ai pas d'erreur javascript dans la console de développement de ton navigateur.
0
Réponse 7 / 9
wicolas Messages postés 9 Date d'inscription lundi 23 novembre 2015 Statut Membre Dernière intervention 24 novembre 2015
24 nov. 2015 à 14:09
l' exemple fonctionne mais rien à faire avec mon code
je pensais que ce serait simple heureusement que je n'ai plus de cheveux à m' arracher
0
Réponse 8 / 9
wicolas Messages postés 9 Date d'inscription lundi 23 novembre 2015 Statut Membre Dernière intervention 24 novembre 2015
24 nov. 2015 à 14:17
<html>
<head>
<title>Sans titre-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 (Sans titre-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>

Ce code est pourtant simple,
pourquoi cette putXXX de barre apparaît ???
Grrrr
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
24 nov. 2015 à 14:45
Pourquoi remettre ton premier code sans balise audio ni code javascript ?
Quelle barre ??
0
Réponse 9 / 9
wicolas Messages postés 9 Date d'inscription lundi 23 novembre 2015 Statut Membre Dernière intervention 24 novembre 2015
24 nov. 2015 à 15:19
La barre qui indique la lecture du fichier audio
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
24 nov. 2015 à 16:35
Si tu inclus l'image dans une balise a, le clique sur cette balise a te renvoie vers la page renseigné dans l'attribut href (principe de l'hypertexte).

Tu accèdes alors directement au fichier mp3, ton navigateur te propose donc de lire ce fichier.
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses
Balise </br>
erf -
erf -

3 réponses
Que veut dire <p>&nbsp;</p>?
quinn mallory -
prosthetiks -

3 réponses