Search code examples
javascripthtmlcssimagelimit

Limit image inside specific area in HTML

I have a code that pastes an image over another and increases the size of the image on up arrow key press and vice versa on down arrow key press.

Here is my code:

<!DOCTYPE html>
<html>
<body>

<img id="imgdisplay" width=960 height=540 src="../static/black_background.png" onclick="clickEvent(event);">

<img id="circle" src="../Different Sizes/red_circle_80.png" style="display:none;" onclick="clickEvent(event);">

<p id='X'>0</p>
<p id='Y'>0</p>

<script>
    var size = 80;
</script>

<script>
var x = 0;
var y = 0;
function clickEvent(event) {
    var thecircle = document.getElementById('circle');
    x = event.clientX
    y = event.clientY
    document.getElementById('X').innerHTML = '' + x;
    document.getElementById('Y').innerHTML = '' + y;
    var pastex = x - (circle.width / 2);
    var pastey = y - (circle.height / 2);
    thecircle.style = `position: absolute; top: ${pastey}px; left: ${pastex}px; display: block; overflow: hidden;`;
}
</script>

<script>
document.onkeydown = function(event) {
    var thecircle = document.getElementById('circle');
    event = event || window.event;
    if (event.keyCode == 38) {
        size += 100;
        thecircle.src = `../Different Sizes/red_circle_${size}.png`;
        clickEvent({'clientX': x, 'clientY' : y})
    } else if (event.keyCode == 40) {
        size -= 100;
        thecircle.src = `../Different Sizes/red_circle_${size}.png`;
        clickEvent({'clientX': x, 'clientY' : y})
    }
};
</script>

</body>
</html>

The problem is that if I click just on the border of the background image, the circle will overflow and half of the circle will stick out of the background. It sticks out much more when I click on the border and I click the up arrow on the keyboard multiple times to enlarge the circle.

How would I limit that the circle would not stick out of the background and not let the user to enlarge the circle if it's already almost sticking out of the background?

What I mean in images are.

What I currently have and it's not what I want:

What I want (to limit it to not stick out of the black background image):

How would I do this?

Any help appreciated!

Solution

  • Here's the solution I was talking about. The one drawback is this doesn't account for scrolling, but that should be a trivial fix if that is an issue for your case.

    var size = 80;

var x = 0;
var y = 0;
function clickEvent(event) {
    var thecircle = document.getElementById('circle');
    x = event.clientX
    y = event.clientY
    
    var box = document.getElementById('imgdisplay');
    
    if (x > box.x+box.width - circle.width / 2){
        x = box.x + box.width - circle.width / 2;
     }
      
    if (y > box.y + box.height - circle.width / 2){
        y = box.y+box.height - circle.width / 2;
    }
    
    if (x < box.x + circle.width/2)
      x = box.x + circle.width/2;
    
    if (y < box.y + circle.width/2)
      y = box.y + circle.width/2;
    
    document.getElementById('X').innerHTML = '' + x;
    document.getElementById('Y').innerHTML = '' + y;
    var pastex = x - (circle.width / 2);
    var pastey = y - (circle.height / 2);
    

    
    thecircle.style = `position: absolute; top: ${pastey}px; left: ${pastex}px; display: block; overflow: hidden;`;
}
    #imgdisplay{background:black}
#circle{width:80px;height:80px;background:red;border-radius:40px;}
    <img id="imgdisplay" width=500 height=300 src="../static/black_background.png" onclick="clickEvent(event);">

<img id="circle" src="../Different Sizes/red_circle_80.png" style="display:none;" onclick="clickEvent(event);">

<p id='X'>0</p>
<p id='Y'>0</p>