Discussion :

[Reynio]

Bonjour à tous.
Je refais avec un ami le site web d'une association et on a cherché des astuces pour que le site ne soit pas trop lourd tout en étant relativement beau...
On a donc pensé à placer une image réactive en guise de menu (balise map, donc). Ceci dit, notre image est redimensionnée avec CSS en pourcentage...

Résultat, lorsque l'on réduit la fenêtre pour voir le résultat sur les basses résolutions, les liens ne sont pas sur les bonnes zones.

Je vous passe des fragments de code.

D'abord, sur la page html, la map plus l'image (très grande comme vous pouvez le constater) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<map name="lien_menu">
	<area shape="rect" coords="805,420,935,464" alt="Contact" href="./accueil_evilgate.php?page=contact" />
	<area shape="rect" coords="815,470,910,520" alt="Liens" href="./accueil_evilgate.php?page=liens" />
<!-- ... etc etc on a tous les autres liens --->
    <area shape="rect" coords="750,214,900,261" alt="Photos" href="./accueil_evilgate.php?page=photo" />
</map>
<img id="fond" alt="Fond et menu du site" src="./fond/evilgate_fond.png" usemap="#lien_menu" />

Ensuite, le fragment CSS concernant l'image :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
#fond
{
position:fixed; /* pour que le menu soit fixe */
border:none;
bottom:0px; /* positionné en bas à 9% du bord gauche */
left:9%;
width:79.5%; /* mention de taille pour l'image en % */
height:95%;
background:none;
z-index:10;
}

Je vous avoue ne pas être sûr d'avoir posté mon message au bon endroit, car je ne sait pas où trouver une solution. Mes recherches n'ont pas été très performantes alors je ne sais pas si il existe une solution en html à mon problème. Comment faire pour que les zones réactives évoluent en fonction de la taille de l'image ? Est-ce possible avec HTML ou doit-on utiliser CSS ?

Merci d'avance.

[Er3van]

A priori la réponse se trouverait plutôt côté css.
D'ailleurs, MSIE ne reconnait pas position : fixed il me semble.

Ceci étant, je me permet d'émettre une réserve sur ta problématique :

on a cherché des astuces pour que le site ne soit pas trop lourd tout en étant relativement beau...

C'était d'actualité il y a encore 4-5 ans, quand plus de la moitié des foyers n'étaient pas équipé de l'ADSL. Désormais presque 90% des usagers ont l'ADSL, et surement plus de la moitié tournent à plus de 2Mo/s.

Je ne pense pas que le poids des images soient encore une contrainte forte dans le développement web, d'autant qu'avec des logiciels comme Photoshop on peut faire des jpeg de très bonne qualité qui ne pèse pas bien lourd, à peine plus qu'un GIF.

[Reynio]

Alors, effectivement, les versions 6 et inférieures de Internet Explorer ne reconnaissent pas l'attribut css fixed. J'ai testé l'affichage qui donne quelque chose d'assez amusant... Dommage que microsoft n'ai jamais jugé bon de mettre à jour son navigateur quant aux standard HTML et CSS fixés par le W3.

Sinon, pour ce qui est de ma problèmatique, il ne s'agit pas seulement d'une question de poids mais aussi d'utilisation. Je n'ai par exemple rien contre une application Flash dans un site web, mais je n'ai vu pratiquement aucun site uniquement en Flash qui était à la fois beau et pratique d'utilisation... (ceci dit, note bien que je n'ai rien contre le Flash qui est parfois bien pratique)
Et il est toujours frustrant, lorsque l'on se retrouve avec une basse connexion, d'essayer d'accéder à des sites lourds (par exemple, quand je cherche mes horaires de train depuis mon chalet en montagne, pas d'adsl... et vive la SNCF...) Si je peux faire du beau et léger, je le préférerais toujours à quelque chose de lourd et de pas forcément mieux, ce qui permettra à tout le monde d'être content (les hauts débits auront un affichage instantané et les bas débits n'auront pas trop à poireauter ). Mais on s'éloigne du problème !

Mon problème de map ici n'est pas un problème de poids ou de débit, mais un problème de résolution (et ne me dites pas que la plupart des gens ont un 1024 * 768 ou un 1280 * 800, parce que j'ai pas envie que les gens n'ayant pas ces résolutions se retrouvent embêtés, et je me suis déjà pris le bec avec un ami à ce sujet ).
Si vous pensez que je peux redimensionner mon menu et l'associer à des liens grâce au CSS, je vais aller poser ma question sur le forum en question.

Je laisse toutefois mon problème comme étant non résolu durant un jour ou deux étant donnée que, effectivement, il n'est pas résolu
Et si quelqu'un peut m'aider, qu'il n'hésite pas, je surveille le sujet.

[Gaillac]

C'était d'actualité il y a encore 4-5 ans, quand plus de la moitié des foyers n'étaient pas équipé de l'ADSL. Désormais presque 90% des usagers ont l'ADSL, et surement plus de la moitié tournent à plus de 2Mo/s.

