<script>
let x = 0, y = 0;
let normalImage = 'https://i.ibb.co/Ph9MCB2/template.png'
let zoomedImage = 'https://i.ibb.co/vhL5kH2/image-14.png'
let bg = normalImage;
function handleZoomEvent({clientX, clientY, type}) {
switch (type) {
case 'mouseenter':
x = -clientX
y = -clientY
bg = zoomedImage
break
case 'mouseleave':
x = 0;
y = 0;
bg = normalImage
break
case 'mousedown':
x = -clientX
y = -clientY
bg = zoomedImage
break
case 'mouseup':
x = 0;
y = 0;
bg = normalImage
break
}
}
</script>
<div class="container">
<div class="zoom-handler"
on:mouseenter={handleZoomEvent}
on:mouseleave={handleZoomEvent}