Develop Reference

Click on button inside canvas element

I would like to click on verify button that is embedded inside canvas element using jquery or selenium.
example
Please suggest me How i click inside canvas.

You should have a look at easeljs, it's a JS library which gives you the option to select an area of the canvas to be clickable. https://createjs.com/getting-started/easeljs

You can do it simple using the Canvate library.
http://www.sakuracode.com/canvate
You can use any image as Button (jpg, png, svg), even with irregular shapes using opacity.
Here you are an example.
container.startDrag();
https://codepen.io/EiseiKashi/pen/BxNbmj
You can add other listeners as: click, rollOVer, rollOut, mouseDown, mouseUp.
And more, you can add all the images as you want and animate them.
For any question, please let me know!

Slider inside image

I would like to put a Slider inside an image (specifically an iMac), like they have on unbounce homepage. I think I need a div and then jQuery, but I have no idea where to start.
The thing is the image inside the Mac changes, but not the iMac image itself.
If that helps, I am using WordPress, so I could use any plugin too.
Do you have any idea on how to do that?
Thank you,
http://i.stack.imgur.com/HVe98.png

I would suggest you to use HTML canvas for complex image rendering.
You can potentially dynamically draw what you want, where you want I'm them.
You can use canvas to rotate, move, overlay images and add listener to click events to it.
See here to start :
Dynamically add image to canvas.
Or here:
Dynamically add image to canvas

Late, but may be helpful (by increasing level of difficulty):
Use the iMac image as a frame PNG, leaving its inside "empty" using transparency. Behind it, the slider
Make a slider which every image is framde by the iMac
Position an slider hovering the iMac image

Create a listener for a hyperlink

I'm creating a jQuery application where a user can draw on a canvas. I need to add the functionality to dynamically enable a hyperlink when a certain percentage of the canvas has been drawn.
My program can detect what percentage of the canvas has been drawn on. Now, all I need is a way to create/enable a hyperlink on the canvas so that when the user clicks on it, he is redirected to the hyperlink URL.
I googled a way to do this, but couldn't find a good solution/explanation on how to go about doing this.
Any ideas or suggestions?

You should take a look at preventDefault().
function disableLink(e){e.preventDefault()};
document.querySelector("a").addEventListener("click", disableLink)
document.querySelector("button").addEventListener("click", function(){
document.querySelector("a").removeEventListener("click", disableLink)
})
Here is a Fiddle to play with.

HTML5 Best way to define coordinates for parts of an image, that when someone clicks on that we can find which part clicked

I am new to HTML5 and i have working on converting simple flash game to HTML5. What i have to do is, i am having an image of a character, so i have define the parts of the image in such a way that when user clicks on the head it should say you have clicked on head, and if some one click e.g on hand it should say you have clicked on hand or it is clicked in the face of the character.
I have done googling and find we can define different shapes and i have drawn and got successfull
So i just want to know that in my image what should i have to do, i have to use images for different parts or i have to draw character using HTML5 bezierCurveTo function.
Please tell me the best way and how can i do that.
Thanks

You can do it either with Images, SVG Elements, or Canvas.
If you have Images or SVG Elements, you can hook the onclick event of the Image to tell when it is clicked. Images will be the rectangular bounding box of the image, but SVG Elements will be the tight bounds. Use document.getElementById(<id>) to get the element from your page.
If you are using Canvas, you can use also use onclick but inside the callback, you can use CanvasRenderingContext2D.isPointInPath() to see if the point is in the head. This will allow you to check the exact bounds of the head, not just the rectangle around the head.
canvas.onclick = function(event) {
context.beginPath();
// Recreate the head path here.
if (context.isPointInPath(event.offsetX, event.offsetY)) {
// Click was within the head
}
};

Zooming images on page load

I would like to get the effect of a zooming image when someone opens a new page. So each page should have it's own image that zooms in every time the page is opened. I have an example in this website: http://www.fashionclub70.be/ (Click the "light version").
If a user clicks on a menuitem the corresponding page is opened and the image zooms in. on this website it is done with Flash, but I would like to use only Javascript for this. I don't really have a working knowledge of Flash. Do you have some pointers for me so I can successfully implement this?
Thanks
Maarten

I guess the easiest solution would be to use something like this : http://sliderjs.org/. Basically, you would put an empty place holder and load your image to some invisible div element.
Then, kick off a transition effect with a callback bound to your image's onload event.

You could use a canvas and put a picture on it. Evertything you would need for this can be found here:
http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
Edit: If you want to use CSS3 you could use
#pix{width:200px;height:300px;transition: all 2s;}
#pic:hover{transform:scale(4) translate(100px,100px)}
This would make the div tagged with this id move to the right and become 4 times as large during a period of 2 seconds.
The :hover part is just an event that would make the transition tick. Guess you want to use :active instead.