Adjusting clickable area

JavaScript
1

If I would only want the window image to be clickable, how would I set that up?

Would there be a lot involved in doing that?

<style>
  .button div {
    width: 38px;
    height: 38px;
    top: 109px;
    left: 111px;
    background-color: black;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    box-Shadow: inset 0 0 0 2px lime;
    position: absolute;
  }
  
  image {
    transform: translate(40px, 40px);
  }

</style>

<div id="playButton2" style="position:relative;border: 3px solid #0059dd;background-color:black;width: 260px; height: 260px;cursor: pointer;" onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
button.querySelector('.play').style.display='none';
button.querySelector('.pause').style.display='none';
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
player.play();
} else {
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

  <svg width="260" height="260" style="position: absolute; ">

    <defs>
      <clipPath id="circleView">
        <circle cx="90" cy="90" r="85" fill="orange" />
      </clipPath>
    </defs>

    <image width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />

    <image width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />

    <svg width="260" height="260">
      <defs>
        <linearGradient id="MyGradient">
          <stop offset="0%" stop-color="transparent" />
          <stop offset="33%" stop-color="transparent" />
          <stop offset="33%" stop-color="#0059dd" />
          <stop offset="34.2%" stop-color="#0059dd" />
          <stop offset="34.2%" stop-color="transparent" />
          <stop offset="68%" stop-color="transparent" />
          <stop offset="68%" stop-color="#0059dd" />
          <stop offset="69.2%" stop-color="#0059dd" />
          <stop offset="69.2%" stop-color="transparent" />
          <stop offset="102%" stop-color="transparent" />
        </linearGradient>
      </defs>

      <rect fill="url(#MyGradient)" x="0" y="0" width="260" height="260" />

    </svg>

  </svg>
2

What do you consider to be the window image? The window glass area between the wooden struts?

3

The 180 by 180 image.
Wooden frame.

4

The wooden frame but not the window glass area?

5

The whole 180 x 180 structure, window included.

6

I was thinking something like adding style="width:180px; on something would do it.

But I’m probably wrong about that.

7

Does that include the black background too?

8

I only want this to be clickable:

9

How about the blue vertical lines overlayed on top of it. Do you want those to be clickable too?

10

Anything within the 180 x 180 area.

If the line over it, make that part clickable too.

11

Do you want the play button inside of the green circle to be triggered by any click on the frame?
Or is the frame click to be different from the play button click?

12

Yes.

13

Okay - now that your requirements are known, you are in a better position for people to be able to help you.

1 Like
14

As it’s a circle, one good solution is to get the click coordinates distance from the centre of the frame. If the distance is further than half the width, then they have clicked outside of the frame.

15

That would be the radius of the black circle:

  <svg width="180" height="180" style="">
        <circle cx="90" cy="90" r="89" fill="black" />
    <image width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />
     
    </svg>

Will that work?

16

Events won’t fire on those elements because the gradient with the blue stripes is in front of everything else, and is what captures the click event.

Do you mind if bad techniques are used, and the 180 size is hardcoded in to the script?

17

I don’t even know what that means.

You can do whatever you think will work best.

18

Okay, let’s put it another way.

The transparent parts of the gradient overlay still capture the click events, even though they are transparent.
The wooden frame cannot itself capture click events.

19

So, then it won’t work is what you’re saying.

20

Other techniques can be used, and are being explored.