javascript - Is it possible to define an image map area by radial coordinates? -

-

i familiar online imagemap generators use in html pages. convenient when creating rectangular or circular areas.

however, if area pie-shaped, makes things little more complicated. example, if have shape , wanted make each pie slice separate area, image map code looks when use online imagemap generator.

<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>

pie chart

this downside when you're using rectangular coordinates on circular shape: takes more points define pie slice need radial coordinates. example define pie slice (center x, center y, radius, angle start, angle end).

is there way define area radial coordinates, or not possible in html? read shape="circle" used genuine circle , not parts of circle.

i'm prepared accept answer of, "no it's not possible in html." if case, there alternate means of achieving same result on html page?

do need use image map. can use point.events in highchart settings detect click , redirect user window.location. wrote code output console onclick instead of redirecting. (sorry elaborate demo, picked 1 of highchart demos instead of starting scratch.)

$(function() {    $('#container').highcharts({      chart: {        plotbackgroundcolor: null,        plotborderwidth: null,        plotshadow: false,        type: 'pie'      },      title: {        text: 'browser market shares january, 2015 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>


Comments

Post a Comment

Popular posts from this blog

ruby - Trying to change last to "x"s to 23 -

-
i have been playing around irb , have string looks this: irb(main):072:0> puts ["[\"4354 5432 5432 xxxxx\", \"6547 6547 8543 xxxxx\", \"2344 6543 6674 xxxxx\", \"2346 6236 7543 xxxxx\", \"1273 5585 5587 xxxxx\"]"] => nil irb(main):073:0> what want gsub last 2 "x" s of each 17 digit combination, 23 . what i've tried far (i've been using rubular): a.gsub(/\d[x]/,"23") <= grabs "x" s i'm close a.gsub(/\w[x{2}]/,"23") <= grabs "x" s grabs two digits each combination. is there easier way i'm not understanding? a.gsub(/\d{4} \d{4} \d{4} xxx\kxx/, '23') \d{4} = 4 digits what \k drop matched far. can use don't replace entire number, still able validate have in desired format.
Read more

jquery - Clone last and append item to closest class -

-
this bare-bones code on page: <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <di
Read more

c - Unrecognised emulation mode: elf_i386 on MinGW32 -

-
i'm trying make kernel, , cannot link c output assembly. ld . i'm getting error: unrecognized emulation mode: elf_i386 i'm using windows 10 professional mingw32 , msys. code using: link.ld /* * link.ld */ output_format(elf32-i386) entry(start) sections { . = 0x100000; .text : { *(.text) } .data : { *(.data) } .bss : { *(.bss) } } kernel.c /* * kernel.c */ void kmain(void) { const char *str = "my first kernel"; char *vidptr = (char*)0xb8000; //video mem begins here. unsigned int = 0; unsigned int j = 0; /* loops clears screen * there 25 lines each of 80 columns; each element takes 2 bytes */ while(j < 80 * 25 * 2) { /* blank character */ vidptr[j] = ' '; /* attribute-byte - light grey on black screen */ vidptr[j+1] = 0x07; j = j + 2; } j = 0; /* loop writes string video memory */ while(str[j] != '\0') { /
Read more