Detect click on div background 30% resized

Question

I have a div with background 30% resized and a img sized 100%

I would like detect onclick only on the background resized div (purple in the picture below), not on all element

What is the best way?

Thank you in advance.

<div class="div1" style="width:600px; background:url(img/litlePict.png) no-repeat scroll center center / 30% auto">
    <img class="store" src="img/mypict.png" width="100%" />
</div>

UPDATE

This is what i would like do!

Answer 1

I didn't test this code, but it might give you a hint on how to achieve something like this!

$('.element').on('click', function (e) {
    var xPossition = $(this).position().left; // The distance between 'zero' and the left of the element on the X Axis
    var yPossition = $(this).position().top;  // The distance between 'zero' and the top of the element on the Y Axis
    var elemWidth  = $(this).width(); // The height of the element
    var elemHeight = $(this).height(); // The widthof the element

    var mouseX = e.pageX - xPossition; // The possition of the mouse on the X Axis of the screen removing the distance to the LEFT of the element clicked
    var mouseY = e.pageY - yPossition; // The possition of the mouse on the Y Axis of the screen removing the distance to the TOP of the element clicked

    // Check if the position of the mouse relative to the element is between the first 35% and the last 35% of the width and height of the element
    if ( (mouseX > elemWidth*0.35 && mouseX < elemWidth - elemWidth*0.35) && (mouseY > elemHeight*0.35 && mouseY < elemHeight - elemHeight*0.35) ) {
        // Do stuff
    }
});

Answer 2

I don't think it is possible to do so with so few HTML tags. You should rather get another div in the div1, and then play with z-index and event propagation.

Answer 3

You could do this computationally, getting the background-size dynamically and then applying it to the div. The contents of the div don't really matter in this case, so I left out the image.

// Get all the elements and apply the following code using an array forEach
Array.prototype.slice.call(document.querySelectorAll('.bg-click')).forEach(function(a){
  var bgsize = parseInt(a.style.backgroundSize, 10) / 100;
  a.addEventListener('click', function(e){
    // Get the current width and height (expected value in pixels)
    var w = parseInt(a.style.width, 10);
    var h = parseInt(a.style.height, 10);
    // If the x click is outside of the center, or the y click is
    // use preventDefault to stop the click.
    if(
      e.layerX < w / 2 - w * (bgsize / 2) 
      || e.layerX > w / 2 + w * (bgsize / 2)
      || e.layerY < h / 2 - h * (bgsize / 2) 
      || e.layerY > h / 2 + h * (bgsize / 2)
    ){
      e.preventDefault();
    } else {
    // Otherwise, execute this
      console.log('clicked in center');
      alert('clicked in center');
    }
  })
});

<div class="bg-click" style="background: url(http://placehold.it/200x200) 50% 50% no-repeat; width: 200px; height: 200px; background-size: 30% 30%;"></div>

Since you background isn't actually an element, you have to do the computation yourself, so why not try it with an actual element:

Array.prototype.slice.call(document.querySelectorAll('.bg')).forEach(function(a){
  a.addEventListener('click', function(){
    console.log('clicked');
    alert('clicked');
  })
})

.bg-holder {
  width: 200px;
  height: 200px;
  position: relative;
}
.bg-holder .bg {
  position: absolute;
  left: 50%;
  top: 50%%;
  width: 30%;
  height: 30%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  background: url(http://placehold.it/200x200);
}

<div class="bg-holder">
  <div class="bg"></div>
</div>

Answer 4

Put another div within the div1. Size and position this inner div in the place you want.

It will be transparent so the appearance won't be bothered. You can use 'onClick' on this div instead.