var $btn = $('button');
var ins = 'inside_area_';
var thr = 'threepoint_area_';
var selIns = 'select_' + ins;
var selThr = 'select_' + thr;
var score = {home: 0, away: 0};
[[ins, selIns], [thr, selThr]].forEach(function(areas) {
['a', 'b'].forEach(function(side) {
$('#' + areas[1] + side).hover(
function() {$('#' + areas[0] + side).css('fill', '#1abc9c' );},
function() {$('#' + areas[0] + side).css('fill', 'transparent');}
);
$('#' + areas[1] + side).click(basketballShotHandler);
});
});
function basketballShotHandler(evt) {
areaClicked = evt.target.id;
var team, pts;
switch (areaClicked) {
case 'select_inside_area_a': team = 'home'; pts = 2; break;
case 'select_threepoint_area_a': team = 'home'; pts = 3; break;
case 'select_inside_area_b': team = 'away'; pts = 2; break;
case 'select_threepoint_area_b': team = 'away'; pts = 3; break;
}
score[team] += pts;
$('#homeScore').text(score.home);
$('#awayScore').text(score.away);
}
$btn.click(function(e) {
var currentSide, opposingSide;
switch (e.target.innerText) {
case 'Home':
currentSide = 'a';
opposingSide = 'b';
break;
case 'Away':
currentSide = 'b';
opposingSide = 'a';
break;
}
$('#' + selIns + currentSide).css('visibility', 'visible');
$('#' + selThr + currentSide).css('visibility', 'visible');
$('#' + selIns + opposingSide).css('visibility', 'hidden');
$('#' + selThr + opposingSide).css('visibility', 'hidden');
});
svg {
height: 100%;
}
.st0 {
fill: none;
stroke: #010101;
stroke-width: 3;
}
.st1 {
fill: transparent;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="home">Home</button>
<button id="away">Away</button>
<span>Home: <span id="homeScore">0</span> Away: <span id="awayScore">0</span></span>
<div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 435.7 234.4" style="enable-background:new 0 0 435.7 234.4;" xml:space="preserve">
<rect id="XMLID_28_" x="5.2" y="24.3" class="st0" width="0" height="186.7" />
<path id="threepoint_area_a" class="st0" d="M5.3,24L5.3,24l0-0.7L5.3,24h23.9c52.4,0,94.9,41.8,94.9,93.4s-42.5,93.4-94.9,93.4H5.3 v0.6l0-0.6v18.7h425.4V5.3H5.3V24z" />
<path id="threepoint_area_b" class="st0" d="M430.4,210.4L430.4,210.4l0,0.7L430.4,210.4h-23.9c-52.4,0-94.9-41.8-94.9-93.4 s42.5-93.4,94.9-93.4h23.9V23l0,0.6V5H5v224.1h425.4V210.4L430.4,210.4z" />
<path id="inside_area_a" class="st0" d="M29.1,211c52.4,0,94.9-41.8,94.9-93.4S81.5,24.3,29.1,24.3H5.2V211H29.1z" />
<path id="inside_area_b" class="st0" d="M430.5,23.6v188.1V211h-23.9c-52.4,0-94.9-41.8-94.9-93.4s42.5-93.4,94.9-93.4h23.9" />
<line id="center_line" class="st0" x1="217.8" y1="231.9" x2="217.8" y2="3.4" />
<ellipse id="center_circle" class="st0" cx="217.8" cy="117.6" rx="27.3" ry="26.9" />
<line id="freethrow_line_a" class="st0" x1="93.3" y1="144.5" x2="93.3" y2="90.8" />
<line id="freethrow_line_b" class="st0" x1="342.4" y1="144.5" x2="342.4" y2="90.8" />
<path id="freethrow_circle_a" class="st0" d="M93.3,90.8c15.1,0,27.3,12,27.3,26.9s-12.2,26.9-27.3,26.9" />
<path id="freethrow_circle_b" class="st0" d="M342.4,144.5c-15.1,0-27.3-12-27.3-26.9s12.2-26.9,27.3-26.9" />
<line id="freethrow_lane_line_a_left" class="st0" x1="93.3" y1="144.5" x2="4.6" y2="144.9" />
<line id="freethrow_lane_line_a_right_dashes" class="st0" x1="4.4" y1="90.8" x2="93.8" y2="90.8" />
<line id="freethrow_lane_line_b_left_dashes" class="st0" x1="431.1" y1="144.5" x2="342" y2="144.5" />
<line id="freethrow_lane_line_b_right_dashes" class="st0" x1="430.6" y1="90.8" x2="342.2" y2="90.8" />
<line id="basket_board_a" class="st0" x1="23.4" y1="131.1" x2="23.4" y2="104.2" />
<line id="basket_board_b" class="st0" x1="412.3" y1="131.1" x2="412.3" y2="104.2" />
<line id="basket_holder_a" class="st0" x1="23.4" y1="117.6" x2="27.9" y2="117.6" />
<line id="basket_holder_b" class="st0" x1="412.3" y1="117.6" x2="407.7" y2="117.6" />
<ellipse id="XMLID_27_" class="st0" cx="31.7" cy="117.6" rx="3.8" ry="3.7" />
<ellipse id="basket_b" class="st0" cx="403.9" cy="117.6" rx="3.8" ry="3.7" />
<path id="select_inside_area_a" class="st1" d="M29.1,211c52.4,0,94.9-41.8,94.9-93.4S81.5,24.3,29.1,24.3H5.2V211H29.1z" />
<path id="select_threepoint_area_a" class="st1" d="M5.3,24L5.3,24l0-0.7L5.3,24h23.9c52.4,0,94.9,41.8,94.9,93.4s-42.5,93.4-94.9,93.4H5.3
v0.6l0-0.6v18.7h425.4V5.3H5.3V24z" />
<path id="select_inside_area_b" class="st1" d="M430.5,23.6v188.1V211h-23.9c-52.4,0-94.9-41.8-94.9-93.4s42.5-93.4,94.9-93.4h23.9" />
<path id="select_threepoint_area_b" class="st1" d="M430.4,210.4L430.4,210.4l0,0.7L430.4,210.4h-23.9c-52.4,0-94.9-41.8-94.9-93.4
s42.5-93.4,94.9-93.4h23.9V23l0,0.6V5H5v224.1h425.4V210.4L430.4,210.4z" />
</svg>
</div>