Image "fit screen" et zones réactives

Bonjour,

Je dois réaliser la chose suivante:

- une image en "fit screen" ou "full screen" (je veux dire, qui se redimmentionne automatiquement à 100% de la hauteur et largeur du navigateur)

- des "zones réactives" qui permettent des actions (genre, affichage d'une "pop-up" au survol de la souris") avec la particularité que les zones doivent pouvoir être définies de façon relative puisque l'image est affichée proportionellement à la taille de la fenêtre du navigateur

- je ne doit pas utiliser de Flash (compatibilité iPad rquise)

Je pense donc que JS va être mon ami...

De votre côté, avez-vous des pistes ou des suggestions?

Merci pour votre aide!


EDIT: je suppose que j'aurais du poster cela dans le forum "JavaScript, DOM et API Web HTML5" mais je ne vois pas comment pouvoir le déplacer... Désolé. peut-être un modérateur le fera? Merci!
Modifié par GiB (25 Jan 2012 - 13:32)

Bonjour,

La description de ton projet est un peu effrayante.

Dans quel cadre dois-tu réaliser ceci ?

@Laurie-Anne

Hello et merci pour l'encouragement!

C'est "simplement" un site à réaliser selon les spécifications du directeur artistique. Sa demande doit être réalisable, bien que non banale...

Il y a quand même une imprécision dans ma description...

Puisque l'utilisateur peut donner à sa fenêtre la proportion qu'il souhaite, si je veux garder une image proportionnelle, je ferai 100% de la largeur et la hauteur en proportion, ou vice-versa.

Mais je ne vais pas déformer l'image (et du coup les zones réactives) en l'affichant à 100% de la hauteur ET de la largeur.

Si je garde ainsi le ratio hauteur / largeur, je risque d'avoir des zones réactives invisibles dans certaines proportions de fenêtre. Mais au moins l'image n'est pas déformée.

Le plus difficile, vous l'aurez compris, c'est de définir les zones enproportion pour que ça joue au resizing de la fenêtre et donc de l'image.

petit up...