时间戳

首页 > 解决方案 > Onmouseover 为不同的图像映射播放不同的音频文件

javascript - Onmouseover 为不同的图像映射播放不同的音频文件

问题描述

我正在尝试制作一些东西，当您滚动图像的某个部分时，会使用 onmouseenter 和 onmouseleave 功能播放不同的歌曲。它适用于第一个图像映射，但由于某种原因，它不适用于第二个图像映射，尽管它几乎相同。我不明白我做错了什么。

<!DOCTYPE html>
<html>
    <body>
        <img src="Uclashoes.jpeg" alt="EmptyShoes" width="1423" height="818" usemap="#shoesmap">
    </body>
    <a onmouseenter="document.getElementById('audioIDNerine').play()"
    onmouseleave="document.getElementById('audioIDNerine').pause()">
        <map name="shoesmap">
            <area shape ="rect" coords="980,400,1070,450"/>
        </map>
    </a>
    <audio id="audioIDNerine">
        <source src="Nerine.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    <a onmouseenter="document.getElementById('audioIDAriya').play()" onmouseleave="document.getElementById('audioIDAriya').pause()">
        <map name="shoesmap">
            <area shape ="rect" coords="1170,644,1293,790"/>
        </map>
    </a>
    <audio id="audioIDAriya">
        <source src="Ariya.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
</html>

标签： javascripthtmlaudio

解决方案

欢迎

你需要多学习，呵呵，你有几个问题。首先，您的 HTML 结构错误，其次您重复了相同的地图，我知道不同的值但只需要一个。第三，地图上有一个 A 标签。好吧，我不想打扰你。

<!DOCTYPE html>
<html>
    <body>
        <img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" alt="EmptyShoes" width="1423" height="818" usemap="#shoesmap">
        <map name="shoesmap">
            <area shape="rect" coords="0,0,200,450" onmouseover="document.getElementById('audioIDNerine').play()" onmouseout="document.getElementById('audioIDNerine').pause()"/>
            <area shape="rect" coords="300,500,500,950" onmouseover="document.getElementById('audioIDAriya').play()" onmouseout="document.getElementById('audioIDAriya').pause()"/>
        </map>
        <audio id="audioIDNerine">
            <source src="https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-three/animals_alligator_hiss_002.mp3?_=1" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
        <audio id="audioIDAriya">
            <source src="https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-smartsound/smartsound_CARTOON_FX_Ricochet_Western.mp3?_=1" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
    </body>
</html>

在这里你有它的小提琴，它有两个地图区域和两个声音，加载时可能需要一些时间，但加载后它工作正常。

推荐阅读