Son au clic sur image

Son au clic sur image - HTML/CSS - Programmation

Marsh Posté le 08-06-2017 à 19:44:46    

Bonjour à tous,
 
Je suis en train de créer un micro site.
Dans l'une des pages, des images devront permettre de lancer de la musique.
 
Voici le code que j'utilise actuellement :
<a href="http://site2musique" title="MUSIQUE"><img src="/test.png" alt="test"></a>
 
Or, lors du clic sur l'image, je suis redirigé vers le site qui contient le son.
J'aimerai rester sur mon site tout en permettant de lancer la musique au clic sur l'image.
 
Comment faire ?
 
PS : je suis très débutant en création de site.
 
 
Vous remerciant tous d'avance pour votre aide.

Reply

Marsh Posté le 08-06-2017 à 19:44:46   

Reply

Marsh Posté le 09-06-2017 à 12:47:20    

Bonjour à tous,
 
J'ai enfin trouvé une solution !  [:mcyrb]  
 
Voici le code chiné sur le net (et des mal au crâne plus tard) :
1. dans le head :
  <!-- Pour le passage de la souris -->
  <style>
   .conteneur
   {width: 150px;
   display: inline-block;
   margin: 0px;
   text-align: center;
   position: relative;}
 
   .conteneur img:hover
   {opacity: 0.4;}
 
   .conteneur .texte
   {font-family: "Open Sans", "Segoe UI", Helvetica, Arial;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-23%, -30%);
   z-index: -1;}
   
   .souris
   {cursor: pointer;}
  </style>
 
  <!-- Pour la lecture audio -->
  <script>
   function and_play_stop()
   {
   var PLAYER = document.getElementById("PLAYER" );
   if (PLAYER.paused)
   {PLAYER.play();}
   else
   {PLAYER.pause();}
   }
  </script>
2. dans le body :  
   <!-- TEST FONCTIONNEL -->
   <audio id="PLAYER" preload="none">
    <!-- ### Lien audio ### -->
    <source src="http://www.site2musique.fr"/>
    Votre navigateur n'est pas compatible. Veuillez le mettre à jour !
   </audio>
   <div class="conteneur">
     <span class="texte">
      <big><big><b>Lecture<br>Pause</b></big></big>
     </span>
    <!-- ### Image ### -->
    <image type="button" onclick="and_play_stop()" src="/image.png" border="0" alt="image"></image>
   </div>
 
 
Bon, ce code fonctionne.
Mais est-il possible de faire LECTURE et STOP au lieu de LECTURE/PAUSE ?
J'ai beau chercher je ne trouve pas.
En plus, comme un gros couillon que je suis, je n'ai pas gardé la page où j'ai trouvé le code.  [:sisicaivrai]  [:sisicaivrai]  

Reply

Marsh Posté le 14-06-2017 à 20:50:23    

Pour faire un stop tu dois faire un pause puis remettre la vidéo à 0.
 
     function stopVideo(){
          video.pause();
          video.currentTime = 0;
     }
 
Et fais tes recherches en anglais si tu ne le fais pas. Y'a stackoverflow qui t'aidera à coup sûr


Message édité par chrispc le 14-06-2017 à 20:51:31

---------------
L'écoconception n'est pas négociable - Topic habitats de demain : https://tinyurl.com/y5h2mjx7
Reply

Marsh Posté le 22-06-2017 à 22:24:43    

Bonjour,
Je ne pense pas que ce code est très sécurisé
J'éviterai :
type="button" onclick=
 
Cordialement

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed