after one word is clicked then popup explains it, changes text color to red onmouseover, then changes color back to black onmouseout

Question

I use this script below to change the color for every single word when mouse over that word, and changes back to black when mouse out of that word, and works great. Also, If user want to hear the pronunciation then can click on the word to play the sound, which works great.

There are huge number of words on the text, and for every single word different explanations/popups.

But where im stuck is that i like to add popup over every word onmouseover, and to show explanation for that word only.

I like how it works on html <p title="Explanation">word-1</p> but using js i found difficult to implement. Also i found an example using css which i like it, but difficult to combine with js.

<script>
   function playAudio(url) {
   new Audio(url).play();
 }
</script>

<p>
<font size="6" style="font-weight:bold;" onmouseover="this.style.color='red';" onmouseout="this.style.color='black';" onclick="playAudio('audio-1.mp3')">first-word</font>
        
<font size="6" style="font-weight:bold;" onmouseover="this.style.color='red';" onmouseout="this.style.color='black';" onclick="playAudio('audio-2.mp3')">second-word</font>
                
<font size="6" style="font-weight:bold;" onmouseover="this.style.color='red';" onmouseout="this.style.color='black';" onclick="playAudio('audio-3.mp3')">third-word</font>
</p>

Answer 1

I'm not sure whether you are trying to accomplish something like this. I you are using Twitter Bootstrap its simple(rather than creating your own popups)

Here is a sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/css/bootstrap.min.css" integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<style>
.para font{position:relative; cursor:pointer}
.para font:hover{color:red;}
</style>
<body>

<p class="para">
    <font size="6" data-word="First Word" data-audio="https://pagalnew.com/mp3-songs/english-mp3-songs/breaking-the-rules-jubin-nautiyal-128-kbps-sound.mp3" data-content="Lorem Ipsum">first-word</font>
    <font size="6" data-word="Second Word" data-audio="https://naijamusics.com/wp-content/uploads/2022/05/Imagine-Dragons-Believer.mp3" data-content="Lorem Ipsum 2">second-word</font>           
    <font size="6" data-word="Third Word" data-audio="https://www.fcsongs.com/uploads/audio/Ricky%20Martin%20-%20The%20Cup%20Of%20Life.mp3" data-content="Lorem Ipsum 3">third-word</font>
</p>

<div class="modal" id="AudioPlayer" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <audio id="player" controls style="width:100%">
          <source id="audioSrc" src="" type="audio/mpeg">
          Your browser does not support the audio element.
        </audio>

      </div>
    </div>
  </div>
</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/js/bootstrap.bundle.min.js" integrity="sha512-iceXjjbmB2rwoX93Ka6HAHP+B76IY1z0o3h+N1PeDtRSsyeetU3/0QKJqGyPJcX63zysNehggFwMC/bi7dvMig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<script type="text/javascript">

    $(".para font").popover({
        trigger : 'hover',
        placement : 'auto',
        boundary : "viewport"
    });
    
    $('.para font').on("click",function(){
        var title = $(this).data("word");
        var audioURL = $(this).data("audio");
        $("#AudioPlayer .modal-title").html(title);
        $("#AudioPlayer").modal();
        var audio = $("#player");
        $("#player #audioSrc").attr('src',audioURL);
        audio[0].load();
        audio[0].oncanplaythrough = audio[0].play();
    });
    
    $('#AudioPlayer').on('hidden.bs.modal', function (e) {
      $('audio').each(function(){
        this.pause();
        this.currentTime = 0;
      }); 
    })
    
</script>

</body>
</html>

Here is a fiddle

after one word is clicked then popup explains it, changes text color to red onmouseover, then changes color back to black onmouseout

Question

1 answers

solution1
0 2022-07-10 23:04:39

after one word is clicked then popup explains it, changes text color to red onmouseover, then changes color back to black onmouseout

Question

1 answers

solution1 0 2022-07-10 23:04:39

solution1
0 2022-07-10 23:04:39