Interactjs rotation shifts the position - javascript

I am trying to rotate, resize and drag an image using interactjs.
I am using pinch to zoom for resizing.
After rotating the image the drag feature does't work well and positions the image at wrong coordinates.
I also tried to move the img by (width/2,height/2) before rotating so that it retains its position, but this stopped resize and rotate feature.
Here is the code I am using.
The pinch to zoom and rotate only works on touch phone :
Here is the fiddle(Please check in Phone for pinch-to-zoom and rotate).
HTML
<div style="display:flex;flex-direction:row;border:solid grey 2px;border-radius:20px;position:relative;float:left;background-color:silver;width:100%">
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-12-02/19220-50b6c96d8aa44ed1511a962bae279f25.png" style="width:150px; height:150px;" />
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-04-27/5895-37981e6fff910eef9907adaf99faa6b6.png" style="width:150px; height:150px;" />
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-04-27/5728-08fc043472bfa4cc9ba6d7c4a90324e0.png" style="width:150px; height:150px;" />
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-11-30/17784-d2820ac7614e8f4eeb755c38bdccadc0.png" style="width:150px; height:150px;" />
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-04-27/5728-08fc043472bfa4cc9ba6d7c4a90324e0.png" style="width:150px; height:150px;" />
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-04-27/5895-37981e6fff910eef9907adaf99faa6b6.png" style="width:150px; height:150px;" />
</div>
<div style="display:flex;flex-direction:row;justify-content:space-between;align-items:center;border:solid grey 2px;border-radius:20px;position:relative;float:left;background-color:silver;height:50px;width:150px">
<button id="save" style="width:50px" />
<button id="savetwo" style="height:40px;border-radius:20px;width:70px">Save Image</button>
</div>
<br />
</div>
</div>
SCRIPT
$(document).ready(function(){
$(".Choice").click(function () {
console.log($(this));
var url = '"' + $(this)[0].src + '"';
var index = url.indexOf("http://");
console.log(url);
var modurl = url.substring(index, url.length - 1);
console.log(url);
$(".ChoiceImage").attr("src", modurl);//url appends src to the current uri so I had to split it(suggest alternative )
});
var scale = 1,angle=0;
var gestureArea = document.getElementById('gesture-area');
var scaleElement = document.getElementById('chosenOne');
var scaleElementParent = scaleElement.parentElement;
interact(gestureArea).gesturable({
onstart: function(event) {
},
onmove: function(event) {
angle += event.da;
scale = scale * (1 + event.ds);
scaleElement.style.webkitTransform =
scaleElement.style.transform =
'scale(' + scale + ') rotate('+ angle + 'deg)';
scaleElementParent.style.webkitTransform =
scaleElementParent.style.transform =
'scale(' + scale + ') rotate('+ angle + 'deg)';
dragMoveListener(event);
},
onend: function(event) {
}
}).draggable({ onmove: dragMoveListener });
function dragMoveListener(event) {
var target = event.target.children[0];
console.log(target);
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
// this is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener;
});
The user clicks on an image from the list of images to perform the actions.
Thanks in advance

Your main issue was to scale and rotate the image AND the "gesture area.
So if the gesture detection element is rotated, interac.js only can misinterpret the movements.
I cleaned the code a little... And removed all the unused elements from this answer, like the buttons...
Here is the code in full and a CodePen to try it on a mobile device.
console.clear();
$(".Choice").click(function() {
$(".ChoiceImage").attr("src", $(this).attr("src"));
});
var scale = 1,
angle=0,
gestureArea = $('#gestureArea')[0],
scaleElement = $('.ChoiceImage'),
scaleElementParent = $('#gestureArea');
// Scale and rotate
interact(gestureArea).gesturable({
onstart: function(event) {
},
onmove: function(event) {
angle += event.da;
scale = scale * (1+event.ds);
scaleElement.css({'transform':'scale(' + scale + ') rotate('+ angle + 'deg)'});
//scaleElementParent.css({'transform':'scale(' + scale + ') rotate('+ angle + 'deg)'});
dragMoveListener(event);
},
onend: function(event) {
}
}).draggable({ onmove: dragMoveListener });
// Drag
function dragMoveListener(event) {
var target = $(event.target);
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.attr('data-x')) || 0) + event.dx;
y = (parseFloat(target.attr('data-y')) || 0) + event.dy;
// translate the element
target.css({'transform':'translate(' + x + 'px, ' + y + 'px)'});
// update the posiion attributes
target.attr('data-x', x);
target.attr('data-y', y);
}
// this is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener;
#gestureArea{
position:relative;
z-index:999;
width:150px;
height:150px;
background-color:transparent;
border:none;
padding: 0px 0px 0px 0px;
}
.container{
display:flex;
flex-direction:row;
border:solid grey 2px;
border-radius:20px;
position:relative;
float:left;
background-color:silver;
width:100%;
position:fixed;
bottom:0;
}
img{
width:150px;
height:150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.8/interact.min.js"></script>
<div id="gestureArea">
<img id="chosenOne" class="ChoiceImage resize-drag">
</div>
<div class="container">
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-12-02/19220-50b6c96d8aa44ed1511a962bae279f25.png">
</div>

Related

Rotate shapes when clicking on on circle in JavaScript

When clicking on a circle, another shape should rotate, but there is something wrong with my loop. Here's my code:
var Degree = 0;
function RotateDiv(obj) {
let arak = document.getElementsByTagName('div');
for (let i in arak) {
Degree += 10
arak[i].style.rotate = 'rotate(' + deg + 'deg)';
}
}
<div onclick="RotateDiv(this)" class="button">rotate</div>
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
<div class="s4"></div>
It only works the first time. I get this message in the debugger:
Paused on exception
ReferenceError: deg is not defined
ReferenceError: deg is not defined
Because of you don't have deg replaced with Degree
to rotate a div we have to use transform = 'rotate(' + Degree + 'deg)'
if you want all div to rotate same deg you have to move the Degree += 10 to top of forEach
var Degree = 0;
function RotateDiv(obj) {
let arak = document.querySelectorAll(".example")
arak.forEach((i) => {
Degree += 10
i.style.transform = 'rotate(' + Degree + 'deg)';
})
}
.example {
height: 20px;
margin: 10px;
background-color: red
}
<div onclick="RotateDiv(this)" class="button">rotate</div>
<div class="example s1"></div>
<div class="example s2"></div>
<div class="example s3"></div>
<div class="example s4"></div>

Tooltip not working when having more than one

First of all, sorry, because I'm sure is gonna be some silly thing.
I have this code in which I would like to display images when hovering a text. Doing this on tooltip, everything seems fine, but the tooltip is just working on the first one. Should I create classes for each one?
HTML:
<div title="regular tooltip">Description:
<a class="tooltip" href="http://www.google.com/">
Tooltip 1
<span id="tooltip-span">
<img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
</span>
</a>
/
<a class="tooltip" href="http://www.google.com/">
Tooltip 2
<span id="tooltip-span">
<img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
</span>
</a>
</div>
JS:
var tooltipSpan = document.getElementById('tooltip-span');
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
tooltipSpan.style.top = (y + 20) + 'px';
tooltipSpan.style.left = (x + 20) + 'px';
};
CSS:
.tooltip {
text-decoration:none;
position:relative;
}
.tooltip span {
display:none;
}
.tooltip:hover span {
display:block;
position:fixed;
overflow:hidden;
}
Linking to the jsfiddle: http://jsfiddle.net/javierestebanx/HJf8q/3430/
Thank you all in advance!
This is a quick solution using a class instead of an id. When you use multiple times the same id, only the first one will be selected, that's why the second one didn't move in your original code.
getElementsByClassName gets a HTMLCollection, so you have to loop on the elements inside.
var tooltipSpans = document.getElementsByClassName('tooltip-span');
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY,
i, l = tooltipSpans.length;
for(i = 0; i < l; i++){
tooltipSpans[i].style.top = (y + 20) + 'px';
tooltipSpans[i].style.left = (x + 20) + 'px';
}
};
.tooltip {
text-decoration:none;
position:relative;
}
.tooltip span {
display:none;
}
.tooltip:hover span {
display:block;
position:fixed;
overflow:hidden;
}
<div title="regular tooltip">Description:
<a class="tooltip" href="http://www.google.com/">
Tooltip 1
<span class="tooltip-span">
<img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
</span>
</a>
/
<a class="tooltip" href="http://www.google.com/">
Tooltip 2
<span class="tooltip-span">
<img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
</span>
</a>
</div>
The id's of span need to be unique. Here is the working code
HTML:
<div title="regular tooltip">Description:
<a class="tooltip" href="http://www.google.com/">
Tooltip 1
<span id="tooltip-span1">
<img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
</span>
</a>
/
<a class="tooltip" href="http://www.google.com/">
Tooltip 2
<span id="tooltip-span2">
<img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
</span>
</a>
</div>
CSS
.tooltip {
text-decoration:none;
position:relative;
}
.tooltip span {
display:none;
}
.tooltip:hover span {
display:block;
position:fixed;
overflow:hidden;
}
JS:
var tooltipSpan = document.getElementById('tooltip-span1');
var tooltipSpan2 = document.getElementById('tooltip-span2');
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
tooltipSpan.style.top = (y + 20) + 'px';
tooltipSpan.style.left = (x + 20) + 'px';
tooltipSpan2.style.top = (y + 20) + 'px';
tooltipSpan2.style.left = (x + 20) + 'px';
};
Hopefully this is what you need.
var tooltipSpan = document.getElementById('tooltip-span');
var tooltipSpan1 =document.getElementById('tooltip-span2');
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
tooltipSpan.style.top = (y + 20) + 'px';
tooltipSpan.style.left = (x + 20) + 'px';
tooltipSpan1.style.top = (y + 20) + 'px';
tooltipSpan1.style.left = (x + 20) + 'px';
};
.tooltip {
text-decoration:none;
position:relative;
}
.tooltip span ,.tooltip span2{
display:none;
}
.tooltip:hover span {
display:block;
position:fixed;
overflow:hidden;
}
<div title="regular tooltip">Description:
<a class="tooltip" href="http://www.google.com/">
Tooltip 1
<span id="tooltip-span">
<img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
</span>
</a>
/
<a class="tooltip" href="http://www.google.com/">
Tooltip 2
<span id="tooltip-span2">
<img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
</span>
</a>
</div>
id="tooltip-span" is used twice in the DOM. it should be unique. You can create separate ID or use className and bind onmousemove event.the preview is with two ID

