HTML: images cliquables avec sons
wicolas
Messages postés
9
Date d'inscription
Statut
Membre
Dernière intervention
-
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
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é
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:
- HTML: images cliquables avec sons
- Editeur html - Télécharger - HTML
- Espace html ✓ - Forum HTML
- [**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
- /Var/www/html/index.html ✓ - Forum Linux / Unix
- Html download - Télécharger - HTML
9 réponses
Salut,
Un début de solution possible :
Bonne journée,
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,
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
Pourriez vous me réécrire le code en l' incluant dans mon code s'il vous plait?
Merci
<!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>
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 ?
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 ?
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" ?
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" ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
14 <audio id="son-image2" src="audio/son-image2.mp3"></audio>
Oui s'est ce qui est écrit en ligne 13&14
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).
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).
Tout à fait je viens de vérifier les images apparaissent mais rien ne se passe quand je clic sur une image
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.
Vérifie que tu n'ai pas d'erreur javascript dans la console de développement de ton navigateur.
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
je pensais que ce serait simple heureusement que je n'ai plus de cheveux à m' arracher
<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
<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
