Home/ Questions/Q 8995417
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T23:37:03+00:00

I’m making an interactive world map gif, using javascript and html5, here is my

  • 0

I’m making an interactive world map gif, using javascript and html5, here is my code so far:

<!DOCTYPE html>
<html> 
<head>
    <title>World Map</title>
    <body>
<p>Click on a clickable area of the map for more info.</p>
<img src ="worldmap.gif" width="576" height="307" alt="World Map" usemap="#worldmap">

<map name="worldmap">
<area shape="rect" coords="265,49,279,64" href="

but now I’m stuck, firstly i want to know how to link to a video within the html5 video tags, upon the clicking of the linked coordinates, and also how to set javascript parameters within this, such as swapping videos etc. I have the code to be able to do the swap with the videos once the link is clicked, and I have the code to do the coordinates, I just don’t know how to put it together.

Thanks so much for you help, but want to keep it super simple using the method i’ve done and kind of understand (if it works) here is my super simple code

<!DOCTYPE html>
<html> 
<head>
    <title>World Map</title>
    <body>
<p>Click on a clickable area of the map for more info.</p>
<img src ="worldmap.gif" width="576" height="307" alt="World Map" usemap="#worldmap">

<map name="worldmap">
<area shape="rect" coords="265,49,279,64" <video src="ukanthem.mp4"></video>
</map>

</body>
</head>
</html>

the map opens on the page, but the clickable area does not appear to be there?

UPDATE:
So the coordinates still don’t work, there is no area to click
also the video’s appear on the same page as my map, I would like them on a seperate page, any help? also the video’s aren’t recognised, it says “video cannot be found, may have been removed from the server. http 404”

World Map

Click on a clickable area of the map for more info.

<map name="worldmap">

<area shape="rect" coords="265,49,279,64" onclick="playVideo()"> 
<video id="video1" class="true" autoplay controls width="420">
<source src="ukanthem.mp4" type="video/mp4">
<source src="ukanthem.mp4" type="video/ogg">
</video>
<video id="video2" class=flase" width="420" controls>
<source src="beef.mp4">
</video>
<button id="hideButton" onclick="swap();">Switch</button>


<script>
var flag=true;
function swap() {
var myVideo1=document.getElementById("Video1");
var myVideo2=document.getElementById("video2");
flag=!flag;
video1.setAttribute("class", flag);
video2.setAttribute("class", !flag);
if (flag) {
    video2.pause();
    video1.play();
} else {
    video1.pause();
    video2.play();
}
}
</script>


</map>

</body>
</head>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Look at my code again please 🙂

    Ok super simple.

    You can put an Onclick action to your area tag.

    Like this.

    <area .... onclick="playVideo()">

    And for your HTML 5 video tag…

    <video id="video1" width="420">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

    And a Javascript to do things for you:
    This part is for the normal HEAD HTML tag <——-

    <script>
function playVideo() {
  var myVideo=document.getElementById("video1"); 
  myVideo.play(); 
}
</script>

    If you want it super easy this is super easy, and i havent used any jquery, or new stuff. Let me know how it goes 🙂

    • 0