Can an image map area be identified using radial coordinates?

Question

Can an image map area be identified using radial coordinates?

While I have experience with online Imagemap Generators for rectangular or circular areas in HTML pages, things get a bit tricky when dealing with pie-shaped sections. When trying to make each pie slice a separate area, the image map code generated by these tools can be complex.

<img src="url/to/your/image.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="Slice1" title="Slice1" href="#" shape="poly" coords="149,2,146,294,40,250,4,172,14,85,73,23" />
    <area alt="Slice2" title="Slice2" href="#" shape="poly" coords="153,1,251,38,286,86,299,148,287,207,244,264,206,283,155,295" />
</map>

https://i.sstatic.net/IHVcV.png

It becomes evident that using rectangular coordinates on a circular shape requires more points to define a pie slice than radial coordinates would. Radial coordinates, such as (center x, center y, radius, angle start, angle end), could simplify this process.

I wonder if it's possible to define an area with radial coordinates in HTML, given that shape="circle" is typically reserved for complete circles and not segments.

If it turns out that using radial coordinates is not feasible in HTML, I'd like to explore alternative methods of achieving a similar outcome on an HTML page.

javascript html css highcharts

Answer 1

Answer №1

Are you considering using an image map? Instead, you can utilize point.events within the highchart configurations to identify clicks and redirect users using window.location. I have created code that logs output to the console upon click instead of immediate redirection. (I chose to demonstrate this with a pre-existing highchart demo rather than creating one from scratch.)

$(function() {
  $('#container').highcharts({
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'pie'
    },
    title: {
      text: 'Browser market shares January, 2015 to May, 2015'
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true,
          format: '<b>{point.name}</b>: {point.percentage:.1f} %',
          style: {
            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
          }
        }
      }
    },
    series: [{
      name: 'Brands',
      point: {
        events: {
          click: function() {
            //location.href = this.options.url;
            console.log(this.options.url);
          }
        }
      },
      colorByPoint: true,
      data: [{
        name: 'Microsoft Internet Explorer',
        y: 56.33,
        url: "http://www.example.com/ie"
      }, {
        name: 'Chrome',
        y: 24.03,
        sliced: true,
        selected: true,
        url: "http://www.example.com/chrome"
      }, {
        name: 'Firefox',
        y: 10.38,
        url: "http://www.example.com/firefox"
      }, {
        name: 'Safari',
        y: 4.77,
        url: "http://www.example.com/safari"
      }, {
        name: 'Opera',
        y: 0.91,
        url: "http://www.example.com/opera"
      }, {
        name: 'Proprietary or Undetectable',
        y: 0.2,
        url: "http://www.example.com/other"
      }]
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

Answer 2

Are you considering using an image map? Instead, you can utilize point.events within the highchart configurations to identify clicks and redirect users using window.location. I have created code that logs output to the console upon click instead of immediate redirection. (I chose to demonstrate this with a pre-existing highchart demo rather than creating one from scratch.)

$(function() {
  $('#container').highcharts({
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'pie'
    },
    title: {
      text: 'Browser market shares January, 2015 to May, 2015'
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true,
          format: '<b>{point.name}</b>: {point.percentage:.1f} %',
          style: {
            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
          }
        }
      }
    },
    series: [{
      name: 'Brands',
      point: {
        events: {
          click: function() {
            //location.href = this.options.url;
            console.log(this.options.url);
          }
        }
      },
      colorByPoint: true,
      data: [{
        name: 'Microsoft Internet Explorer',
        y: 56.33,
        url: "http://www.example.com/ie"
      }, {
        name: 'Chrome',
        y: 24.03,
        sliced: true,
        selected: true,
        url: "http://www.example.com/chrome"
      }, {
        name: 'Firefox',
        y: 10.38,
        url: "http://www.example.com/firefox"
      }, {
        name: 'Safari',
        y: 4.77,
        url: "http://www.example.com/safari"
      }, {
        name: 'Opera',
        y: 0.91,
        url: "http://www.example.com/opera"
      }, {
        name: 'Proprietary or Undetectable',
        y: 0.2,
        url: "http://www.example.com/other"
      }]
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

Answer 3

Answer №2

This code snippet defines a pie-slice area and uses jQuery to convert it into the poly-format.

Check out this demo on jsfiddle

<!-- Defining a pie-slice,
centered at {x:150, y:150}
with a radius of 150px
startangle: 0°
turning 180° clockwise -->
<area alt="Slice1" title="Slice1" href="#right" shape="pie" coords="150,150,150,0,180" />

Answer 4

This code snippet defines a pie-slice area and uses jQuery to convert it into the poly-format.

Check out this demo on jsfiddle

<!-- Defining a pie-slice,
centered at {x:150, y:150}
with a radius of 150px
startangle: 0°
turning 180° clockwise -->
<area alt="Slice1" title="Slice1" href="#right" shape="pie" coords="150,150,150,0,180" />

Can an image map area be identified using radial coordinates?

Answer №1

Answer №2

Similar questions

Problem with Bootstrap-slider not loading correctly

Utilizing the reduce method to transform an array containing nested arrays into a different structure

What is the process of invoking Link manually in React-router?

The transparency of the TABLE must only be applied to a specific section

How can I remove the script from Response.Write?

Positioning customized data on the doughnut chart within chart.js

How to Save Checkbox Selections in the Order They Were Clicked Using PHP

Is there a way to automatically update the input value when I refresh the page following a click event?

Having trouble targeting a div with jQuery

Discover captivating visuals that effortlessly occupy the entire breadth, while gracefully encompassing a mere quarter of the total vertical space on the

Adjusting Media Queries according to the browser window's zoom level

After pressing the ASP.NET button, the JavaScript function is called followed by the C# function being executed

What is the best way to display a poster image in a video element even if the aspect ratio of the poster image does not match the video element?

Expressing the power of multiple nested routers

What is the reason behind the Typescript compiler not converting .ts files to .js files automatically?

Set the current time to ISO8601 format

Load external JSON file using THREE.JSONLoader (excluding models)

Tips for positioning buttons using HTML and CSS

Achieve hidden and visible elements using CSS without redundancy

Leverage the power of Angular's route resolve function