Si je puis me permettre une remarque polémique :
Souvent dans cette partie du forum les gens se font ch**r pour avoir des trucs compatibles pour tous, même les vieux Nescape, Safari, etc...
Pourtant IE >= 6.0 + Firefox >+ 1.5 on doit faire largement plus de 90%

Alors pourquoi ne pas se préoccuper aussi des petites connexions?

[Er3van]

Tout à fait d'accord, mais la différence c'est qu'un site peut ne pas être accessible sous Safari car trop de bug, un site lourde sera toujours accessible par n'importe quelle connexion, juste une question de temps.

Pour ce qui est résolution, non je ne te dirais pas que 96% des ordinateurs ont une résolution supérieure ou égale à 1024*768

Ceci étant, tu as raison de défendre le principe qu'un site pour tous, et j'espère que tu trouveras une solution à ton problème

[Reynio]

Merci

En attendant, j'arrive pas à faire avancer le schmill-blick, moi...
Je vais peut-être me résoudre, en attendant de trouver une meilleure solution, de metter des div un peu partout... en les paramétrant en %, ça devrait marcher, mais ça va pas être beau...

Sinon, quelqu'un aurait une meilleure solution que la map ou les multiple div ?

[Candygirl]

Bonjour,

Comment faire pour que les zones réactives évoluent en fonction de la taille de l'image ? Est-ce possible avec HTML ou doit-on utiliser CSS ?

Tu peux le faire en css du moment que tes zones réactives sont de forme rectangulaires.

Je vais peut-être me résoudre, en attendant de trouver une meilleure solution, de metter des div un peu partout

Pourquoi utiliser de div ? Tu peux très bien positionner directement des liens.

De ce que j'ai compris, la solution choisie ne me semble pas très judicieuse. Y a-t-il des textes, pictogramme, informations écrites sur cette images ? la redimensionner via le navigateur risque de vite donner un résultat illisible. Sans compter que des liens vides ne sont pas non plus la panacée. Serait-il possible de voir l'image pour se faire une idée et peut-être proposer d'autres approches ?

[Reynio]

Ma foi, avec volontitude.

Mon collègue avait dessiné un prototype de ce qu'il voulait pour le site.
http://evilgate.gn.free.fr/Proto-Accueil-view_1024.jpg

Je trouve que la zone de texte est trop petite, mais il n'a rien voulu entendre (par contre, ne faites pas attention au texte, je rappelle qu'il s'agit d'un prototype... ).
Sinon, l'idée était de mettre l'image fixe (en gros, le cercle avec les bout de texte) de manière a toujours l'avoir sur la page.
Ayant prévenu mon juju que tous les navigateurs ne supportent pas le "fixed", je pense prévoir une deuxième feuille de style en cas d'affichage défectueux.

Après, il y a sûrement de meilleures solutions, mais étant donné que ça fait un bout de temps que j'ai pas touché à CSS et HTML, j'ai du mal à rassembler mes souvenirs. Et puis, je m'y prends sûrement comme un manche pour rechercher mes infos, mais je ne comprends pas comment avoir l'équivalent d'une map avec CSS.

Enfin, j'attends vos avis (en plus, un avis extérieur ça nous manquait un peu je crois), en attendant, je vais passer l'aspirateur !!

[Candygirl]

c'est joli mais pas pratique Je te rejoins sur la taille qu'il reste à disposition pour le contenu...

Perso j'adopterais des compromis. Quelques idées:

- Garder cette mise en page juste pour la page d'entrée, élaborer un design un peu plus léger pour la suite, genre pas autant de gros boutons.

- Faire en sorte que les boutons soient répartis avant la tengante verticale de "l'ovale" (je ne sais pas si je suis claire, la géométrie n'a jamais été mon truc ) de manière à ce que le design puisse s'étendre verticalement avec le double trait de chaque côté et l'arrondit avec l'accueil viendrait en footer

- Prévoir qu'il soit élargissable-rétrecissable en largeur en fesant en sorte que la jonction des arcs avec le titre puisse avoir lieu sur une certaine surface

Bref, design sympa mais pas simple à adapter à la résolution. En tous les cas je ne laisserais pas le soin de redimensionner cette image par le navigateur comme sous-entendu avec une largeur d'image en pourcentage.

Autrement, si tu viens passer l'aspirateur chez moi je veux bien monter ton site pendant ce temps

[Reynio]

Je vais exprimer ce que tu m'as dit avec d'autres mots pour vérifier ma compréhension... (je t'avoues avoir du mal avec la tangente, moi aussi...)

Tu me propose d'avoir les boutons sur la gauche, sur la verticale. Le reste en fait ne changerai pas trop ? Il faudrait juste prévoir un redimensionnement horizontal de l'image, mais alors pourquoi pas un redimensionnement vertical ? Ou alors j'ai rien pigé...
Oui, je crois qu'il s'agit de ça en fait (désolé d'être un peu long à la détente... en tout cas, si tu accepte de me ré-expliquer, tu m'en verrais comblé)

En fait, je crois que je vais choisir l'option aspirateur, c'est plus facile qu'on le croit...

En tout cas, Ju sera ravi de savoir que ses dessins plaisent !!