Zones d'images et CSS

Bonjour,


Voilà j'ai un problème un peu compliqué à vous soumettre, je vais essayé d'être le plus clair possible...

Imaginons que j'ai une zone où apparait les images, mon bloc qui a une taille en hauteur fixe mais dont la largeur varie en fonction de celle du navigateur, donc il se rapprochera du carré si la résolution est petite et du rectangle si elle est grande, jusque là pas de problème.

Ce qui apparaitrait dans cette zone ce serait une carte et la liste de déroulante de sélection (cf : ce sujet) permet de choisir un quartier. Du coup l'idée est de définir une zone de la carte pour chaque quartier mais du fait du redimensionnement je ne pourrais pas l'exprimer en tailles réelles comment cela serait-il possible ?

Pour résumer, l'idée est d'avoir un point de centrage (un pour chaque quartier) autour duquel apparaitrait une zone de la carte différente selon la résolution, donc pas de déformation, mais une zone plus grande si la résolution est plus importante et plus petite si elle est plus petite !

A vous expert du CSS


Merci bien.

Est-ce que c'est assez clair ?

Et bien, si ta carte est une image, tu peux lui donner une largeur en pourcentage (width:100%; par exemple).

Si tu ne lui donnes pas de hauteur, celle-ci s'adaptera pour garder la proportion originale de l'image.

En revanche, il est à noter que l'image peut se pixeliser, ce qui est généralement désagréable à l'oeil.

Non ce n'est pas cela du tout, peut-être n'ai-je pas été explicite !

Imaginez que j'ai une (très) grande image et un cadre qui à une hauteur fixe mais une largeur variable.

Et j'ai surtout des liens, disons 10, quand on clique sur un lien ça affiche une zone de la carte c'est à dire que lorsque je clique sur un lien cela m'affiche une partie de la carte, centrée autour d'un point (coordonnées), et surtout une zone qui correspond à celle du cadre, ce même cadre pouvant avoir une taille différente en largeur selon la résolution du navigateur !


Est-ce plus clair ?

Pierrefox a écrit :
Est-ce plus clair ?

Pas des masses... (Enfin en tout cas moi je m'y perds).

J'avais vaguement compris quelque chose avec le premier message (sans arriver à visualiser exactement de quoi il s'agissait), mais maintenant je comprends autre chose avec le second message (là encore, sans arriver à visualiser exactement de quoi il s'agit).

Un ptit schéma pour accompagner cette description, peut-être ?


En tout cas, ça me semble fichtrement compliqué à gérer. À la rigueur, il me semble que c'est le genre de chose que l'on gèrerait plutôt en Flash. Ou bien le genre de choses sur lesquelles on revoit ses ambitions à la baisse, afin de revenir à quelque chose de plus conventionnel mais, « étonnamment », de plus compréhensible et de plus utile pour les utilisateurs.


Mais bon, n'ayant pas compris grand chose je parle sans doute dans le vide...

Une question le schmilblik serait-il une navigation de carte à la google maps?

^^

Bon alors reprenons pour le n-ième fois

Je pars d'une grande carte, pas la peine d'image c'est explicite. Ensuite imaginons que j'ai un cadre, un bloc si vous voulez qui a une taille fixe en hauteur mais dont la largeur se redimensionne avec le navigateur, je veux donc afficher un bout de la carte dans ce cadre.

Imaginons maintenant que j'ai un lien qui s'appelle centre de la carte (à définir avec des coordonnées) et lorsque je clique dessus la carte s'affiche dans le cadre mais sans être redimensionner ce qui donne ceci :


Zone affichée avec une largeur A

http://img49.imageshack.us/img49/7337/zone1ada9.jpg


Zone affichée avec une largeur B

http://img49.imageshack.us/img49/5569/zone1bim3.jpg


Vous remarquez que la zone affichée est toujours centrée autour du même point mais par contre on ne voit pas la même quantité de carte selon sa résolution d'où l'intérêt d'avoir un bloc qui n'a pas une taille définie en largeur !


Est-ce que ça va maintenant ? Et surtout est-ce possible en CSS ?
Modifié par Pierrefox (29 Apr 2007 - 23:36)

Ah ben voilà, moi j'avais compris que tu voulais faire une sorte d'image map fluide en largeur. Si tu n'as pas besoin de placer divers éléments sur ta carte, mais juste de centrer la carte et de gérer le « rognage » sur les bords, je vois deux solutions, en partant à chaque fois d'un conteneur de type bloc qui prendrait automatiquement toute la largeur disponible :

- travailler avec une image HTML positionnée en absolu, avec un left: 50px; et un margin-left:-Npx (N correspondant à la moitié de la largeur de l'image) ;
- travailler avec une image de fond appliquée à ce bloc conteneur, et centrée avec un background-position: center top;.

Si la zone où tu veux afficher les bouts de carte est une sorte de zone de zoom, une chose intéressante à faire pour les liens serait d'avoir :
- des liens HTML en bonne et due forme pointant vers l'image zoomée de la zone concernée ;
- une surcouche Javascript qui intercepte le clic sur le lien, et déclenche une fonction qui change l'image de fond de la zone de zoom (ou bien qui change l'image HTML si on a utilisé la première solution), pour la remplacer par la même image que celle en accès direct.

Du coup, même sans Javascript c'est utilisable.

Oula c'est pas simple... surtout que j'ai pris l'exemple du lien centré sur le milieu de la carte mais j'aurais d'autres liens centrés sur d'autres zones, en gros un centrage par quartier.

Chaque lien (quartier) pouvant être choisi avec ce menu déroulant


Désolé mais je comprends pas tout aux explications... qu'appelles-tu une image HTML ? Une image dans une page HTML ?
Modifié par Pierrefox (29 Apr 2007 - 23:55)