CODEWITHSUNDEEP
htmlimagewebzooming
Mikhail
Mikhail

Reputation: 21789

Web page with several images zoomed in the same way - how to implement?

I'm experienced C++ developer doing image processing, but I have a task to create some web page to compare different results of several algorithms applied to one image.

I'm totally newbie in anything related to web programming so my question is what tool should I use to create such a web-page? It should show several images: source one and its variations produced by some algorithms. The challenge is I want to be able to examine all those images at once at different levels of magnifications at different locations.

I.e. initial page may look like this with source image on top:

enter image description here

Then I hover mouse cursor on source image, zoom in by turning mousewheel and drag it a little to the area of interest, so now I can see something like this:

enter image description here

Well, that's all. I don't need any pretty animations or fancy marquee previews. This is just a pragmatic task. I think, there are dozens of ways to do this, but what is the simplest way of doing this for a newbie?

Thanks. Maybe this question should have been posted at some different site more related to web-programming? Advice on where to post it would be welcom.

Upvotes: 0

Views: 421

Answers (1)

ScayTrase
ScayTrase

Reputation: 1830

I think you need to use JS with CSS tricks (JS to control CSS).

For example zoom image with widht\height parameters (CSS\HTML), then set the viewpoint using negative margins(CSS) and then crop image using overflow:hidden on div wrapped around image.

I can recommend you to use jQuery.

  • You can use it to manipulate images (http://api.jquery.com/animate/)

  • You can use it to tracking mouse (http://docs.jquery.com/Tutorials:Mouse_Position) and scrolling (http://api.jquery.com/scroll/ ) for interactive zooming

  • Also it is easy to manipulate CSS with .css method (http://api.jquery.com/css/)

Here is an example http://cs.scaytrase.ru/image_clip.html

You can control images with .clipin class values (clip, top and left) to set viewport and images` width and height parameters to set zooming

Left thumbnailes are 4x zoomed right picture (orig 1280x1024, zoomed to 500px to place)

Size of pictures controlled via common .clipout class

So you can display one big image, move mouse over it to display patch you need in several other pictures ot the same size.

Upvotes: 1

Related Questions