Develop Reference

Check on which part was clicked?

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"/>

Zoom-in and Zoom-out image when Mouse Scroll

I want to zoom-in and zoom-out image on mouse scroll in HTML. There are multiple img tag without ID. So how can I do it using JavaScript or Ajax?

Just throwing the answer for the ones that will search for an answer to this question.
First, you will need to find a system to detect the mouse scroll.
If you are courageous, you can develop it yourself.
If you're not, you can find some pretty good libraries (ex : MouseWheel with JQuery).
Next, you will find another two ways to zoom in and out.
Easy way
First, let's cheat a bit.
When you will have to zoom, just multiply the height and width of your image by a factor you will decide.
To have height and width into a variable (JQuery)
var height = $('#image').height();
var width = $('#image').width();
For each scroll you will receive, you will only have 2 choices.
Once you are able to know if the mousewheel goes up or down, you will just have to do something like this (JQuery)
height *= 2;
width *= 2;
This way, by doubling the size of your image, you will have the impression to zoom in.
Less easy way
If you want to zoom in as you would do in a GMap object, you can do something like that.
var firstHeight = $('#image').height();
height *= 2;
width *= 2;
scalechange = (actualHeight / firstHeight) - 1;
offsetX = -(coordX * scalechange);
offsetY = -(coordY * scalechange);
$("#image").css('top', offsetY + 'px');
$("#image").css('left', offsetX + 'px');
First, you have to have the first height of your image.
Next, you will double the size of your image (zoom effect).
Next step is to calculate the scalechange. You will be able to find multiple explanations and many way to calculate it, my method is as good as another.
The two offsets presented are the new positions that your image will adopt (simple factor calculation, it's like making x percent on a price).
Last part is to set the new values of your image.
In the end, you will be able to zoom and unzoom with ou without centering the image at your mouse position.
Be careful : The calculation above in only to zoom-in. You will have to do some maths to get the zoom-out!
Go further ?
Another way to go further would be to place your image in a div.
<div id="imageContainer" style="overflow:hidden;">
<img id="image" src="YourImage">
</div>
By setting
"overflow:hidden;"
to your div, your image will zoom.
But everything that will overflow your div will be hidden.
If you set your div to the original size of your image, like this (JQuery)
$("#imageContainer").css('height', $('#image').height());
$("#imageContainer").css('width', $('#image').width());
Then you will have an image displayed that will always be at the same size, but your zoom will be effective.
If you combine this to a drag'n'drop method, you have a GMap object-like (zoom in-out, moove the zoomed image, ...)
Hope it will help someone!

Is HTML5 hit detection possible?

I have used the Canvas code provided elsewhere on this site to create a screen where I have several overlapping transparent pngs with the non-transparent parts being irregular shapes. I can get the color under the cursor and that is great. But my shapes are all the same color and I need a way to get the ID of the particular shape as well so I know which one was clicked on. Imagine a map made of overlapping pngs fo reach country and you want to detect which country was clicked on. From what I can tell, id detection only applies to rectangular regions. Any suggestions?
$('#myCanvas').click(function(e){
var position = findPos(this);
var x = e.pageX - position.x;
var y = e.pageY - position.y;
var coordinate = "x=" + x + ", y=" + y;
var canvas = this.getContext('2d');
var p = canvas.getImageData(x, y, 1, 1).data;
var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
alert(hex);
});
This code gets and displays the color (findPos and rgbToHex are separate functions left off for clarity). I need an id! Help!

Even with transparency, the images are all rectangles. You then know which images are at a clicked point by rectangle intersection - check your array of images and their x,y points with width,height for point intersection. You then come up with an array of possibly clicked images. If there's only one in the list, you are done.
The images have an implied Z-order of the reverse order in which you wrote them, meaning, an image is overwritten by the next image written which overlaps it. You can use that to know which order to try them in for hit-testing if more than one is at the point clicked. The only trick is to detect if an image pixel is transparent or not.
To detect transparency for a pixel point clicked in a single image, you could keep a second hidden canvas element. Clear it, then write the target image to it at the same position, and use the same code to see if the clicked pixel within the second canvas is the transparent color. If it is, repeat this process with the next image in the Z-order until you get the image where a non-transparent pixel was clicked.
A small but important optimization is to check the color clicked first, and if it's the transparent color you already know none of the images were clicked on a non-transparent point.

How can I best implement rollover and rollout events for multiple overlapping elements?

Problem:
I'm working on a website where there is a "dial" that displays a number of tabs representing different divisions of an umbrella company:
At the moment I have everything prepared in HTML/CSS (positioning of each of the tabs). The inner circles are on a higher z-index as the tabs will need to animate outward when rolled over (I can achieve this part). The images for the tabs actually look like this:
Unfortunately it didn't occur to me until now that because of the mechanics of rollover and rollout in JavaScript, the boundaries for each item are square, meaning they overlap all over the place. For example, the centre circle's rollover area is actually this:
Which detracts some massive clickable/rolloverable areas on the inner circle of tabs. This effect then stacks with each of the tabs, rendering a standard approach non-viable.
Approach:
This is fine, what I plan to do now is measure the distance and angle of the mouse from the centre of the dial and use these values to determine the relevant tab, and work from there. I'll basically do the following:
Collect angle (using atan2) and distance (using pythag).
Apply my .click() to the entire dial, and work with these values from there.
Use setInterval() to constantly check which item is rolled over and work with its animation from there.
Question:
I'm not exactly sure how to implement what I am doing (with JQuery). I know how to do all the Math stuff once I have the coordinates that I need, I'm just not confident in getting the actual coordinates (ensuring the same results cross-browser).
How can I best gather the coordinates of:
The centre of my dial.
The cursor (assuming that the cursor is within the same axis as the centre of my dial i.e. rolling over the centre of the dial will mean both sets of coordiantes are the same).
Note:
Taking the above, anything that achieves the same result (being able to have proper rollover detection for overlapping elements) is equally as helpful.

To get the center:
var dialPos = $( "#Dial" ).offset();
var center = {
x: dialPos.left + $( "#Dial" ).width() / 2,
y: dialPos.top + $( "#Dial" ).height() / 2
};
Cursor coordinates:
$( "#Dial" ).mousemove(function( e ) {
var x = e.pageX - center.x;
var y = e.pageY - center.y;
});

You can define an image map over the stack of layers. The map will define clicking/hovering regions, and the browser will take care of hit detection. With Adobe ImageReady, I have mapped a portion of your reference image so that "Reprise" and "Initiative" are hotspots:
ImageReady produced the following HTML:
<img src="images/Imagemap.png" width="488" height="488" border="0" alt="" usemap="#Imagemap_Map">
<map name="Imagemap_Map">
<area shape="poly" alt="" coords="82,336, 138,303, 130,287, 123,265, 120,238, 125,206, 136,179, 158,152, 178,136, 209,122, 244,117, 244,55, 215,60, 184,67, 158,77, 122,101, 97,130, 73,169, 62,202, 59,224, 58,253, 61,281, 73,318" href="#">
<area shape="poly" alt="" coords="73,72, 112,111, 138,89, 161,76, 187,66, 214,59, 244,57, 244,0, 205,4, 165,12, 118,34, 94,51" href="#">
</map>
(As you can see, mapping arbitrary regions can be exausting, and I dare to say virtually impossible without the use of a tool.)
You'd apply the map to a transparent image on top of everything. The final assembly can be imagined as the following stack:
The regions were highlighted just for reference. The real composition should be 100% transparent.
Good luck!

Click on given element in canvas

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/