Select image and magnify selected image - javascript

I am experimenting with images gallery as a tab and magnification.
Here is the current code I have.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.img-zoom-container {
position: relative;
width: 300px;
height: 300px;
}
.img-zoom-lens {
position: absolute;
width: 40px;
height: 40px;
}
.img-zoom-result {
width: 300px;
height: 300px;
}
#myimage:hover{
opacity: 0;
}
.tabcontent {
display: none;
}
</style>
<script>
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
/*create lens:*/
lens = document.createElement("DIV");
lens.setAttribute("class", "img-zoom-lens");
/*insert lens:*/
img.parentElement.insertBefore(lens, img);
/*calculate the ratio between result DIV and lens:*/
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
/*set background properties for the result DIV:*/
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
/*execute a function when someone moves the cursor over the image, or the lens:*/
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
/*and also for touch screens:*/
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
function moveLens(e) {
var pos, x, y;
/*prevent any other actions that may occur when moving over the image:*/
e.preventDefault();
/*get the cursor's x and y positions:*/
pos = getCursorPos(e);
/*calculate the position of the lens:*/
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
/*prevent the lens from being positioned outside the image:*/
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y < 0) {y = 0;}
/*set the position of the lens:*/
lens.style.left = x + "px";
lens.style.top = y + "px";
/*display what the lens "sees":*/
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
</script>
</head>
<body>
<div class="img-zoom-container">
<div id="myresult" class="img-zoom-result">
<div id="1" class="tabcontent">
<img id="myimage" src="cdn/images/products/1605983270.webp-300x300.webp" width="300px" height="300px">
</div>
<div id="2" class="tabcontent">
<img id="myimage2" src="cdn/images/products/1606254469.webp-300x300.webp" width="300px" height="300px">
</div>
<div id="3" class="tabcontent">
<img id="myimage3" src="cdn/images/products/1606251762.webp-300x300.webp" width="300px" height="300px">
</div>
</div>
</div>
<img onclick="openCity(event, '1')" id="defaultOpen" src="cdn/images/products/1605983270.webp-50x50.webp" width="50px" height="50px">
<img onclick="openCity(event, '2')" src="cdn/images/products/1606254469.webp-50x50.webp" width="50px" height="50px">
<img onclick="openCity(event, '3')" src="cdn/images/products/1606251762.webp-50x50.webp" width="50px" height="50px">
<script>
imageZoom("myimage", "myresult");
imageZoom("myimage2", "myresult");
imageZoom("myimage3", "myresult");
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
I can get either function but not both working at the same time.
I am trying to achieve the effect that I could simply hover over the current selected image to magnify.
My broken example can be found here.
https://smokeology.ca/test.html
What am I doing wrong?

This is my solution. Is this what you are looking for?
var images = document.querySelectorAll(".imgs");
let abc = document.getElementById("resultimage").src = images[0].src;
function selectIMG(id) {
var img = document.getElementById("img" + id).src;
document.getElementById("resultimage").src = img;
}
.img-zoom-container {
position: relative;
width: 300px;
height: 300px;
}
.img-zoom-lens {
position: absolute;
width: 40px;
height: 40px;
}
.img-zoom-result {
width: 300px;
height: 300px;
}
#resultimage {
transform-origin: 0 0;
transition: transform .25s, visibility .25s ease-in;
}
#resultimage:hover {
transform: scale(1.4);
}
<div class="img-zoom-container">
<div id="myresult" class="img-zoom-result">
<div id="1" class="tabcontent">
<img id="resultimage" src="https://i.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0" width="300px" height="300px">
</div>
</div>
</div>
<img id="img1" class="imgs" onclick="selectIMG('1')" src="https://i.picsum.photos/id/35/536/354.jpg?hmac=jp_Ypjavu2-qfJva-2dR-Mwusv5WWX1CqL5j_o0rPbg" width="50px" height="50px">
<img id="img2" class="imgs" onclick="selectIMG('2')" src="https://i.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0" width="50px" height="50px">
<img id="img3" class="imgs" onclick="selectIMG('3')" src="https://i.picsum.photos/id/302/536/354.jpg?hmac=TC5rkcbi3t6xjOKZygd2O51G1i9ascFddKoeTkPz6bw" width="50px" height="50px">
Fiddle code

Related

How to make divs inline (inline-block not working) for slider

