[résolu] Faire charger toutes les images au début

[dj.dom]

Lynx n'est pas obligé d'être installé

Ah d'accord. Dans ce cas je vais essayer.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)

[dj.dom]

Wah, c'est la premiere fois que je vois un navigateur textuel... C'est vraiment étrange à utiliser...
Mon message apparait, je suis content.

Puisque de toute façon l'interet de ce site est d'exposer mes travaux graphiques, qu'il ne contient quasiment aucun texte, et ne présente donc aucun interet pour quelqu'un qui utilise un navigateur textuel, je considère le problème comme résolu en mettant simplement ce message d'avertissement.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)

[Nucleos]

Puisque de toute façon l'interet de ce site est d'exposer mes travaux graphiques, qu'il ne contient quasiment aucun texte, et ne présente donc aucun interet pour quelqu'un qui utilise un navigateur textuel, je considère le problème comme résolu en mettant simplement ce message d'avertissement.

Je n'ai pas très bien compris la suite de ce message mais je me permets quelques réflexions pour toi et surtout pour les gens du futur.

• La technique Pixy's Rollover (expliquée en français sur alsacreations) est bien plus efficace et logique que des préchargements avec des div de 0 pixels.
• La plupart du temps, l'argument du navigateur textuel n'est pas d'exister pour lui-même, c'est pour montrer comment un site peut être visible à partir d'un logiciel totalement différent (qui en l'occurence met en exergue la bonne ou la mauvaise sémantique d'une page.) Les fondements d'Internet s'enracinent dans un respect de l'indépendance du media qu'on utilise pour y accéder, tout type de logiciel et de matériel devrait pouvoir accéder à Internet... En particulier, ça sert aux handicapés moteurs/visuels/auditifs de construire un site bien codé, mais aussi aux portables qui peuvent accéder à Internet... Pas vraiment aux navigateurs textuels, même si c'est très pratique de pouvoir utiliser Lynx quand plus rien ne marche.
• Les gens qui utilisent quelque chose d'approchant un navigateur textuel savent bien que la plupart des sites ne sont pas codés pour eux. Il ne sert donc à rien d'ajouter une mention genre "ahah ça ne marche pas et c'était prévu".
• Artistique ou pas, un site bien codé (et notamment sans tableaux) fait gagner du temps à tout le monde, sauf au développeur initial.

[dj.dom]

Oui, j'essai justement d'utiliser cette méthode, car j'ai l'impression qu'avec ma technique les images continuent à ne pas se charger au démarrage avec IE. Par contre j'ai un petit soucis. Dans l'exemple on utilise la même image pour toutes les parties du menu, moi chaque partie à sa propre image. Je pense donc qu'il faut que je recopie plusieurs fois une partie du code, pour chaque image, en changeant de nom à chaque fois, mais je ne vois pas laquelle... Je ne dois quand-même pas remettre tout ce code pour chaque image ?
Regardez : http://dj.dom.free.fr/pro/images2d3d.htm

Pour ce qui est des tableaux, je viens seulement de comprendre qu'on peut mettre un div dans un autre div... Je pensais qu'on ne pouvait pas, c'est pour ça que je voulais utiliser un tableau.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)

[Nucleos]

Je pense donc qu'il faut que je recopie plusieurs fois une partie du code, pour chaque image, en changeant de nom à chaque fois, mais je ne vois pas laquelle... Je ne dois quand-même pas remettre tout ce code pour chaque image ?

Ça dépend du code que tu utilises, je ne sais pas. Fais-moi un exemple où tu recopies tout sur deux ou trois images (isole le problème), et je te dirais qu'est-ce que tu peux enlever ou comment tu peux modifier les choses.

Regardez : http://dj.dom.free.fr/pro/images2d3d.htm

Ça s'affiche très mal chez moi, qui suis avec une configuration assez usuelle, à savoir du 800x600 sous Firefox.Je n'ai pas de barre de défilement horizontal, ce qui bloque tout.