simulate pointer trails effect

I'm trying to simulate windows pointer trails effect:
with the same settings there's in windows. This is what I tried:
var src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII=";
var a = 0;
document.addEventListener("mousemove", function (e) {
$("#trail" + (a - 6)).remove();
document.body.innerHTML = document.body.innerHTML + '<img class="trail" id="trail' + a + '" style="left:' + e.pageX + 'px;top:' + e.pageY + 'px;" class="trail" src="' + src + '"></img>';
document.getElementById("cursor").style = "z-index:2;left:" + e.pageX + "px;top:" + e.pageY + "px;";
a++;
});
*{cursor:none;}
#cursor {
position:fixed;
z-index:999999;
width:12px;
height:19px;
}
.trail {
z-index:1;
position:fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img id="cursor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII="/>
<button onclick="alert('click')">click me</button>
But I have few problems with this code:
I can't press buttons or anything else, and if I change the z-index to be negative the cursor is behind the buttons.
If page zoom is different then 100% the cursor size is bigger/smaller.
It's too fast, in the windows pointer trails there's bigger gap between the cursor trails.
I want it to be possible to change trails length(like in the windows settings) but I can't do it because of problem 1.
You can use pointer-events:none to solve problem 1, to solve problem 2 you can do "transform:scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")", to solve problem 3 you can add cursor image only in odd/even loops(I compared it to the windows pointer trails and it's the same speed), and to solve problem 4 you can use animation timing:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
*{cursor:none;}
.trail
{
position:fixed;
width:0;
height:0;
transform-origin:0 0;
}
#trails
{
pointer-events: none;
position:fixed;
top:0;
left:0;
z-index:99998;
width:100%;
height:100vh;
}
#cursor
{
pointer-events:none;
position:fixed;
z-index:999999;
width:12px;
height:19px;
transform-origin:0 0;
}
#keyframes pointer_trails
{
0%{width:12px;height:19px;}
100%{width:12px;height:19px;}
}
</style>
<script>
var src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII=";
var a = true;
//makes image stay the same size:
$(document).ready(function () {
$('#cursor').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
$('.trail').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
});
$(window).resize(function () {
$('#cursor').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
$('.trail').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
});
//pointer trails effect:
document.addEventListener("mousemove", function (e) {
document.getElementById("cursor").style = "left:" + e.pageX + "px;top:" + e.pageY + "px;";
if (document.getElementById("_checked").checked && a)
$("#trails").append('<img style="animation:pointer_trails ' + document.getElementById('trails_length').value + 's ease-in-out;left:' + e.pageX + 'px;top:' + e.pageY + 'px;" class="trail" src="' + src + '"></img>');
a = !a;
$('#cursor').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
$('.trail').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
});
</script>
</head>
<body>
<div id="trails"></div>
<img id="cursor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII="/>
<div style="text-align:center">
<input type="checkbox" id="_checked" checked/>Show pointer trails
<br />
Short<input type="range" id="trails_length" min="0.02" max="0.15" step="0.026" value="0.15"/>Long
</div>
</body>
</html>

