Adjusting clickable area

[asasass]

If it can’t be done, that’s ok.

I just made the background smaller now.

Edit fiddle - JSFiddle - Code Playground

[Paul_Wilkins]

**[quote=“asasass, post:21, topic:279669, full:true”]
If it can’t be done, that’s ok.

I just made the background smaller now.
[/quote]

I’ll give up on helping further with this then.

[asasass]

That’s fine.

[Paul_Wilkins]

@asasass

That’s fine.

In case you’re interested in how this is done though, the onclick code currently on the playbutton div should only run when the click is on the wheel. Being sensible to your limitations, I’ve placed the script inside of script tags at the end of the HTML code.

Currently, the isOnWheel() function always returns true, to help us test that the playButton script still works after moving things around.

<script>
function togglePlay() {
  var button = document.getElementById('playButton2');
  var player = document.getElementById('player2');
  ...
}
function isOnWheel() {
  return true;
}
document.querySelector("#playButton2").addEventListener("click", function (evt) {
  if (isOnWheel() {
  	togglePlay();
  }
});
</script>

The isOnWheel function needs to know about the playButton container, and the x/y coords of the mouse.

  var playButton = this;
  if (isOnWheel(playButton, evt.x, evt.y) {
  	togglePlay();
  }

We can now get the center coordinates of the playButton, which is what we’ll be comparing with the mouse coordinates.

function isOnWheel(container, x, y) {
  var bounds = container.getBoundingClientRect();
  var xCenter = bounds.width / 2 + bounds.left;
  var yCenter = bounds.height / 2 + bounds.top;
  var distanceFromCentre = dist(xCenter, yCenter, x, y);
  ...
}

The dist() function just uses the pythagoras theorem of sqrt(x^2 + y^2) to give the distance between two points.

function dist(x1, y1, x2, y2) {
  var x = x2 - x1;
  var y = y2 - y1;
  return Math.sqrt((x * x + y * y));
}

Now that we’ve got the distance of the mouse cursor from the center, we can figure out if the mouse is on the wheel.

function isOnWheel(container, x, y) {
  ...
  var distanceFromCentre = dist(xCenter, yCenter, x, y);
  var wheelWidth = container.querySelector("image").getAttribute("width");
  return distanceFromCentre <= wheelWidth / 2;
}

And the click now only triggers play when you click on the wheel.

We can help to make this clearer though to the user, by changing the mouse pointer when you move over the wheel.
Remove the cursor style from the element, because we’re going to control that from scripting instead.

<div id="playButton2" style="... width: 260px; height: 260px">

We can now add an event listener on the mousemove event.

document.querySelector("#playButton2").addEventListener("mousemove", function (evt) {
  ...
});

We can make a similar check with the isOnWheel()function, to determine if the pointer, or the default mouse icon is shown instead.

document.querySelector("#playButton2").addEventListener("mousemove", function (evt) {
  var playButton = this;
  if (isOnWheel(playButton, evt.x, evt.y)) {
    evt.target.style.cursor = "pointer";
  } else {
    evt.target.style.cursor = "default";
  }
});

Here’s the full thing in action - https://jsfiddle.net/f7u38uds/6/