J’ai actuellement très mal à la tête lorsque je suis en train de créer un site que je suis en train de construire pour travailler à différentes résolutions. La navigation principale est une carte d’image qui doit remplir la majeure partie de la fenêtre. Je sais que cela est totalement dépassé, mais une carte-image semble être la seule solution non-Flash à permettre la délimitation de zones polygonales – j’aimerais bien une alternative!
J’ai finalement réussi à redimensionner le site pour permettre à l’image principale de s’afficher sur des moniteurs plus petits à l’aide de jQuery & CSS conditionnel, mais cela redimensionne également le texte dans les slickbox, ce qui est affreux!
Le site (très inachevé) est ici . Je sais que la navigation n’est pas encore tout à fait claire (survolez la souris et cliquez sur les couleurs de la peinture), mais je souhaite régler ce problème en premier.
Mes questions, en résumé:
Merci beaucoup – je me suis démené tout ce week-end!
Edit: L’approche en pourcentage ne fonctionne pas.
Dans ce cas, la seule chose que je peux voir va comme ceci:
Avoir des formes utilisant la notation en pourcentage:
Sur le premier tirage et sur chaque fenêtre redimensionner:
parsingr la propriété mycoords chaque zone
Diviser les pourcentages en quatre entiers
Calculer les pourcentages en fonction de la propriété .width() l’image
Définit la propriété coords la zone en fonction des valeurs de pixel ainsi calculées
Pas tout à fait sortingvial, mais cela devrait être à moitié facile à mettre en œuvre par un jQueryist expérimenté.
Ancienne réponse:
Hmm. Vous avez donc un imagemap qui doit redimensionner dynamicment?
Je n’ai jamais essayé moi-même, mais qu’en est-il des coordonnées relatives =
Aucune idée si cela fonctionne, mais vaut la peine d’essayer.
C’est un peu limité, mais vous POUVEZ créer des formes irrégulières avec HTML / CSS.
Une liste à part
CSS Play
Vous devriez pouvoir adapter l’un de ceux-ci à vos objectives.
MODIFIER:
En ce qui concerne le redimensionnement des images, vous devez utiliser des largeurs relatives dans votre CSS au lieu de les coder en dur
En fait, il existe un cadre flexible qui peut déjà prendre en charge une grande partie de cela pour vous: Consultez CSS Grid .
Un autre moyen de contourner les points chauds dans une conception fluide consiste à créer une image statique réactive avec des liens dans Edge Animate. Les points chauds (ou les couches qui agissent comme des points chauds) sont alors totalement réactifs. L’inconvénient est qu’une image de 50 Ko sera d’environ 120 Ko à la sortie de Edge. Cela dit, le travail est rapide.