append coordinates on to a div when clicked on image

when ever i hover over the image coordinates are displayed i would like to append those coordinates in a div is it possible
here is a fiddle of what i have so far
Fiddle
Jquery.js
$('.hover').mousemove(function(e){
var hovertext = $('.hover').attr('hovertext');
$('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
$('#hoverdiv').css('top',e.clientY).css('left',e.clientX);
}).$('#img').on('click', function () {
$('(' + e.clientX + ',' + e.clientY + ')').appendTo('#append');
}) .mouseout(function(){
$('#hoverdiv').hide();
});
index.html
<div id="hoverdiv"></div>
<img id="img" class="hover" src="Coordinates.svg.png" hovertext="" />
<div id="append">
</div>
I just updated your code a little bit and I hope it fulfills your requirements.
$('.hover').mousemove(function(e) {
var hovertext = $('.hover').attr('hovertext');
$('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
$('#hoverdiv').css('top', e.clientY).css('left', e.clientX);
}).mouseout(function() {
$('#hoverdiv').hide();
});
$('#img').click(function(e) {
$('#append').append('(' + e.clientX + ',' + e.clientY + ')');
});
#hoverdiv {
display: none;
position: absolute;
font-size: 14px;
background-color: #fff;
color: #404040;
padding: 7px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<img id="img" class="hover" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/2D_Cartesian_Coordinates.svg/376px-2D_Cartesian_Coordinates.svg.png" hovertext="" />
<div id="append">
</div>
The problem is that the click event won't call because the mouse will be constantly over #hoverdiv instead. So you will want to add a click event to that:
$('#hoverdiv').on('click', function (e) {
$( '<span>(' + e.clientX + ',' + e.clientY + ')</span>' ).appendTo( "#append" );
}).mouseout(function(){
$('#hoverdiv').hide();
});
Also note the appendTo() functions needs a html string as the argument. So add some tags (such as <span>).
Demo
There are few mistakes in the code.
The binding of click event to the image was not done correctly.
The tooltip displayed was right below the mouse and therefore the click event of the image was not going through. Please add and offset left or top so that the tooltip doesnt interfere with the click on the image.
I guess appendTo expects html and not plain text.
Corrected Code
$('.hover').mousemove(function(e){
var hovertext = $('.hover').attr('hovertext');
$('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
$('#hoverdiv').css('top',e.clientY).css('left',e.clientX + 10);
}).on('click', function (e) {
$('<p>(' + e.clientX + ',' + e.clientY + ')</p>').appendTo('#append');
}) .mouseout(function(){
$('#hoverdiv').hide();
});
I have updated the code to capture the coordinates on hover and click.
To append text to a div on hover, add $('#append').append('(' + e.clientX + ',' + e.clientY + ')'); to your mousemove event.
Note: I have added an offset of 10px to the hoverDiv to move it away from cursor.
Updated Fiddle
$(function() {
$('.hover').mousemove(function(e) {
var hovertext = $('.hover').attr('hovertext');
$('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
$('#hoverdiv').css('top', e.clientY).css('left', e.clientX + 10);
$('#appendHover').append('(' + e.clientX + ',' + e.clientY + ')');
}).mouseout(function() {
$('#hoverdiv').hide();
});
$('.hover').click(function(e) {
$('#appendClick').append('(' + e.clientX + ',' + e.clientY + ')');
});
});
#hoverdiv {
display: none;
position: absolute;
font-size: 14px;
background-color: #fff;
color: #404040;
padding: 7px;
}
#appendClick {
background-color: cornflowerblue;
}
#appendHover {
background-color: coral;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hoverdiv"></div>
<img id="img" class="hover" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/2D_Cartesian_Coordinates.svg/376px-2D_Cartesian_Coordinates.svg.png" hovertext="" />
<div id="appendClick">
</div>
<div id="appendHover">
</div>
Try a click event like this and see if it helps:
$('#img').click(function(e) {
var offset = $(this).offset();
alert(e.pageX - offset.left);
alert(e.pageY - offset.top);
});
If it's ok you can just append it to a div.

How to write text over image with coordinates?

I have a image with and i want display some text over image when i clicked 1 point in image, my problem is text don't display in mouse point, it display below mouse.
It is my code:
Script:
<script type="text/javascript">
$(function() {
$("#imgEx").click(function(e) {
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
//alert("X: " + relativeX + ' -' + " Y: " + relativeY);
var text = document.getElementById('textEx');
text.textContent = "X: " + relativeX + ' -' + " Y: " + relativeY;
text.style.left = relativeX + "px";
text.style.top = relativeY - 30 + "px"; // minus one range you want display text in image ( my number is 30 to display in mouse point)
});
});
</script>
and my form:
<form method="POST">
<div class="image">
<img id="imgEx" type="image" alt="image" src="./src/assets/cat.jpg" style="width:700px; height:600px" >
<h2 id="textEx"></h2>
</div>
</form>
Put wrapper as relative and content as absolute
Also use span element instead of h elements as h elemnt itself is associated with browser specific style(css)
$(function() {
$("#imgEx").click(function(e) {
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
var text = document.getElementById('textEx');
text.textContent = "X: " + relativeX + ' -' + " Y: " + relativeY;
text.style.left = relativeX + "px";
text.style.top = relativeY + "px";
});
});
.image {
position: relative;
}
#textEx {
position: absolute;
font-size: 20px;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form method="POST">
<div class="image">
<img id="imgEx" type="image" alt="image" src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" style="width:700px; height:600px">
<span id="textEx"></span>
</div>
</form>
You just have to assign position:absolute for #textEx
#textEx{
position:absolute;
}

Categories