1

In my aspx page I have a map of different countries as an SVG object, and a checkbox for each country:

<object id="map" data="_images/map.svg" type="image/svg+xml"></object>
<asp:CheckBox ID="chkScotland" runat="server" />
<asp:Checkbox ID="chkEngland" runat="server"/>

The SVG was created in Adobe Illustrator. The polylines for each country are grouped (the shapes for each country were collected in a layer for that country in Illustrator) and the groups have the name of the country as their ID. Each group has an onclick event. 

<g id="Scotland" onclick="areaClick(evt)" >
   <polyline ...></g>

Now I need to toggle the checkbox for Scotland when the user clicks on its shape on the map. A bit of googling indicates that a script within the SVG file should do this.

My Javascript sucks. I can get the onclick event to fire, but I can't (1) get the id of the area that was clicked (varCountry = document.activeElement gives null) or (2) use it to toggle the checkbox for that country on the page (window.parent.document.chkScotland doesn't find the checkbox control)

Thanks, Xmas cheer, and kudos for any help!

htchmn
  • 13
  • 8
  • 1
    You want evt.targetElement rather than document.activeElement – Robert Longson Dec 19 '14 at 22:00
  • Thanks Robert. Any clue as to how to reference/update controls on the page containing the SVG object? – htchmn Dec 19 '14 at 22:51
  • 1
    https://jwatt.org/svg/demos/scripting-across-object.html – Robert Longson Dec 21 '14 at 14:36
  • I find event.target.id references the area with onclick="areaClick(evt)" when clicked (rather than evt.targetElement): function areaClick(evt) { alert(event.target.id);} – htchmn Dec 22 '14 at 10:46
  • Thanks again @RobertLongson. The jwatt.org link discusses fetching data from the object, but I need to send the data from the object to the page. Do you mean to fetch the data in response to an event listener on the page? Or is there a more direct method to post data from the object to the page directly (ie sent by the object in response to the click event within the object, rather than fetched by the page in response to an listened event on the page in response to the click event in the object). – htchmn Dec 22 '14 at 10:58

0 Answers0