Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1537 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Son au clic sur image

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Son au clic sur image

n°2301800
pfg60
Posté le 08-06-2017 à 19:44:46  profilanswer
 

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.

mood
Publicité
Posté le 08-06-2017 à 19:44:46  profilanswer
 

n°2301825
pfg60
Posté le 09-06-2017 à 12:47:20  profilanswer
 

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]  

n°2302025
chrispc
T'es tendue Natasha !
Posté le 14-06-2017 à 20:50:23  profilanswer
 

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
n°2302376
temps9
Addon
Posté le 22-06-2017 à 22:24:43  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Son au clic sur image

 

Sujets relatifs
[Résolu] Problème de bordure rémanente intempestive après clic sur imgImage de fond réactualisée à chaque clic
Changer une image sur un clicRécupérer les coordonnées de clic sur image
javascript desactiver clic droit sur une image[REGLER] image qui apparait au survol du lien, puis une autre
Afficher une image différente à chaque clicAffichage d'une image pendant le clic sur un bouton
problème de double clic en ligne sur site fait avec image readyclic sur une image en php
Plus de sujets relatifs à : Son au clic sur image


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR