Recalculer image map après redimensionnement de la fenêtre

Question

J'ai un problème intéressant:

Mon girfriend (peintre ...) veut avoir une page web comme ceci:

1. La première page est juste une image, à travers tout l'écran - sans curseur etc. Il y a donc un problème de redimensionnement des images pour différentes résolutions.
2. Sur cette image sont des fenêtres, où un utilisateur peut naviguer dans le reste de la page.

SOLUTIONS:

1. Ainsi, pour le premier problème il y a une solution agréable - jquery. Cela fonctionne très bien, pas de problème.

2. Pour le deuxième problème, il y a des cartes d'image, qui fonctionne bien.

PROBLÈME:

Comment combiner les première et deuxième solutions? Le seul problème pour lequel je n'ai pas encore trouvé de solution est de calculer dynamiquement les coordonnées d'imagemap pour une forme polygonale. (c'est-à-dire quelle que soit la résolution de l'écran, les propriétés de la imagemap resteront toujours au bon endroit).

Pour les formes rectangle, j'ai trouvé this. Qu'en est-il de la forme poly?

Est-ce que quelqu'un a des idées sur la façon d'accomplir cela?

Answer 1

La solution doit être la même que pour la forme rectale, car vous ne faites que mettre à l'échelle les coordonnées dans les deux cas.

Un point est un point et les deux formes sont constituées de points.

Answer 2

Vous pouvez utiliser le plugin JQuery ImageMapster pour vos images-maps. Ce plugin peut recomposer des zones après le resizig et avoir d'autres fonctionnalités utiles.

Et jamais si vous décidez d'écrire votre propre solution, je suppose que l'exploration du code du plugin peut vous aider dans votre tâche de redimensionnement.