Comment incorporer une carte-image dans une mise en page fluide?

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é:

  1. Existe-t-il un autre moyen de créer cette image de survol de point chaud polygonale sans utiliser de mappage d’images?
  2. Existe-t-il un autre moyen de redimensionner la carte-image et de superposer les slickbox tout en conservant la même taille de texte?

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.