Pour ce qui est des tableaux, je viens seulement de comprendre qu'on peut mettre un div dans un autre div... Je pensais qu'on ne pouvait pas, c'est pour ça que je voulais utiliser un tableau.

Généralement c'est l'erreur inverse qu'on fait : vouloir mettre trop de div

[dj.dom]

J'utilise le code de cette page :
http://wellstyled.com/files/css-noprelo ... mple2.html
Je crois que j'ai compris. Il faut que recopie

Code : Tout sélectionner

div.outer a {
	display: block;
	margin: 0; padding:0;
	width:100%; height:100%;
	overflow:hidden;
	font: bold 13px/1 Georgia, serif;
	color:#039;
	text-decoration: none;
	background: url( 'bars.gif' ) top left no-repeat;
	}

div.outer a:hover {
	background-image: none;
	color: yellow;
	}
div.outer a:active {
	color: black;
	}

et

Code : Tout sélectionner

<div class="outer"><a href="#"><span>First</span></a></div>

pour chacune de mes images en remplaçant "a" par une autre lettre. C'est ça ?

Ça s'affiche très mal chez moi, qui suis avec une configuration assez usuelle, à savoir du 800x600 sous Firefox.Je n'ai pas de barre de défilement horizontal, ce qui bloque tout.

800x600 Je croyais que plus personne n'utilisait ça en dehors du mode sans echec depuis l'époque des 486... du coup j'ai fait toute ma mise en page pour du 1024x768 minimum..... Bon j'ai retouché un peu juste le code de la page, ça passe en 800x600 mais il manque un petit bout de mon menu.
Merci de me prévenir pour le barre de défilement. Voilà c'est corrigé.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)

[Invité]

Aaaaaaaaahhhhhhhhhh !
Non, la balise <a href="...">...</a> c'est pour les liens hypertextes. Ne t'amuse pas à mettre des trucs du genre <b></b> <c></c> parce que là tu vas tout casser.

Message envoyé avec : Mozilla/8.0 (compatible; MSIE 8.0; Windows NT 6.0)

[dj.dom]

ah d'accord... donc je n'ai encore rien compris au truc....
En attendant, je ne sais toujours pas comment utiliser cette méthode avec plusieurs images différentes. Quelqu'un pour me venir en aide ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)

[dj.dom]

Bon, en attendant de trouver une solution, je vais mélanger les deux. Je vais garder mes événement java, mais je vais utiliser des images contenant deux images, que je déplacerai au lieu d'en charger d'autres. Ceux qui désactivent java auront juste le texte toujours gris dans mon menu, tand pis.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)

[Nucleos]

ah d'accord... donc je n'ai encore rien compris au truc....
En attendant, je ne sais toujours pas comment utiliser cette méthode avec plusieurs images différentes. Quelqu'un pour me venir en aide ?

Je pense pouvoir te venir en aide, mais je ne comprends pas ton problème.

