can you check in JS or JQuery in which part of the image was clicked?
For example we have this: Picture
Can you check if the user clicked on a specific pen? For example the red one?
Thanks
You have at least three options:
Split the image into several images each with one pen, and then put them into a link that specifies the pen (e.g. <img src="redpen.jpg" />.
You can use an HTML map with area tags.
You can use the coordinates of your click event to decide which pen was clicked like described in this answer: https://stackoverflow.com/a/4249711/387573
use of image-mapping is better for this kind of requirement. map the required area and link to required url. know more about image-mapping http://www.w3schools.com/tags/tag_map.asp
If you don't want to use an image map you can also just detect the click's x & y position relative to the image and then from there, work out what you want to do.
This will not be very accessible but it will work.
You can work out the relative x & y position of the click like so. (Try clicking on the yellow pen)
var image = document.querySelector('img');
image.addEventListener('click', onClick, true);
function onClick(event){
var imageBoundingRect = image.getBoundingClientRect();
var x = event.pageX - imageBoundingRect.left;
// We are not using the y co-ordinate but this is how you would get it.
var y = event.pageY - imageBoundingRect.top;
if (x >= 345 && x <= 380){
alert('Clicked on the yellow pen.')
}
}
<img src="http://www.wilde13-werbemittelkatalog.de/pictures/werbekugelschreiber.jpg"/>
Related
I have an image which as a "ruler" (made of basic divs positioned absolute on top of the image) that are use to measure the ends of the image. Now the idea is that if you long press one of the ruler ends (the dots at the end of the line which are draggable), the image in the background would zoom in that point, and follow the dot if the user moves it. I am able to detect the long press but I cannot get the image to zoom and follow the dot once detected. The code below is where I have done the detection and now I should apply the styling to move the image. I thought of using the transition property but couldn't get it to zoom on the dot. Any help is appreciated...
Here's a codesandbox with how the ruler works: Link
Meaningful code:
const x = get('x', varToUse); //This just gives the x coordinate of the ruler end
const y = get('y', varToUse); //This just gives the y coordinate of the ruler end
const image = ruler.current.parentElement.parentElement.childNodes[1].childNodes[1];
if (zoom) {
image.style.transform = `translate(${x * 2}px, ${y * 2}px) scale(2.0)`;
} else {
image.style.transform = `scale(1.0)`;
}
This is what the ruler looks like just to get an understanding:
You can make the image a div with background-image.
.image {
background-image: url({image_url});
}
so this way you can update the image size and position easily with this properties
.image {
background-size: x y;
background-position x y;
}
I think this way is easier to do the image resizing and zoom abilities.
another way is to use a canvas library that can help you a lot they have lots of built in functions.
I think trying it without library is better for now but as it grows try to move to a canvas library
The first reason is that in the code you provided, the DOM element that is being manipulated is a div id='root'. The image should be selected.
I searched on the internet a lot but I couldn't find any useful link. I am trying to develop a custom menu.
It needs to be an area-based rollover menu which changes depending on which part of the image is currently being hovered over by the user. The image and related link needs to change depending on what area of the image the user is hovering over. Check the below image:
After clicking the next image would be below one,
Lastly when I hover on any specific slice of pizza, the image should be changed accordingly. An example is the below image:
Is it possible with CSS3, JavaScript?
There's two different ways that I could think of. Since you tagged JQuery I'm assuming that's acceptable. pageX and pageY track mouse movements on screen and can be used to determine what area of the screen is being hovered over. Here's a fiddle I made to determine the coordinates: http://jsfiddle.net/cpk3mqxw/
$("#image").mousemove(function (e) {
mousex = e.pageX;
mousey = e.pageY;
$("#update").text("x: " + mousex + " y:" + mousey);
});
EDIT: For checking the coordinates, what you need to do is think of the page as a grid system, as per usual with JavaScript, and gauge that If mousex is more than 132 and less than 155 it must be over THIS part of the image. Again, a separate span tag with constantly updated x and y coordinates will be helpful.
a.e:
if(mouse x >= 102 && mousex <= 220 && mousey >= 26) {
//do this
}
It pays off in the end, but it is quite a bit of extra work. Another way is to use an image map.
<img src="image.jpg" id="image1" usemap="#one">
<map name="one">
<area coords="30, 50, 70, 100" href="gohere.html">
</map>
And if you'd like the area to be highlighted or styled you can use maphilight.js which you can find more information on here: http://davidlynch.org/blog/2008/03/maphilight-image-map-mouseover-highlighting/
A great solution for your problem would be to create a sprite containing an image of your pizza with one slice missing on each image. Then, you create a div the size of one pizza image:
<div id="myPizza"></div>
Then, you can check X and Y position of the mouse over this div using a script similare to this one http://coursesweb.net/javascript/get-mouse-coordinates-inside-div-image_s2
Then, depending where the cursor is on your image, you can put a class with the right background position on it. I suggest you this to create your classes: http://www.spritecow.com/
Hope it helped, simple script with sprites!
I have been able to solve this problem.
I used <map> and <area> to define each of the areas (pizza slices) I need.
Then I added the onclick() and onmouseover() event handler to each area to call a function to change the picture.
HTML
<area shape="circle" coords="200,250,25" onmouseover = "changePic('newImage.png')" />
<img src='start_pic.png' name='mainPic' />
JavaScript
function changePic(img){
mainPic.src = img;
}
PREVIEW LINK
I'm making a drawing application which involves clicking in a div box and reading co-ordinate values. The problem with it so far is that the coordinate values aren't correct relative to the box.
Here's my setup.. the drawing application starts off by loading simple HTML and then a DIV exclusively for drawing. Then I use a click handler to detect a click and return co-ordinates.
The width and height return fine because I defined them for the DIV, but the top and left positions return NaN in javascript.
I know I can easily do this with using css property position="absolute" for the DIV and specifying left and top that way, but that would wreck the rest of the HTML document because then the whole thing would look out of place.
Is there a way I can get a top and left value of DIV without explicitly specifying the two values for the DIV?
I want to achieve this with simple javascript. No jquery.
jsBin demo
function getXY( ev ){
var gbc = this.getBoundingClientRect(),
X = ev.clientX - gbc.left,
Y = ev.clientY - gbc.top;
alert( X +' '+ Y);
}
document.getElementById('board').onclick = getXY;
https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/event.clientX
https://developer.mozilla.org/en-US/docs/Web/API/event.clientY
Say you have an image that is 200px wide. Is there a way to determine how far from the left of the image you clicked? For example if you clicked in the dead center you would get 100. I tried using something like ui.position.left but couldn't get that to work. Any ideas?
First, get the X position of the image. Next, use the event information to get the X position of the click event.
Once you have those two, it's simple math to get the result:
$('#yourImg').click(function(e){
var imageLeft = $(this).offset().left;
var clickLeft = e.pageX;
var howFarFromLeft = clickLeft - imageLeft;
});
You need to find the mouse coordinates at the time of the click (by using the event of the click, event.pageX, event.pageY). Then find the location of the image in the body. and subtract it from the mouseposition..
The result would be the coordinates inside the image.. Demo
Is there any trick to determine if user clicks on given element rendered in canvas? For example I'm displaying rhombus from .png file with transparent background and i want to know if user click inside or outside that figure (like mouse-element collision).
There is no concept of individual elements in a canvas - it is simply just an area that you're drawing pixels onto. SVG on the other hand is made up of elements which you can then bind events to. However there are a few approaches you can take to add click events to canvas:
Position an html element that overlays the area on the canvas you want to be clickable. A for a rectangular area or an image map for something more irregular.
Use separate canvases for each element that you want to be clickable.
CAKE - I haven't used this myself, but it's description is "SVG sans the XML". This may cover your needs. Demos here http://glimr.rubyforge.org/cake/canvas.html#EditableCurve
One idea is to draw the image to a temporary canvas, then use getImageDate() to receive data for the pixel you are interested in, and check if its alpha value is 0 ( = transparent).
The following is a sketch of a solution. It is assumed that...
x and y are the coordinates of the mouse click event
you are looping over gameObjects, the current object being stored in the variable gameObject
the game object has been initialized with an image, x and y coordinates
The following code would then check whether the click was on a transparent area:
var tempCanvas = document.createElement('canvas');
if (tempCanvas.getContext) {
tempContext = tempCanvas.getContext('2d');
}
tempContext.drawImage(gameObject.img, 0, 0);
var imgd = tempContext.getImageData(x - gameObject.x, y - gameObject.y, 1, 1);
var pix = imgd.data;
if (pix[3] == 0) {
// user clicked on transparent part of the image!
}
Note: This is probably quite inefficient. I'm sure someone can come up with a better solution.
I have solve this problem using kintech.js, tutorials and examples can be found: http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/