Playing audio without going to new web page using html image map

Question

Playing audio without going to new web page using html image map

35 views Asked by elfuegoeggo At 20 December 2023 at 15:24

I'm making an image map that uses game sound effects for each button on a picture of this . However each time I press a image map location to play a sound effect, it always results in me going to another web page to play the sound effect.

<!DOCTYPE HTML>
<html lang = "en">

<head>
<meta charset = "UTF-8">
<title>Jukebox Web Site</title>
</head>
<body>
<center>

<map name="image-map">
<img src="jukebox.png" usemap="#image-map">
    <area target="" alt="" title="1up" href="1up.mp3" coords="169,197,192,219" shape="rect">
    <area target="" alt="" title="Brick" href="brick.mp3" coords="199,199,222,221" shape="rect">
    <area target="" alt="" title="Coin" href="coin.mp3" coords="229,198,253,220" shape="rect">
    <area target="" alt="" title="flagpole" href="flagpole.mp3" coords="259,197,283,220" shape="rect">
    <area target="" alt="" title="gameover" href="gameover.mp3" coords="290,197,313,218" shape="rect">
    <area target="" alt="" title="kick" href="kick.mp3" coords="320,197,344,219" shape="rect">
</map>
</body>
</html>

Original Q&A

There are 1 answers

**Vladislav** · Accepted Answer · 2023-12-20T15:40:26+00:00

In the new audio object place a link to the audio or a path from the file

<!DOCTYPE HTML>
<html lang = "en">

<head>
<meta charset = "UTF-8">
<title>Jukebox Web Site</title>
</head>
<body>
<center>

<map name="image-map">
<img src="https://i.stack.imgur.com/wY3Gu.png" usemap="#image-map">
    <area target="" alt="" title="1up" onclick="new Audio('1up.mp3').play()" coords="169,197,192,219" shape="rect">
    <area target="" alt="" title="Brick" onclick="new Audio('brick.mp3').play()" coords="199,199,222,221" shape="rect">
    <area target="" alt="" title="Coin" onclick="new Audio('coin.mp3').play()" coords="229,198,253,220" shape="rect">
    <area target="" alt="" title="flagpole" onclick="new Audio('flagpole.mp3').play()" coords="259,197,283,220" shape="rect">
    <area target="" alt="" title="gameover" onclick="new Audio('gameover.mp3').play()" coords="290,197,313,218" shape="rect">
    <area target="" alt="" title="kick" onclick="new Audio('kick.mp3').play()" coords="320,197,344,219" shape="rect">
</map>
</body>
</html>

TechQA.

Playing audio without going to new web page using html image map

There are 1 answers

Related Questions in HTML

Related Questions in IMAGE

Related Questions in AUDIO

Related Questions in IMAGEMAP

Popular Questions

Popular Tags

Trending Questions