Voilà comment j'aurais procédé si j'avais dû créer ta page (ce n'est pas ce que tu demandes - d'accord - mais ça te simplifiera la vie plus tard àmha et de toute façon la méthode de Pixy ne peut s'appliquer que dans un certain contexte que je ne t'ai pas encore vu utiliser, à savoir une image fixée seulement dans le code CSS.) :
- le code HTML contient beaucoup de textes et presqu'aucune image. En particulier pour le menu. (Pour lequel je mets en place une liste d'élements li encadré par un ul.) Le reste de la page (tout sauf le menu) est contenu dans un div dont l'id est "contenu".)
- le code CSS :
On mets en position: absolute le contenu et on met un top: 0 et un left correspondant à la taille en pixel des images du menu.
On met en float: left le menu. (C'est une configuration classique qu'on retrouve dans un bon article d'openweb.)

J'iimpose alors avec le CSS de ne plus afficher de texte et d'afficher à la place une image (fixe pour le moment) pour chaque élément du menu.
Pour cela, on procède à un hack pour ne plus afficher le texte (genre on met un span autour du texte, et on associe au span un "display: none").
Ensuite, on décrète que chaque li (qu'il va falloir baliser avec un id différent pour chacun) a une taille déterminée (c'est justement parce que la taille est déterminée qu'on va pouvoir plus tard utiliser le hack de Pixy que j'ai décrit) et l'image de fond (propriété "background: url(image.png);") correspondant à son nom.

Ensuite, on utilise la méthode de Pixy en jouant sur le sélecteur :hover comme décrit dans l'article.

Désolé de ne pas avoir pris le temps de le faire moi-même, la dernière fois, ça m'a plutôt ennuyé d'avoir pris du temps à évangéliser, j'aurais mieux fait de laisser les gens cracher. Donc voilà.

Par contre, je vais probablement être disponible sur mon ordi demain. Si tu veux de l'aide (en particulier, si j'ai parlé chinois dans tout mon message), mon mail doit traîner un peu partout...

[dj.dom]

J'ai lu ça cette nuit et j'ai rien compris... Donc j'ai réessayé là et... je ne comprend toujours pas...
Tu peux me réexpliquer ça en faisant comme si tu d'adressais à un enfant de 5 ans stp ?


Voici les images qui composent mon menu :

Comme tu vois, elle sont toutes différentes et n'ont pas toutes la même hauteur.

Je compte faire comme dans la technique du lien donné plus haut, et mettre sur une seule image, une en dessous de l'autre, chaque paire d'images avec les écritures. En normal on ne voit que la partie avec l'écriture grise, et quand la souris passe dessus, la propriété top de l'image change, laissant voir à la place la partie avec l'écriture verte.

Je ne comprend pas comment on peut remplacer OnMouseOver par le CSS... C'est avec Div.Hover ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)

[Nucleos]

Tu peux me réexpliquer ça en faisant comme si tu d'adressais à un enfant de 5 ans stp ?

Tu veux pas plutôt qu'on discute par MSN/IRC/Jabber/whatever ? Contacte-moi.

Je ne comprend pas comment on peut remplacer OnMouseOver par le CSS... C'est avec Div.Hover ?

Non, div:hover.

[dj.dom]

Non, je n'utilise pas de logiciel de chat.
Merci pour le lien, c'est bien expliqué dedans.
J'ai ma petite idée, dis-moi si je fais fausse route :

Je vais créé un div pour chaque image qui contient mes deux images. Dans le style, je met :

#menu01{ height:(moitié de la hauteur de mon image)px; width:(largeur de mon image)px; background: url(<url de mon image qui contient les deux images>); top=0;}

#menu01:hover{ top = (moitié de la hauteur de mon image)}

et dans mon menu je les appellerai juste avec
<div id="menu01"></div>
et je fais pareil avec menu02, 03, 04, etc.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)

[Nucleos]

Non, je n'utilise pas de logiciel de chat.

Ça me surprend. Il y a Chatzilla. Enfin...

Merci pour le lien, c'est bien expliqué dedans.

Ce lien doit devenir une référence, c'est d'ailleurs... la référence.

J'ai ma petite idée, dis-moi si je fais fausse route :

Oui ! C'est exactement ça ! Sauf que je te proposais plutôt de faire une liste et d'appeler chaque élément <li id=""></li> et de mettre du texte dans les li pour que ton menu soit un minimum accessible et compréhensible et... indexable par google.

[dj.dom]

Je suis fier de moi, j'ai enfin compris quelque-chose à la programmation web !

Je vais garder la méthode que j'ai décrite, car elle est claire dans ma tete et je risque moins de me perdre avec. La tienne a l'air mieu, mais j'ai du mal à la comprendre donc je serai perdu, et le jour où je voudrai changer des trucs dans ce menu je ne saurai plus comment faire...

Merci pour tout.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)