Image Map Help on Special Pages

[eagleeye401]

I wanted to create an image map and someone suggested to make a special page for it. My line of questioning about it is mainly about the function of when a user clicks on the set "polygon" wanting to make it pop up a rectangle or square below it showing the information of that shape. It's kind of hard to explain so I'm going to show you basically what I'm doing.

So I'm a huge fan of Call of Duty and wanted to start a site to find information about games I play. Tips I have etc. But I'm currently working on creating a battle pass page for each battle pass. Below I have a picture of the basic battle pass for the current season. (If the image is too small you can open the image on a new tab and it would be a lot more clear.

I created an outline so that I can kind of create my own image to use as a base image on any other battle passes that come that look like it which is now below here.

First thing after I input the data of the image for the image map using this code
$[zone_1]

<img src="https://i.imgur.com/uQGOngi.png" alt="BP" usemap="#BP">



<map name="BP">

<area shape="poly" coords="34, 726, 32, 734, 39, 739, 36, 749, 39, 755, 53, 755, 60, 762, 43, 761, 45, 765, 68, 766, 95, 790, 105, 788, 115, 796, 126, 791,130, 794, 138, 791, 158, 798, 4180, 788, 187, 793, 192, 790, 198, 795, 203, 792, 209, 795, 225, 788, 239, 798, 253, 788, 259, 793, 294, 774, 299, 777, 363, 756, 349, 756, 355, 750, 367, 750, 367, 735, 378, 729, 365, 715, 362, 719, 352, 715, 357, 710, 331, 710, 322, 698, 326, 692, 306, 682, 299, 675, 266, 678, 252, 673, 237, 674, 230, 670, 191, 673, 172, 682, 168, 675, 155, 669, 132, 669, 130, 676, 102, 679, 77, 693, 72, 708, 59, 710, 58, 720, 44, 726" alt="Instant" href="croissant.htm">


</map>The bunch of numbers are indicating the different points within the photo to create that "sector" clickable. and the "href="croissant.htm" is just a piece of the example I found on the internet. Now all I need help with doing is understanding how to use the "on-click" function that I found within the website and the coding is set as:
<map name="workmap">

<area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">

</map>



<script>

function myFunction() {

alert("You clicked the coffee cup!");

}

</script>So I was wondering if this function can be used to create the before explained. Basically when you click on the "sector" it would pop up a box under the "map" with a list of items within that "sector". When i say list I'm talking a list of pictures horizontally across the screen. But then when they click another "sector" it would close that box and open another box from the next sector. 

[Chris]

Oct 29, 2023 16:45:54 GMT -8 eagleeye401 said:

I wanted to create an image map and someone suggested to make a special page for it. My line of questioning about it is mainly about the function of when a user clicks on the set "polygon" wanting to make it pop up a rectangle or square below it showing the information of that shape. It's kind of hard to explain so I'm going to show you basically what I'm doing.

So I'm a huge fan of Call of Duty and wanted to start a site to find information about games I play. Tips I have etc. But I'm currently working on creating a battle pass page for each battle pass. Below I have a picture of the basic battle pass for the current season. (If the image is too small you can open the image on a new tab and it would be a lot more clear.

I created an outline so that I can kind of create my own image to use as a base image on any other battle passes that come that look like it which is now below here.

First thing after I input the data of the image for the image map using this code
$[zone_1]

<img src="https://i.imgur.com/uQGOngi.png" alt="BP" usemap="#BP">



<map name="BP">

<area shape="poly" coords="34, 726, 32, 734, 39, 739, 36, 749, 39, 755, 53, 755, 60, 762, 43, 761, 45, 765, 68, 766, 95, 790, 105, 788, 115, 796, 126, 791,130, 794, 138, 791, 158, 798, 4180, 788, 187, 793, 192, 790, 198, 795, 203, 792, 209, 795, 225, 788, 239, 798, 253, 788, 259, 793, 294, 774, 299, 777, 363, 756, 349, 756, 355, 750, 367, 750, 367, 735, 378, 729, 365, 715, 362, 719, 352, 715, 357, 710, 331, 710, 322, 698, 326, 692, 306, 682, 299, 675, 266, 678, 252, 673, 237, 674, 230, 670, 191, 673, 172, 682, 168, 675, 155, 669, 132, 669, 130, 676, 102, 679, 77, 693, 72, 708, 59, 710, 58, 720, 44, 726" alt="Instant" href="croissant.htm">


</map>The bunch of numbers are indicating the different points within the photo to create that "sector" clickable. and the "href="croissant.htm" is just a piece of the example I found on the internet. Now all I need help with doing is understanding how to use the "on-click" function that I found within the website and the coding is set as:
<map name="workmap">

<area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">

</map>



<script>

function myFunction() {

alert("You clicked the coffee cup!");

}

</script>So I was wondering if this function can be used to create the before explained. Basically when you click on the "sector" it would pop up a box under the "map" with a list of items within that "sector". When i say list I'm talking a list of pictures horizontally across the screen. But then when they click another "sector" it would close that box and open another box from the next sector. 

There are quite a few ways to attack this but here is one to get you started.

We will assume there will be a custom page for each map so that the data for each area can be defined within the page and remains static (no plugin necessary). 

Code:

<img src="https://i.imgur.com/uQGOngi.png" alt="BP" usemap="#BP" >



<map name="BP">

<area id="croissant" shape="poly" coords="34, 726, 32, 734, 39, 739, 36, 749, 39, 755, 53, 755, 60, 762, 43, 761, 45, 765, 68, 766, 95, 790, 105, 788, 115, 796, 126, 791,130, 794, 138, 791, 158, 798, 4180, 788, 187, 793, 192, 790, 198, 795, 203, 792, 209, 795, 225, 788, 239, 798, 253, 788, 259, 793, 294, 774, 299, 777, 363, 756, 349, 756, 355, 750, 367, 750, 367, 735, 378, 729, 365, 715, 362, 719, 352, 715, 357, 710, 331, 710, 322, 698, 326, 692, 306, 682, 299, 675, 266, 678, 252, 673, 237, 674, 230, 670, 191, 673, 172, 682, 168, 675, 155, 669, 132, 669, 130, 676, 102, 679, 77, 693, 72, 708, 59, 710, 58, 720, 44, 726" alt="Instant" href="croissant.htm">


</map>
<div id="mapInfo" style="display: flex;position: relative;bottom: 200px;"></div>

<script>
const MapData = [
{
id:"croissant",
content: '<img src="https://storage.proboards.com/forum/images/defaultavatar.png"> <img src="https://storage.proboards.com/1/avatar/hliKinDFffWQLQf0Bawm.png"> <img src="https://avatarfiles.alphacoders.com/263/thumb-263794.jpg">',

},
{
id: "bagel"
content: "blah"
}
];
MapData.forEach(function(e,i,a){
$(`#${e.id}`).on('click', function(event){
$('#mapInfo').html(e['content']);
event.preventDefault(); event.stopImmediatePropagation();
}).on('blur',event=>{$('#mapInfo').empty()})
})
</script>

The script contains a mapData array variable that holds a list of areas defined on the map and the data that should be displayed in that new div#mapInfo when that area is activated. Each <area> is also given an id so it can be easily referenced and that corresponding id is used in the data to tie that data to that specific area.

Results:

If you want users to interact with rather than just view the displayed data then a mechanism that flags when a user enters/hovers will be necessary to prevent the data from disappearing when the area blurs. Animations and positioning can be added after the fact once the basic functionality has been hammered out.