We Keep Coding

How can i draw a part of an image on top of a html page depending on my mouse movement? (with or without canvas)

I want to draw an image on top of my html page depending on my mouse movement.
How can i do that? Is it a better approach to put the image below the rest of the html and scratch the html somehow away, or tu put the image above it and add it partially on top.
I found solutions on the internet with 2 images on top of each other where the top one is erased with canvas, but since i have multiple elements i want to overwrite, i have no idea how to solve it.

Assuming I've interpreted the question correctly, that the requirement is to allow the user to 'scratch away' at the page gradually revealing an image, you could do it either way.
There are libraries that will create a canvas of a page (or part thereof) such as htm2canvas. Using one of these you turn your page into an image, place it over the given image and remove (make transparent) pixels on the top canvas as the mouse moves. The drawback with this approach is that it's possible the conversion of the HTML to canvas isn't totally complete. There may be some aspects for example of CSS that aren't correctly rendered.
To be sure therefore it's probably better to do it the other way round. Lay a blank canvas over the page and copy the image to another canvas with the same dimensions but which is outside the viewport. As the mouse moves over the blank canvas copy the relevant pixels from the offscreen canvas to it.
If you could confirm that I've understood your question correctly I could go into more detail.

Image with a link in a specific point

I need to create a website with this kind of function:
I have an image (like a park area), so in different points of this image I must create a div which will do a hover effect and show a textbox with an image (or maybe a link to it).
My main doubt is that I have no idea how can I get certain points of this image to create a div with this hover effect.

Please check the below URL's. Hope this may helpful
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap
http://www.howtocreate.co.uk/tutorials/html/imagemaps
http://www.outsharked.com/imagemapster/

you can do with jQuery. Please, firstly look at this link. You can take mouse x and y position on image. Then on x and y position, you can do, what you want.

Shrink dimensions of gif as part of animation

Trying to find out if it's possible to 'shrink' an animated gif. Not in file size but in regard to the dimensions of the image.
If not, is there any way to catch the animation with jquery/javascript so I can shrink the size my moving the image out of view with css?
Or alternately after there any libraries out there for simple image manipulation type stuff for HTML5 Canvas?
EDIT:
The first mock up of the image is at http://swmohappening.info/. It's essentially a website that I'm doing to help out a local youth group retreat.
I'm wanting to shrink the portion of the letters that run-on so it's a more manageable banner to leave on the page. I do need to maintain the dimensions of the center/main section of the image.

Take a look at the animate function in jQuery - you can change the size of an image and specify the time that takes too.

As what I've read makes it seem as though the jquery animate will simply change the dimensions of an image (which isn't what is needed at the moment). I think I'll most likely end up using animate to move the image out of view to 'shrink' it that way...

Rollover image hides the element below from mouse. How to fix?

Here is an example I've put together to better illustrate this problem:
http://www.saeidmohadjer.com/users/saeid/sandbox/javascript/image_map_rollover/test3/test3.html
When you go from image A area to image B area or reverse, there are locations where the rollover doesn't show because the image map below is covered with transparent area of rollover image. Is there a way to make the rollover image hidden from mouse? In ActionScript I could do this by setting an object's mouseEnable property to false to get it out of the way, but I don't know how I can do this in HTML/JavaScript.
The rollover image (pink) is absolute positioned with a higher z-index above the black & white image. The practical usage is for highlighting floorplans on a floorplate of a building whenever mouse rolls over a floorplan.
Thanks,
Saeid

I don't know if this would work for your situation, but an easy way to do it could be to make your black & white image partially transparent (instead of white) and put the pink image below it (that is, give it a lower z-index). Does that help at all?

Rotate along Z- axis in HTML5 - Flip card

I just came across a simple flash animation on flip card
The Playing Card Effect
The card has 2 images "front" image and "back" image,
when clicked the card toggles with rotating along Z axis
showing the front and back face accordingly.
Can the same effect be achieved using HTML5 / Canvas / CSS3 ??
PS: I'm complete newbie/noob when it comes to HTML5 and CSS3 stuff.
Thanks all

When rotation makes it so the card shows its backside, switch the graphic to the "back side" graphic. Otherwise, set the image src to the front side graphic.
You can also skew with the html5 canvas context using setTransform. Or you could take the slow route and manipulate pixel data manually.

This isn't a answer, but I saw what I believe you're talking about implementing done after submitting the form featured here: http://sublimevideo.net/
A lot of their CSS and JS is obfuscated, but from what I can glean it looks like they're using webkit transforms via a JS class switch. It's very fluid and actually surprised me by how stunning it looked. Hopefully some of the source can help you out.