Clever Geek Handbook

Recalculate image map after window resize

I have an interesting problem:

A friend of mine (artist ...) wants a webpage like this:

  • The first page is just an image, across the entire screen - no slider, etc. Thus, there is a problem of resizing images for different resolutions.
  • This image contains some windows in which the user can navigate the rest of the page.

SOLUTIONS:

  • So there is a good solution for the first problem - jquery. It works great, no problem.

  • For the second problem, there are image maps that work great.

PROBLEM:

How to combine the first and second solution? The only problem I haven't found a solution to yet is how to dynamically calculate the imagemap coordinates for a polygonal shape. (that is, regardless of the screen resolution, the imagemap properties will always stay in the right place).

For rectangular shapes, I found this . How about polyform?

Does anyone have any ideas on how to do this?

+2


source to share


2 answers


You can use the jQuery ImageMapster plugin for your graphic maps. This plugin can dynamically re-read areas after resizig and have other useful features.



And if you'd like to write your own solution, I believe that learning the plugin code can help you with your resizing task.

+2


source


The solution should be the same as for the straight shape, because you just scale the coordinates in both cases.



A point is a point, and both shapes are made up of points.

0


source






More articles:


All Articles