I am trying to make a slider from div to div but the position of the div is always wrong I don't seem to manage to code it right to fix it in the right position, I have tried floats, inline everything but nothing seems to work. so the parent class is "products" the ensemble class is "product" and each div is "product-1, product-2 etc."
Here is the whole wesite from a to z.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Paritrāṇa Sari collection</title>
<script
src="jquery-3.5.1.min.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<!-- <script src="function.js"></script> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="normalize.css">
<style type="text/css">
* {
margin: 0;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
font-family: sans-serif;
box-sizing: border-box;
}
/*:root {
cursor: url(model.png), auto;
}*/
/*html {zoom: 160%;}*/
body {
background-color: #e4e0dd;
}
.wrapper {
margin: 0;
padding: 0;
display: inline-block;
}
#c {
display: block;
margin: 20px auto 0;
}
#info {
position: absolute;
left: -1px;
top: -1px;
width: auto;
max-width: 420px;
height: auto;
background: #f8f8f8;
border-bottom-right-radius: 10px;
border:1px solid #ccc;
}
#top {
/*background: #fff;*/
width: 100%;
height: auto;
position: relative;
/* border-bottom: 1px solid #eee;*/
}
p {
font-family: Arial, sans-serif;
color: #666;
text-align: justify;
font-size: 16px;
margin: 0px 16px;
}
.center {
text-align: center;
}
#net {
text-align:center;
white-space:nowrap;
font-size:19px;
background:rgba(0,0,0,0.1);
padding:8px 12px;
border-radius:8px;
display:block;
color:#888;
}
.bull {
opacity: 0.3;
margin: 0 6px;
font-size: 14px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-bottom: 1px solid black;
}
.column {
flex-basis: 100%;
border-right: 1px solid black;
padding-left: 5px;
}
.row_1 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.column_1 {
flex-basis: 100%;
}
#media screen and (min-width: 800px) {
.column {
flex: 1;
}
.column_1 {
flex: 1;
}
}
#media screen and (min-width: 800px) {
._25 {
flex: 1.5;
}
._55 {
flex: 7.5;
}
._20 {
flex: 2;
}
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: none;
color: white;
background: black;}
a:active {
text-decoration: none;
color: white;
background: black;
}
img {
text-align: center;
justify-content: center;
object-position: center;
top: 0;
left: 0;
width: 50%;
height: auto;
z-index: 1000;
}
.signupsubmit {
transform: rotateY(50deg) rotateX(50deg);
-webkit-transform: rotateY(50deg) rotateX(50deg);
transition: 1s;
}
.signupsubmit:hover {
-webkit-transform: rotateY(0deg) rotateX(0deg);
transform: rotateY(0deg) rotateX(0deg);
}
/*.active {
zoom: 160%;
}*/
body .cursor {
pointer-events: none;
}
body .cursor__ball {
position: fixed;
top: 0;
left: 0;
mix-blend-mode: difference;
z-index: 1000;
}
body .cursor__ball circle {
fill: #f7f8fa;
}
section {float: left;}
::selection {
background-color: rgba(0, 0, 0, 0.25);
color: white;
}
::-moz-selection {
background-color: rgba(0, 0, 0, 0.25);
color: white;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
a :hover {
z-index: 10000000;
}
.hidden {
/* display: none; */
opacity: 0;
}
/* */
.container {
position: absolute;
/* top: 50%;
left: 50%;
transform: translate(-50%, -50%);*/
/* width: 200vh;
height: 100vh;*/
/* background-color: aqua;*/
*/
overflow: hidden;
}
.products {
position: relative;
display: inline-block;
/* width: 1000%;
height: 100%;
left: 0%;
/* background-color: blueviolet;*/*/
transition: left .5s ease-in-out;
}
.product {
/* width: 70vh;
height: 100%;*/
float: left;
display: inline-block;
}
.product-1 {
/* background-color: beige;*/
}
.product-2 {
background-color: red;
}
.product-3 {
background-color: slategray;
}
.product-4 {
background-color: burlywood;
}
.buttonLeft, .buttonRight {
height: 100%;
width: 20%;
position: absolute;
background-color: red;
transition: opacity .5s ease-in-out;
top: 50px;
cursor: pointer;
z-index: 1;
}
.buttonLeft:hover, .buttonRight:hover {
opacity: 0.2;
}
.buttonLeft {
left: 0px;
cursor: w-resize;
}
.buttonRight {
right: 0px;
cursor: e-resize;
}
</style>
<script>
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
/*create lens:*/
lens = document.createElement("DIV");
lens.setAttribute("class", "img-zoom-lens");
/*insert lens:*/
img.parentElement.insertBefore(lens, img);
/*calculate the ratio between result DIV and lens:*/
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
/*set background properties for the result DIV:*/
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
/*execute a function when someone moves the cursor over the image, or the lens:*/
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
/*and also for touch screens:*/
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
function moveLens(e) {
var pos, x, y;
/*prevent any other actions that may occur when moving over the image:*/
e.preventDefault();
/*get the cursor's x and y positions:*/
pos = getCursorPos(e);
/*calculate the position of the lens:*/
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
/*prevent the lens from being positioned outside the image:*/
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y < 0) {y = 0;}
/*set the position of the lens:*/
lens.style.left = x + "px";
lens.style.top = y + "px";
/*display what the lens "sees":*/
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
</script>
</head>
<body>
<!-- cursor -->
<div class="cursor">
<div class="cursor__ball cursor__ball--big">
<svg height="60" width="60">
<circle cx="15" cy="15" r="16" stroke-width="0"></circle>
</svg>
</div>
<!-- small ball cursor -->
<div class="cursor__ball cursor__ball--small">
<svg height="10" width="10">
<circle cx="5" cy="5" r="4" stroke-width="0"></circle>
</svg>
</div>
</div>
<!-- cursor end -->
<!-- navigation -->
<nav>
<div class="row" style="background-color:white;">
<div class="column">
Paritrāṇa Sari collection
</div>
<div class="column">
Concept
</div>
<div class="column">
Process
</div>
</div>
<div class="row" style="background-color:white;">
<div class="column">
Red sari N°1
</div>
<div class="column">
Orange sari N°2
</div>
<div class="column">
Saffron sari N°3
</div>
<div class="column">
Yellow sari N°4
</div>
<div class="column">
Turmeric sari N°5
</div>
<div class="column">
Green sari N°6
</div>
<div class="column">
Blue sari N°7
</div>
<div class="column">
Pink sari N°8
</div>
<div class="column">
Black sari N°9
</div>
<div class="column">
White sariN°10
</div>
<div class="column">
Violet sari N°11
</div>
</div>
</nav>
<!-- navigation end -->
<!-- wrapper slider -->
<section class="container">
<div class="products">
<div class="wrapper product product-1">
<img src="./img.png" style="margin-top: -2000px; position: absolute;" />
<canvas
width="1900"
height="300"
style="margin-top: -2000px; position: absolute;"
></canvas>
<div class="row_1">
<!-- <div style="overflow:auto"> -->
<div class="column _25" style="overflow-y: auto;">
Project photoshoot
<div id="img1" class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div id="img1" class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div id="img1" class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
</div>
<div class="column _55">
<canvas id="c" width="800" height="376"> </canvas>
<div class="row_1">
<div class="column_1">
<div id="top">
<a id="close" href="">Reset tissue —</a>
</div>
</div>
<div class="column_1">
<div>
<p>This project is based on the red celebratory color………</p>
</div>
</div>
<div class="column_1">
<div style="background-color:red;height: 50px;width: 50px;"></div>
</div>
</div>
<div
class="column _20 signupsubmit"
style="border-top: 1px solid black;border-right: 0px;"
>
Red is a celebratory color. It commemorates a couple’s union. It
symbolizes love, sensuality, and passion. That’s why it features
prominently in auspicious occasions, such as weddings, festivals, and
births. As red also signifies chastity, it is the color of choice for
brides. After the wedding ceremony, the bride adopts a red spot on the
forehead called “bindi,” which cements her marital status. When she
dies, her family wraps her in red fabric for cremation. As red also
depicts dominance, it empowers the saree wearer and draws attention
toward her. It’s no surprise that extroverts and A-type personalities
prefer red. Pairing a red saree with a gold top amplifies the look. To
tone it down, use a silver blouse instead. Accessorize with silver or
gold jewelry. Red is associated with Durga, a Hindu goddess with a red
tongue, red eyes, and a blazing image. That’s why devotees use it
extensively in prayer rituals. Worshippers throw red powder on
deities’ statues during prayer ceremonies and phallic symbols because
red is the color of Kshatriya, the warrior caste. Designers dress
charitable, brave, and protective deities in red. Red also symbolizes
fertility and prosperity because it is the color of the clay that
produces spices and harvests, which in turn, improve lives.
</div>
</div>
</div>
</div>
<div class="wrapper product product-2" style="float: left;display: inline;clear: both;top: 0;position: absolute;">
<img src="./img2.png" style="margin-top: -2000px; position: absolute;" />
<canvas
width="1900"
height="300"
style="margin-top: -2000px; position: absolute;"
></canvas>
<div class="row_1">
<!-- <div style="overflow:auto"> -->
<div class="column _25" style="overflow-y: auto;">
Project photoshoot
<div id="img1" class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div id="img1" class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div id="img1" class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
</div>
<div class="column _55">
<canvas id="c" width="800" height="376"> </canvas>
<div class="row_1">
<div class="column_1">
<div id="top">
<a id="close" href="">Reset tissue —</a>
</div>
</div>
<div class="column_1">
<div>
<p>This project is based on the red celebratory color………</p>
</div>
</div>
<div class="column_1">
<div style="background-color:red;height: 50px;width: 50px;"></div>
</div>
</div>
<div
class="column _20 signupsubmit"
style="border-top: 1px solid black;border-right: 0px;"
>
Orange attracts attention and energy like the color red, except it’s more sedate. It signifies freshness and brightness. Not all skin tones can carry this color, but for those whose complexions can pull it off in their clothing, it helps put them in a sunny disposition.
According to CNN’s Colorscope report, a series exploring color perception across cultures, many Eastern religions consider orange a sacred color. In Hinduism, orange represents fire and virtuosity. That’s why their monks wear orange robes. Buddhist ones too.
</div>
</div>
</div>
</div>
</div>
<div class="hidden buttonLeft"></div>
<div class="hidden buttonRight"></div>
</section>
<!-- wrapper slider end -->
<!-- footer -->
<footer
style="position: fixed;bottom: 0;width: 100%;background-color: white;border-top:1px solid black;"
>
<div class="row">
<div class="column">©Copyright Angelo Barbattini</div>
<div class="column">ECAL 2022</div>
</div>
</footer>
<!-- footer end -->
<script type="text/javascript">
window.onload = function() {
}
var offsetProducts = 0;
var numberProducts = 2; //nombre de project -1, car on commence à compter à partir de 0
$(document).ready(function() {
console.log("ready!");
// $(".buttonLeft").on("click", function() {
// console.log(offsetProducts);
// if (offsetProducts > numberProducts * -100) offsetProducts = offsetProducts - 100;
// $(".products").css("left", offsetProducts + "%");
// });
// $(".buttonRight").on("click", function() {
// console.log("right Click");
// if (offsetProducts < 0) offsetProducts = offsetProducts + 100;
// $(".products").css("left", offsetProducts + "%");
// });
$(".buttonLeft").on("click", function() {
console.log(offsetProducts);
if (offsetProducts < 0) offsetProducts = offsetProducts + 100;
$(".products").css("left", offsetProducts + "%");
});
$(".buttonRight").on("click", function() {
console.log("right Click");
if (offsetProducts > numberProducts * -100) offsetProducts = offsetProducts - 100;
$(".products").css("left", offsetProducts + "%");
});
});
</script>
<script type="text/javascript">
const mycanvas = document.querySelector('canvas');
const mycontext = mycanvas.getContext('2d');
// settings
var physics_accuracy = 20,
mouse_influence = 10,
mouse_cut = 6,
gravity = 1200,
cloth_height = 40,
cloth_width = 120,
start_y = 10,
spacing = 7,
tear_distance = 60;
window.requestAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
var canvas,
ctx,
cloth,
boundsx,
boundsy,
mouse = {
down: false,
button: 1,
x: 0,
y: 0,
px: 0,
py: 0
};
window.onload = function() {
// ADDED TO BRING IN THE IMAGE
mycontext.clearRect(0, 0, mycanvas.width, mycanvas.height);
mycontext.drawImage(document.querySelector('img'), 0, 0, 1180, 376);
canvas = document.getElementById('c');
ctx = canvas.getContext('2d');
canvas.width = canvas.clientWidth;
canvas.height = 376;
canvas.onmousedown = function(e) {
mouse.button = e.which;
mouse.px = mouse.x;
mouse.py = mouse.y;
var rect = canvas.getBoundingClientRect();
mouse.x = e.clientX - rect.left,
mouse.y = e.clientY - rect.top,
mouse.down = true;
e.preventDefault();
};
canvas.onmouseup = function(e) {
mouse.down = false;
e.preventDefault();
};
canvas.onmousemove = function(e) {
mouse.px = mouse.x;
mouse.py = mouse.y;
var rect = canvas.getBoundingClientRect();
mouse.x = e.clientX - rect.left,
mouse.y = e.clientY - rect.top,
e.preventDefault();
};
canvas.oncontextmenu = function(e) {
e.preventDefault();
};
boundsx = canvas.width - 1;
boundsy = canvas.height - 1;
ctx.strokeStyle = 'rgba(222,222,222,0.6)';
ctx.strokeStyle = 'magenta';
cloth = new Cloth();
update();
};
var Point = function(x, y) {
this.x = x;
this.y = y;
this.px = x;
this.py = y;
this.vx = 0;
this.vy = 0;
this.pin_x = null;
this.pin_y = null;
this.constraints = [];
//added - remember where this point was originally so we can get the right bit of the img
this.origx = x;
this.origy = y;
};
Point.prototype.update = function(delta) {
if (mouse.down) {
var diff_x = this.x - mouse.x,
diff_y = this.y - mouse.y,
dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y);
if (mouse.button == 1) {
if (dist < mouse_influence) {
this.px = this.x - (mouse.x - mouse.px) * 1.8;
this.py = this.y - (mouse.y - mouse.py) * 1.8;
}
} else if (dist < mouse_cut) this.constraints = [];
}
this.add_force(0, gravity);
delta *= delta;
nx = this.x + ((this.x - this.px) * .99) + ((this.vx / 2) * delta);
ny = this.y + ((this.y - this.py) * .99) + ((this.vy / 2) * delta);
this.px = this.x;
this.py = this.y;
this.x = nx;
this.y = ny;
this.vy = this.vx = 0
};
Point.prototype.draw = function() {
if (this.constraints.length <= 0) return;
var i = this.constraints.length;
while (i--) this.constraints[i].draw();
};
Point.prototype.resolve_constraints = function() {
if (this.pin_x != null && this.pin_y != null) {
this.x = this.pin_x;
this.y = this.pin_y;
return;
}
var i = this.constraints.length;
while (i--) this.constraints[i].resolve();
this.x > boundsx ? this.x = 2 * boundsx - this.x : 1 > this.x && (this.x = 2 - this.x);
this.y < 1 ? this.y = 2 - this.y : this.y > boundsy && (this.y = 2 * boundsy - this.y);
};
Point.prototype.attach = function(point) {
this.constraints.push(
new Constraint(this, point)
);
};
Point.prototype.remove_constraint = function(lnk) {
var i = this.constraints.length;
while (i--)
if (this.constraints[i] == lnk) this.constraints.splice(i, 1);
};
Point.prototype.add_force = function(x, y) {
this.vx += x;
this.vy += y;
};
Point.prototype.pin = function(pinx, piny) {
this.pin_x = pinx;
this.pin_y = piny;
};
var Constraint = function(p1, p2) {
this.p1 = p1;
this.p2 = p2;
this.length = spacing;
};
Constraint.prototype.resolve = function() {
var diff_x = this.p1.x - this.p2.x,
diff_y = this.p1.y - this.p2.y,
dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y),
diff = (this.length - dist) / dist;
if (dist > tear_distance) this.p1.remove_constraint(this);
var px = diff_x * diff * 0.7;
var py = diff_y * diff * 0.5;
this.p1.x += px;
this.p1.y += py;
this.p2.x -= px;
this.p2.y -= py;
};
let num = 0;
Constraint.prototype.draw = function() {
ctx.drawImage(mycanvas, this.p1.origx, this.p1.origy, spacing, spacing, this.p1.x, this.p1.y, spacing + 1, spacing + 1);
};
var Cloth = function() {
this.points = [];
var start_x = canvas.width / 2 - cloth_width * spacing / 2;
// alert(start_x);
for (var y = 0; y <= cloth_height; y++) {
for (var x = 0; x <= cloth_width; x++) {
var p = new Point(start_x + x * spacing, start_y + y * spacing);
x != 0 && p.attach(this.points[this.points.length - 1]);
y == 0 && p.pin(p.x, p.y);
y != 0 && p.attach(this.points[x + (y - 1) * (cloth_width + 1)])
this.points.push(p);
}
}
};
Cloth.prototype.update = function() {
var i = physics_accuracy;
while (i--) {
var p = this.points.length;
while (p--) this.points[p].resolve_constraints();
}
i = this.points.length;
while (i--) this.points[i].update(.016);
};
Cloth.prototype.draw = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
var i = cloth.points.length;
while (i--) cloth.points[i].draw();
ctx.stroke();
};
function update() {
cloth.update();
cloth.draw();
requestAnimFrame(update);
}
</script>
<script>
imageZoom("myimage", "myresult");
</script>
<!-- <script type="text/javascript"> document.body.onclick = function () {document.body.style.zoom="150%"}</script>
--> <script type="text/javascript"> $('#myButton').click(function() { document.body.style.zoom="160%" });</script>
<script type="text/javascript">$(function(){
$('h3').click(function(){
$('h3.active').removeClass('active');
$(this).addClass('active');
});
});</script>
<script type="text/javascript">const $bigBall = document.querySelector(".cursor__ball--big");
const $smallBall = document.querySelector(".cursor__ball--small");
const $hoverables = document.querySelectorAll(".hoverable");
// Listeners
document.body.addEventListener("mousemove", onMouseMove);
for (let i = 0; i < $hoverables.length; i++) {
$hoverables[i].addEventListener("mouseenter", onMouseHover);
$hoverables[i].addEventListener("mouseleave", onMouseHoverOut);
}
// Move the cursor
function onMouseMove(e) {
TweenMax.to($bigBall, 0.4, {
x: e.pageX - 15,
y: e.pageY - 15
});
TweenMax.to($smallBall, 0.1, {
x: e.pageX - 5,
y: e.pageY - 7
});
}
// Hover an element
function onMouseHover() {
TweenMax.to($bigBall, 0.3, {
scale: 4
});
}
function onMouseHoverOut() {
TweenMax.to($bigBall, 0.3, {
scale: 1
});
}</script>
<script>
// Get the img object using its Id
img = document.getElementById("img1");
// Function to increase image size
function enlargeImg() {
// Set image size to 1.5 times original
img.style.transform = "scale(1.5)";
// Animation effect
img.style.transition = "transform 0.25s ease";
}
// Function to reset image size
function resetImg() {
// Set image size to original
img.style.transform = "scale(1)";
img.style.transition = "transform 0.25s ease";
}
</script>
</script>
</body>
</html>```
Try to set the div style to display flex like this:
div {
display: flex;
flex: 1
///
}

The image zoom magnifier effect does not work properly in Angular

I created an image zoom magnifier effect in angular9. I followed this link of all code. https://codepen.io/piclaunch/pen/QrLWNx
When I run my application, it's magnifier zoom effect does nothing like the above runnable code demonstration.
Here is my code:-
<app-home></app-home>
<br/><br/>
<style>
#media only screen and (min-width: 600px) {
* {box-sizing: border-box;}
.img-zoom-container {
position: relative;
}
.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 75px;
height: 75px;
}
.img-zoom-result {
border: 1px solid #d4d4d4;
/*set the size of the result div:*/
width: 300px;
height: 300px;
}
#myhide {
display: none;
}
.img-zoom-container:hover #myhide {
display:block;
}
}
#media only screen and (max-width: 600px) {
.img-zoom-container:hover #myhide {
display:none;
}
.img-zoom-container {
position: relative;
width: 480px;
height: 320px;
overflow: hidden;
}
.imgid {
position: absolute;
top: 0;
left: 0;
}
.imgid img {
-webkit-transition: 0.6s ease;
transition: 0.6s ease;
}
.img-zoom-container:hover .imgid img {
-webkit-transform: scale(1.9);
transform: scale(1.9);
overflow:show;
}
}
</style>
<div class="row container mt-5 mr-5">
<div class="col-3 mr-2">
//other code
</div>
<div class="col-3">
<div class="img-zoom-container" onmousenter="showme(this)">
<span><p class="imgid" style="align:center;"><img id="myimage" src="./assets/Images/1.jpg" srcset="./assets/Images/1.jpg" width="300" height="200"></p></span>
<span id="myhide" style="float: right;
position: absolute;
top: -100px;
left: 300px;
width: auto;
height: 100%;">
<div id="myresult" class="img-zoom-result" onmouseleave="hideme(this)" >
</div></span>
</div>
</div>
<div class="col-6">
//other code
</div>
</div>
<script>
imageZoom("myimage", "myresult");
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
/*create lens:*/
lens = document.createElement("DIV");
lens.setAttribute("class", "img-zoom-lens");
/*insert lens:*/
img.parentElement.insertBefore(lens, img);
/*calculate the ratio between result DIV and lens:*/
console.log("result.offsetWidth >>>>>", result.offsetWidth ,"lens.offsetWidth>>>>>>>>>>>",lens.offsetWidth);
cx = 300 / lens.offsetWidth;
console.log("result.offsetHeight>>>>>",result.offsetHeight ,"llens.offsetHeighth>>>>>>>>>>>",lens.offsetHeight);
cy = 300 / lens.offsetHeight;
/*set background properties for the result DIV:*/
result.style.backgroundImage = "url('" + img.srcset + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
/*execute a function when someone moves the cursor over the image, or the lens:*/
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
/*and also for touch screens:*/
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
// img.addEventListener("mouseenter", bigImg);
function bigImg(x) {
console.log("onmouseenter >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>");
}
function normalImg(x) {
//result.style.display ="none";
console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>onmousLEAVE");
}
function moveLens(e) {
var pos, x, y;
/*prevent any other actions that may occur when moving over the image:*/
e.preventDefault();
/*get the cursor's x and y positions:*/
pos = getCursorPos(e);
/*calculate the position of the lens:*/
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
// console.log("x" , x , "and Y " , y);
/*prevent the lens from being positioned outside the image:*/
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth; } //else{img.addEventListener("mouseenter", bigImg); }
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight; img.addEventListener("mouseleave", normalImg);}//else{img.addEventListener("mouseenter", bigImg); }
if (y < 0) {y = 0;}
/*set the position of the lens:*/
lens.style.left = x + "px";
lens.style.top = y + "px";
/*display what the lens "sees":*/
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
//console.log("------------------A left" , a );
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
function hideme(x) {
//x.style.display = "none";
}
function showme(x) {
//x.style.display = "block";
}
</script>
<router-outlet></router-outlet>
When I hover the mouse, I find a shadow border on the right side. But this is unexpected. I don't want box-shadow.

When I try to create two slider boxes on the same page, it doesn't work

Source
I tried creating table and copying the html over and it didn't work. I'm trying to create some before and afters. I'm not 100% on Javascript, but I'm thinking there is something in there preventing it.
Sorry I have to link to the code. It would not let me post with so much copypasta'd code.
Example of sliders working using the same HTML except for the images. Added table and removed CSS that was sizing the images.
function initComparisons() {
var x, i;
/*find all elements with an "overlay" class:*/
x = document.getElementsByClassName("img-comp-overlay");
for (i = 0; i < x.length; i++) {
/*once for each "overlay" element:
pass the "overlay" element as a parameter when executing the compareImages function:*/
compareImages(x[i]);
}
function compareImages(img) {
var slider, img, clicked = 0,
w, h;
/*get the width and height of the img element*/
w = img.offsetWidth;
h = img.offsetHeight;
/*set the width of the img element to 50%:*/
img.style.width = (w / 2) + "px";
/*create slider:*/
slider = document.createElement("DIV");
slider.setAttribute("class", "img-comp-slider");
/*insert slider*/
img.parentElement.insertBefore(slider, img);
/*position the slider in the middle:*/
slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
/*execute a function when the mouse button is pressed:*/
slider.addEventListener("mousedown", slideReady);
/*and another function when the mouse button is released:*/
window.addEventListener("mouseup", slideFinish);
/*or touched (for touch screens:*/
slider.addEventListener("touchstart", slideReady);
/*and released (for touch screens:*/
window.addEventListener("touchstop", slideFinish);
function slideReady(e) {
/*prevent any other actions that may occur when moving over the image:*/
e.preventDefault();
/*the slider is now clicked and ready to move:*/
clicked = 1;
/*execute a function when the slider is moved:*/
window.addEventListener("mousemove", slideMove);
window.addEventListener("touchmove", slideMove);
}
function slideFinish() {
/*the slider is no longer clicked:*/
clicked = 0;
}
function slideMove(e) {
var pos;
/*if the slider is no longer clicked, exit this function:*/
if (clicked == 0) return false;
/*get the cursor's x position:*/
pos = getCursorPos(e)
/*prevent the slider from being positioned outside the image:*/
if (pos < 0) pos = 0;
if (pos > w) pos = w;
/*execute a function that will resize the overlay image according to the cursor:*/
slide(pos);
}
function getCursorPos(e) {
var a, x = 0;
e = e || window.event;
/*get the x positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x coordinate, relative to the image:*/
x = e.pageX - a.left;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
return x;
}
function slide(x) {
/*resize the image:*/
img.style.width = x + "px";
/*position the slider:*/
slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
}
}
}
/*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
initComparisons();
div[class^="img-comp-container"] {
position: relative;
}
* {
box-sizing: border-box;
}
.img-comp-img {
position: absolute;
width: auto;
height: auto;
overflow: hidden;
}
.img-comp-img img {
display: block;
vertical-align: middle;
}
.img-comp-slider {
position: absolute;
z-index: 9;
cursor: ew-resize;
/*set the appearance of the slider:*/
width: 40px;
height: 40px;
background-color: #2196F3;
opacity: 0.7;
border-radius: 50%;
}
<table class="cool" cellpadding="10">
<tr>
<td width="500">
<div class="img-comp-container1">
<div class="img-comp-img">
<img src="http://placekitten.com/500/400" width="500" height="400">
</div>
<div class="img-comp-img img-comp-overlay">
<img src="http://placebear.com/500/400" width="500" height="400">
</div>
</div>
</td>
<td>
<div class="img-comp-container2">
<div class="img-comp-img">
<img src="http://placekitten.com/500/300" width="500" height="300">
</div>
<div class="img-comp-img img-comp-overlay">
<img src="http://baconmockup.com/500/300/" width="500" height="300">
</div>
</div>
</td>
</tr>
</table>

Getting X Y Coordinates into PHP variables on Mouse Click

The following script moves a ball from one location to another inside a box.
I would like to gather the coordinates of where the mouse is clicked inside this box and convert the X and Y coordinates onclick over to PHP variables so some additional PHP code can process this.
How can this be done please?
<!DOCTYPE html>
<html>
<head>
<title>Move to Click Position</title>
<style type="text/css">
body {
background-color: #FFF;
margin: 30px;
margin-top: 10px;
}
#contentContainer {
width: 550px;
height: 350px;
border: 5px black solid;
overflow: hidden;
background-color: #F2F2F2;
cursor: pointer;
}
#thing {
position: relative;
left: 50px;
top: 50px;
transition: left .5s ease-in, top .5s ease-in;
}
</style>
</head>
<body>
<div id="contentContainer">
<img id="thing" src="//www.kirupa.com/images/smiley_red.png">
</div>
<script src="//www.kirupa.com/prefixfree.min.js"></script>
<script>
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
container.addEventListener("click", getClickPosition, false);
function getClickPosition(e) {
var parentPosition = getPosition(e.currentTarget);
var xPosition = e.clientX - parentPosition.x - (theThing.clientWidth / 2);
var yPosition = e.clientY - parentPosition.y - (theThing.clientHeight / 2);
theThing.style.left = xPosition + "px";
theThing.style.top = yPosition + "px";
}
// Helper function to get an element's exact position
function getPosition(el) {
var xPos = 0;
var yPos = 0;
while (el) {
if (el.tagName == "BODY") {
// deal with browser quirks with body/window/document and page scroll
var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
var yScroll = el.scrollTop || document.documentElement.scrollTop;
xPos += (el.offsetLeft - xScroll + el.clientLeft);
yPos += (el.offsetTop - yScroll + el.clientTop);
} else {
// for all other non-BODY elements
xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPos += (el.offsetTop - el.scrollTop + el.clientTop);
}
el = el.offsetParent;
}
return {
x: xPos,
y: yPos
};
}
</script>
</body>
</html>
I can then process these in the other script I have.
If someone can explain how this can be achieved it would be greatly appreciated.
Thanks
I have looked through and found a solution if anyone is after doing the same thing.
<!DOCTYPE html>
<html>
<head>
<title>Move to Click Position</title>
<style type="text/css">
body {
background-color: #FFF;
margin: 30px;
margin-top: 10px;
}
#contentContainer {
width: 614px;
height: 864px;
border: 5px black solid;
overflow: hidden;
background: url(Sample-Contract-Agreement-Letter.jpg) top left no-repeat;
background-color: #F2F2F2;
cursor: pointer;
}
#thing {
position: relative;
left: 50px;
top: 50px;
transition: left .5s ease-in, top .5s ease-in;
}
</style>
</head>
<body>
<div id="contentContainer">
<img id="thing" src="//www.kirupa.com/images/smiley_red.png">
</div>
<script src="//www.kirupa.com/prefixfree.min.js"></script>
<script>
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
container.addEventListener("click", getClickPosition, false);
function getClickPosition(e) {
var parentPosition = getPosition(e.currentTarget);
var xPosition = e.clientX - parentPosition.x - (theThing.clientWidth / 2);
var yPosition = e.clientY - parentPosition.y - (theThing.clientHeight / 2);
document.getElementById('myField1').value = xPosition;
document.getElementById('myField2').value = yPosition;
theThing.style.left = xPosition + "px";
theThing.style.top = yPosition + "px";
}
// Helper function to get an element's exact position
function getPosition(el) {
var xPos = 0;
var yPos = 0;
while (el) {
if (el.tagName == "BODY") {
// deal with browser quirks with body/window/document and page scroll
var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
var yScroll = el.scrollTop || document.documentElement.scrollTop;
xPos += (el.offsetLeft - xScroll + el.clientLeft);
yPos += (el.offsetTop - yScroll + el.clientTop);
} else {
// for all other non-BODY elements
xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPos += (el.offsetTop - el.scrollTop + el.clientTop);
}
el = el.offsetParent;
}
return {
x: xPos,
y: yPos
};
}
</script>
<form action="test.php" method="post">
<input type=”hidden” value="" id="myField1" name="myField1">
<input type=”hidden” value="" id="myField2" name="myField2">
<input type="submit" value="Submit">
</form>
</body>
</html>

How do I add a onClick event handler to a canvas element and control mouse movement actions?

I have an image within a canvas, I want to be to click the image and drag the image(without lifting the left mouse button) and the image at the position where the left mouse button was released. For now as soon as the mouse icon hovers over the canvas, the image moves with it, I tried to add an onclick listener event but I am sure my newbie-ness got in the way of my progress.
Here is what I had come up with so far. How can I make this work with my existing code?
var canvas = document.getElementById('customCanvas');
var context = canvas.getContext('2d');
make_base();
function make_base()
{
upload_image = new Image();
upload_image.src = 'https://lh3.googleusercontent.com/-6Zw-hozuEUg/VRF7LlCjcLI/AAAAAAAAAKQ/A61C3bhuGDs/w126-h126-p/eagle.jpg';
upload_image.onload = function(){
context.drawImage(upload_image, 0, 0);
canvas.addEventListener('click', canvas.onmousemove = function(e) {
/// correct mouse position so its relative to canvas
var rect = canvas.getBoundingClientRect(),
constantX = 0, constantY = 0,
x = e.clientX - rect.left,
y = e.clientY - rect.top;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(upload_image, x, y);
});
}
}
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.sidepane {
height: 100%;
background: #E8E8EA;
}
.sidepane .form {
height: 80px;
margin: 10px 0;
}
.sidepane .assets {
width: 100%;
}
#assetText {
font-size: 24px;
}
.assets .text, .assets .image {
margin: 10px 0;
}
.assets .image ul li {
width: 50px;
height: 50px;
margin-right: 5px;
float: left;
overflow: hidden;
}
.assets .image ul li img {
width: 100%;
height: 100%;
}
.canvas .block {
position: relative;
width: 600px; height: 600px;
margin: 10px;
border: 1px solid;
box-shadow: 0px 0px 5px black;
}
.item {
border: 1px solid transparent;
position: absolute;
}
.item.selected {
border-color: blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="sidepane col-sm-2 col-md-2 col-lg-2">
<form method="post" action="/images" enctype="multipart/form-data">
<!--<div class="form">-->
<h3>Form</h3>
<input type="file" class="form-control" placeholder="Upload Your Images" name="filefield">
<button id="submit" class="btn btn-default">upload</button>
<!-- Upload Form here -->
<!--</div>-->
<hr />
<div class="assets">
<h3>Assets</h3>
<div class="text">
<h4>Text</h4>
<input type="text" name="textfield">
<button id="addText" class="btn btn-default">Add Text</button>
</div>
<div class="image">
<h4>Images</h4>
<ul class="list-unstyled">
<!-- List of images here -->
<!-- <li><img src="images/sample.jpeg" class="img-rounded" /></li> -->
</ul>
</div>
</div>
<input type="submit" >
</form>
</div>
<!-- canvas -->
<div class="canvas col-sm-8 col-md-8 col-lg-8">
<div class="block">
<!-- Add images and texts to here -->
<canvas id="customCanvas" width="598" height="598" style="border: 1px solid #000000">
</canvas>
</div>
</div>
First, you have to check if your mouse is on the image, and then check if you are trying to drag the image. To do that, you need some events, mousedown, mouseup and mousemove. To check if your mouse pointer is on the image, you have to get the X, Y, width, height of that image. Final code below.
Edit
Some more changes. Image class has no X and Y properties so I had to define variables that will store that data and make some changes to isInside function.
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 300;
var upload_image;
var imageX, imageY;
var mouseX, mouseY;
var imageDrag = false;
make_base();
canvas.addEventListener("mousemove", function (evt) {
var mousePos = getMousePos(canvas, evt);
mouseX = mousePos.x;
mouseY = mousePos.y;
});
function getMousePos(canvas, event) {
var rect = canvas.getBoundingClientRect();
return {
x: event.clientX - rect.left,
y: event.clientY - rect.top
};
}
function isInsideImage(rect) {
var pos = { x: mouseX, y: mouseY };
return pos.x > imageX && pos.x < imageX + rect.width && pos.y < imageY + rect.height && pos.y > imageY;
}
function make_base()
{
upload_image = new Image();
imageX = 0;
imageY = 0;
upload_image.onload = function(){
context.drawImage(upload_image, 0, 0);
}
upload_image.src = 'https://lh3.googleusercontent.com/-6Zw-hozuEUg/VRF7LlCjcLI/AAAAAAAAAKQ/A61C3bhuGDs/w126-h126-p/eagle.jpg';
}
canvas.addEventListener("mousedown", function (evt) {
if(isInsideImage(upload_image)) {
imageDrag = true;
}
});
canvas.addEventListener("mouseup", function (evt) {
if(imageDrag)
imageDrag = false;
});
setInterval(function() {
if(imageDrag) {
context.clearRect(0, 0, canvas.width, canvas.height);
imageX = mouseX;
imageY = mouseY;
context.drawImage(upload_image, imageX, imageY);
}
}, 1000/30);
The event you're looking for would be https://developer.mozilla.org/en/docs/Web/Events/mousedown - AFAIK (correct me if I'm wrong) but the click event would only fire when a complete click event has completed (both down and up).
Here's some sample code for this;
var mouseX;
var mouseY; // Accessible outside the function. Easier access to canvas drawing.
var canvas = ''; // Complete this to get canvas element
canvas.addEventListener("mousedown", function(mouse){
// Get mouse co-ordinates
})
Inside this event listener, you can check for your current mouse position...
var canvasElement = element.getBoundingClientRect()
mouseX = mouse.pageX - canvasElement.left;
mouseY = mouse.pageY - canvasElement.top;
Use these variables when drawing your image to the canvas to determine the image's x and y position. These should change as your mouse moves around the canvas. I.e, pass them to your make_base() function;
make_base(mouseX, mouseY)
Update your drawing function to account for them;
function make_base(mouseX, mouseY)
{
upload_image = new Image();
upload_image.src = 'https://lh3.googleusercontent.com/-6Zw-hozuEUg/VRF7LlCjcLI/AAAAAAAAAKQ/A61C3bhuGDs/w126-h126-p/eagle.jpg';
upload_image.onload = function(){
context.drawImage(upload_image, 0, 0);
canvas.addEventListener('click', canvas.onmousemove = function(e) {
/// correct mouse position so its relative to canvas
var rect = canvas.getBoundingClientRect(),
constantX = 0, constantY = 0,
x = mouseX,
y = mouseY
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(upload_image, x, y);
});
}
}
PLEASE NOTE that the code above is not complete, for example, the X and Y will be based on where your mouse is on the PAGE, not the CANVAS. there are separate calculations needed to account for this.
Or, you can just embed an external link under the image to take you to wherever you want!

Categories