Sorry for the awful title, I wasn't sure of the correct terminology to use.
I have put a world map on a webpage with a canvas window on the image. This world map is far too large to view at once so the user can pan the image within the window. I would like to also place a "thumbnail" version of the image on the page with a rectangle cursor over
layed on top of the thumbnail. When the user moves the cursor over the thumbnail, the large map will move (self-pan) to match the area under the rectangle cursor on the thumbnail![enter image description here][1]
There is an example in the image provided. You will see a small portion of a worldmap. To the right is a thumbnail of the image with a rectangle cursor. When that cursor is moved, the world map will pan.
I am using HTML5 and javascript. No other languages. If someone could point me to an example or set me on the right path, I would be very grateful.
Thank yoU!
Related
I am working on a canvas tool in which i will drag and drop images.
There is a large image which work like a background and then there will be another images which will be dragged.
But i need to cut some area of image so they can't override some area of previous image.
After image drag
Please review the above link and help me how can we achieve this.
Regards
Aman
I am searching a radial progress bar. recently found in stackoverflow using canvas. but the circle not smooth edges. how to fix this blurry image.
JSFIDDLE : http://jsfiddle.net/fd3k7prh/
Image:
It seems OK on my screen. As long as you don't scale canvas inside e.g. CSS it should not be blurred. Please make sure whether you have zoom enabled in your browser (e.g. by holding ctrl+mouse scroll) and your browser is displaying 100% image.
As Canvas is displaying vector image, it should not be blurred in normal zoom. However, zooming it in will always make it blurry, because it needs to be overscaled.
Imagine a responsive app with image face tagging. You can drag an area, tag the person and it records the coordinates using (http://odyniec.net/projects/imgareaselect/)
But imagine the image get resized with css to adapt for the window size, the absolute coords don't fit anymore of course.
What would be a better strategy to achieve this?
I want when user roll over on my image it shows a part of big image of the same picture i known its possible in flash but how i don't Known ??
here is the link of the live example the site use the same technique in flash
click here
Thank you in advance
the big image is masked with the magnifier sprite and it's moved according to the position of magnifier (to show the correct part )
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?