Aller au contenu

Dylav

Modérateurs
 Afficher le profil  Afficher son activité

  • Compteur de contenus

    45 943

  • Inscription

  • Dernière visite

  • Jours gagnés

    217

 Type de contenu 

Tout ce qui a été posté par Dylav

  1. Dylav
    Salut ! Je suis passé sur ton site en construction. Je ne comprends pas exactement ce que tu veux faire. Au point où tu en es, cette page comporte une seule zone sensible, l'image en bas à gauche. Quand on clique dessus, il apparaît en-dessous un agrandissement de cette image. Il ne semble pas que l'on puisse ensuite faire disparaître cet agrandissement. Je n'ai pas analysé le script. Pour ton problème avec IE, c'est que tu demandes initialement l'affichage d'une image inconnue*. Dans ce cas, IE fait apparaître un petit pavé blanc avec une croix rouge, alors que FF ne fait rien apparaître du tout. Donc, soit tu ne demandes pas l'affichage d'une image bidon, soit tu masques la boîte où s'affiche cette image (genre visibility:hidden), soit ton image bidon est transparente, mais j'ai un peu honte de te suggérer cette solution (tu peux très facilement en construire une en quelques secondes avec PhotoFiltre, logiciel freeware de retouche d'images que tu trouveras dans la section Téléchargements de Zébulon). * en réalité, après un survol rapide du script : au chargement initial, ce n'est pas l'image qui est inconnue, mais son nom (le résultat est le même), puisque le visiteur n'a pas encore opéré son choix. Il faudrait donc effectivement employer ma 3ème suggestion (une image entièrement transparente), et ajouter dans le script une ligne en-dessous de la 3ème instruction déclarative : qui sert d'affectation par défaut. PhotoTransparente.gif est bien sûr le nom de l'image transparente.
  2. Dylav
    Je comprends ton souci de réalisme pour cette page de cahier. Mais ce n'est "parfait" qu'en 1024x768 plein écran. Tente simplement de diminuer la largeur de la fenêtre du navigateur, et tu vas constater que les quadrillages verticaux du fond et de l'entête ne coïncident plus... C'est pour ça que je te suggérais d'abandonner le fond de l'entête. Pour la marge, tu n'as pas le choix, il faut que le trait rouge soit inscrit sur l'image de fond, puisque le quadrillage n'y est pas le même de part et d'autre. Pour les cadres, sans vouloir me répéter, c'est un problème d'abondance de traits. C'est pourquoi je te suggérais d'atténuer au maximum les cadres, par une couleur très neutre et une épaisseur très fine. Le gris des cadres des formulaires est, à mon avis, préférable au bleu de ceux des citations : on dirait un trait de crayon Une autre suggestion : pour les liens actifs, j'ai toujours trouvé pisseux le bleu standard employé. Je lui préfère soit un bleu beaucoup plus sombre (par exemple #000066), soit carrément une autre couleur (comme un vert assez sombre #006600), au choix de ta créativité. Et puis, foin des conventions, j'ai pris l'habitude de ne pas souligner les liens actifs, mais de leur faire changer de couleur (rouge #990000, par exemple) au survol du curseur. Exemple : a {color:#000066;text-decoration:none;} a:hover {color:#990000;}
  3. Dylav
    ... rieuse
  4. Dylav
    Non non, Catcat, Answaz n'a plus de bâillon... mais elle n'en a peut-être pas encore pris connaissance. En attendant, bûche et
  5. Dylav
    Bonjour Balltrap34, Je ne comprends toujours pas pourquoi ce mécanisme ne fonctionne pas chez toi. J'en ai profité pour rendre le source un peu plus orthodoxe, en introduisant une feuille de style. Pour nous simplifier la vie, j'ai aussi réintégré le script dans la page. D'où un fichier unique. Reprends le source par copier/coller, pour l'enregistrer par exemple sous le nom Galerie.html, et y modifier [éventuellement] les noms des 8 images. Ne change surtout rien d'autre, pour faire un premier test. <html><head> <title>Dispo pour galerie</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> <!-- Galerie.js ----------------------------------------------------------- // // Use this script to view full-size images from thumbnails. // The full-size images can be different sizes. // The pop-up window will change to the appropriate size. // // This script and many more are available free online at // The JavaScript Source -> [url="http://javascript.internet.com"]http://javascript.internet.com[/url] // ------------------------------------------------------------------------ // function VoirPhoto(img) { if (document.Photo.src != img) { ChargerPhoto(img); document.Photo.src=img; document.all("foto").style.width=document.Photo.width; document.all("foto").style.height=document.Photo.height; } document.all("foto").style.visibility="visible"; } function ChargerPhoto(img) { var Photo=new Image(); Photo.width=0; Photo.height=0; Photo.src=img; ControlerPhoto(img); } function ControlerPhoto(img) { if ((Photo.width==0)||(Photo.height==0)) { Refresh="ControlerPhoto('"+img+"')"; intervallo=setTimeout(Refresh,20); } } function StopPhoto() { document.all("foto").style.visibility="hidden"; } // ---------------------------------------------------------------- End --> </script> <style type="text/css"> #galerie { text-align:center; font-size:11px; } .img { border:0; margin-right:2px; } #foto { position:absolute; visibility:hidden; top:120px; left:0; } </style> </head> <body onUnload="java script:StopPhoto()"> <div id="galerie"> <a href="java script:VoirPhoto('Galerip1_big.jpg')"> <img class="img" src="Galerip1_small.jpg" alt="" /></a> <a href="java script:VoirPhoto('Galerip2_big.jpg')"> <img class="img" src="Galerip2_small.jpg" alt="" /></a> <a href="java script:VoirPhoto('Galerip3_big.jpg')"> <img class="img" src="Galerip3_small.jpg" alt="" /></a> <a href="java script:VoirPhoto('Galerip4_big.jpg')"> <img class="img" src="Galerip4_small.jpg" alt="" /></a> <br /> Cliquer sur une image pour la voir en taille réelle... </div> <div id="foto" onClick="StopPhoto()"> <img name="Photo" src="bidon.jpg" alt="" /> </div> </body></html> Voici ce qu'il devrait se passer, lorsque tu double-cliques sur le source HTML, ton navigateur ouvre la page, où tu ne vois que les 4 vignettes, centrées côte à côte en haut de la page, lorsque tu cliques sur une première vignette, la photo en vraie grandeur correspondante apparaît, en-dessous de la ligne de vignettes, si tu cliques sur une seconde vignette, la photo en vraie grandeur correspondante vient remplacer automatiquement la précédente, si tu cliques sur la photo en vraie grandeur, elle disparaît. Si ça ne se passe pas comme ça, je baisse les bras... mais j'ai horreur de ne pas comprendre ! P.S.: juste un petit truc, au début de la 4ème ligne, j'ignore pourquoi le < a été remplacé par < alors qu'il faut lire
  6. Dylav
    bûche
  7. Dylav
    Dis-moi, tu n'aurais pas paramétré le blocage des scripts JavaScript, par hasard, dans ton FireFox ? Parce que c'est souvent conseillé par sécurité. Mais ce ne doit pas être ça : puisque l'image en vraie grandeur apparaît, c'est que la fonction VoirPhoto s'exécute... Je crois que je n'ai plus les yeux en face des trous, pour ce soir. Je vais réétudier le problème demain, si tu n'y vois pas d'inconvénient. Bonne nuit.
  8. Dylav

    [Résolu] Petite info

    Dylav a répondu à un(e) sujet de Sew-Oszka dans Programmation

    Il est vrai que tu fixes formellement les coordonnées du coin haut gauche du menu par rapport au coin haut gauche de l'écran. Mais ces coordonnées, tu les donnes en pourcentage des dimensions de l'écran (top 42%, left 5%, dans mon exemple). De sorte que la position du coin dépend des dimensions de l'écran !
  9. Dylav
    Es-tu sûr de bien avoir ça, en fin de page HTML ? C'est la séquence qui précise que, si tu cliques sur la photo, tu déclenches la fonction JavaScript "StopPhoto", qui la rend invisible. ... <div id="foto" style="visibility:hidden" onClick="StopPhoto()"> <img name="Photo" src="bidon.jpg"> </div> </body></html> Maintenant, pour que la grande photo s'affiche sous la galerie, il faut que tu la repositionnes verticalement plus bas. Dans le script Galerie.js, dans la fonction "VoirPhoto", tu vas lui dire qu'elle doit commencer à 100 pixels du haut de la page (top), au lieu de 0.
  10. Dylav
    Je serais toi, j'aurais un fond homogène de haut en bas (avec juste la particularité de la marge, sans quadrillage vertical). Dis donc, en ce moment tu as deux marges rouges ? N'aurais-tu pas, dans la feuille de style, laissé traîner la bordure droite rouge de ta <div> menu de gauche ? Suggestion : comme tu as déjà un quadrillage en image de fond, tu devrais alléger tous tes encadrements (par exemple en leur donnant une couleur gris très clair, et une largeur minimale de 1px). Parce que quadrillage sur quadrillage, ça fait un peu chargé, non ?
  11. Dylav
    Ah, OK ! Mais si tu cliques sur l'image en vraie grandeur, elle redevient invisible, et tu redécouvres ta galerie de vignette en-dessous. Après, tu as plusieurs possibilités. La première, c'est d'avertir ton visiteur qu'il peut cliquer sur l'image pour l'escamoter. Tu peux également séparer ton écran en deux parties ne se recouvrant pas, l'une qui affiche la galerie, et l'autre destinée à accueillir l'image agrandie. Ensuite, tu peux laisser libre cours à ton imagination, ta créativité et tes goûts esthétiques...
  12. Dylav
    Bonsoir Ricou, Tu as oublié la possibilité de l'attribut background-repeat:repeat-y ! Il te suffit de faire une image de 1 carreau de hauteur, donnant une image beaucoup moins lourde, de 2048px de largeur certes, mais de 20 ou 30 de hauteur seulement ! L'image devrait devenir 50 ou 60 fois moins lourde (certes plus lourde que tes 524 octets d'origine, mais très raisonnable)
  13. Dylav
    Je ne comprends pas le comportement que tu m'expliques. En effet, lorsque tu cliques sur une vignette, tu déclenches un script qui se contente de dévoiler une autre partie de la "page" : il n'y a donc pas enchaînement sur une "nouvelle" page. On sent bien, au fonctionnement, que la galerie de vignettes n'a pas été rafraîchie, et la page est restée parfaitement stable. D'ailleurs, chez moi, la flèche "page précédente" du navigateur reste grise : elle est inactive, il n'y a pas de pile historique. Et ceci est vrai avec mes deux navigateurs, FF 1.5 et IE 6.0 Tu travailles avec quel navigateur, toi ?
  14. Dylav

    [Résolu] Petite info

    Dylav a répondu à un(e) sujet de Sew-Oszka dans Programmation

    En fait, tu dois décrire l'image de fond d'abord (c'est la seule différence avec ta dernière version), puis le menu (en position absolue) qui viendra se superposer à elle. L'attribut z-index ne s'avère pas nécessaire. J'ai repris ton image de fond et fabriqué six petites images transparentes en 125x35 pour les choix du menu. Et voici une page qui fonctionne, - l'image de fond change effectivement de dimensions, - le menu bouge également, d'une façon qui devrait te satisfaire ! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Annie Lebaillif</title> <style type="text/css"> <!-- #Layer1 { position:absolute; top:42%; left:5%; width:125px; } #Layer1 img { border:0; width:125px; height:35px; } --> </style> </head> <body> <img src="AFarriereplan.jpg" width="100%" /> <div id="Layer1"> <a href="AFaccueil.html"><img src="AFaccueil.gif" alt="accueil" /></a> <a href="AFformation.html"><img src="AFformation.gif" alt="formation" /></a> <a href="AFactualites.html"><img src="AFactualites.gif" alt="actualités" /></a> <a href="AFcours.html"><img src="AFcours.gif" alt="cours" /></a> <a href="AFbook.html"><img src="AFbook.gif" alt="book" /></a> <a href="AFcontacts.html"><img src="AFcontacts.gif" alt="contacts" /></a> </div> </body> </html> Il te restera à effacer, sur ton image de fond, le menu imprimé en dur.
  15. Dylav
    On n'ose pas dire Bravo, on a l'impression de polluer le topic. Bravo, Sebnutt !
  16. Dylav

    [Résolu] Petite info

    Dylav a répondu à un(e) sujet de Sew-Oszka dans Programmation

    Tu la mets entre les balises <div> et </div>, qui marquent le début et la fin du bloc, tout simplement. <div id="Layer1"> <img src="Racine du site/Arrière_plan.jpg" width="100%" /> </div>
  17. Dylav
    Je ne comprends pas ce que ce topic faisait dans le JRAD ? J'ai dû, au moment du [split], oublier de le déverser ici. Je tiens à m'excuser auprès des membres du JRAD pour la gêne occasionnée. L'affaire est close. Le sujet aussi.
  18. Dylav
    Si si, c'était dans les tout premiers jours de la saison 3. C'est aussi pour ça que j'ai arrêté d'y jouer. D'ailleurs, on ne le voit plus, le caneton...
  19. Dylav

    [Résolu] Petite info

    Dylav a répondu à un(e) sujet de Sew-Oszka dans Programmation

    Avais-tu l'intention de mettre ton image dans la <div> ou en dehors ? Parce que là, c'est sûr, elle est dehors. Pour la position absolute, tu peux certainement trouver un compromis qui satisfasse la présentation pour toutes les résolutions. C'est pour cela que je te proposais de choisir, pour les éléments de ton menu, une taille qui permettre de tout afficher en 800x600 sans débordement, et de garder le même emplacement et la même taille pour les autres résolutions. Evidemment, le rendu ne sera pas exactement identique, mais très similaire et, à mon avis, satisfaisant même esthétiquement.
  20. Dylav
    Pas de problème. On va détailler un peu. Tout d'abord, au niveau du nommage des images, tout se passe dans la page HTML (le script JavaScript reçoit un nom d'image en paramètre, dans la variable img, donc rien à changer). Dans cet exemple simple, la page est constitué d'un tableau (balise <TABLE>) ne contenant qu'une seule ligne (balise <TR>), cette ligne comportant 4 colonnes (balise <TD>), qu'on va appeler des cases. Faisons un zoom sur la première case. <TD width=50> <A HREF="java script:VoirPhoto('Galerip1_big.jpg')" BORDER="1"> <IMG SRC="Galerip1_small.jpg" width=50 BORDER="0"></A> </TD> La case (balise <TD>) contient une ancre (balise <A>) qui délimite une zone active contenant une image (balise <IMG>). Cette image, la vignette, est identifiée par son attribut SRC, ici sous le nom Galerip1_small.jpg. Lorsque tu cliques sur cette vignette, le script JavaScript VoirPhoto est lancé, avec en paramètre le nom de l'image en grandeur réelle, ici Galerip1_big.jpg. Ici donc, tu dois ranger, dans le même répertoire que la page HTML, 8 images dont les noms de fichiers seront Galerip1_small.jpg, Galerip2_small.jpg, Galerip3_small.jpg, Galerip4_small.jpg pour les vignettes, et Galerip1_big.jpg, Galerip2_big.jpg, Galerip3_big.jpg, Galerip4_big.jpg pour les images en vraie grandeur. Je te laisse découvrir le détail du fonctionnement du code après avoir étudié les langages HTML et JavaScript (cf. les tutoriels du Site du ZérO, par exemple). Et, pour bien faire, il faudrait que je prenne le temps de réécrire cette page, en prenant soin de séparer contenu [X]HTML et mise en forme (feuille de style CSS).
  21. Dylav
    Au lieu de saisir ton texte long dans la condition EXCEL elle-même, mets-le plutôt dans une autre cellule (de ta feuille elle-même, ou d'une autre feuille spécialisée). Ta formule en sera d'autant plus allégée, et ne devrait pas partir en erreur : =SI(condition;D4;"") Si la condition est vraie, ta cellule se verra attribuer le commentaire contenu dans la cellule D4. Pour obtenir des retours à la ligne dans une cellule, tu as deux possibilités, soit tu demandes des retours à la ligne automatiques, par Format / Cellule / Alignement / Renvoyer à la ligne automatiquement, soit tu provoques toi-même des retours à la ligne fixes, par la combinaison de touches Alt + Enter, et tu peux bien entendu combiner les deux méthodes.
  22. Dylav
    Je relance d'une bûche, pour voir... et
  23. Dylav
    bûche
  24. Dylav
    Pour les cours, une excellente piste, les tutos du Site du ZerO
  25. Dylav
    Tiens, inspire-toi de cet exemple dépouillé, dont voici le principe, - tu définis un bloc <div>, que tu rends initialement invisible (visibility:hidden) - au clic sur une vignette, tu remplis le bloc avec l'image grande taille et tu le rends visible (visibility:visible) - au clic sur la grande image, tu rends à nouveau le bloc invisible. Pour cela, il te faut bien entendu 2 versions de chaque image, la vignette et la grande taille. Inconvénient : le mécanisme, certes simple, est activé en JavaScript, et ton visiteur peut refuser l'exécution de scripts JavaScript (sécurité). Pour respecter ta consigne d'apparition au survol : tu remplaces la notion de clic sur le lien actif par une notion de survol (événement onMouseOver). Perso, je trouve ce déclenchement par survol fatigant (pour le visiteur) parce que difficile à maîtriser. C'est plus stable par clic. A toi de voir. Juste un détail pour finir : ce code HTML n'est pas bien propre, ça manque de feuille de style (séparation des descriptions du contenu et de sa mise en forme). La page HTML <html><HEAD> <title>Dispo pour galerie</title> <script LANGUAGE="JavaScript" src="Galerie.js"></script> </HEAD> <BODY onUnload="java script:StopPhoto()"> <div align="center"> <TABLE BORDER="1" bordercolor="white" cellspacing=3 cellpadding=0 width=150> <TR> <TD width=50> <A HREF="java script:VoirPhoto('Galerip1_big.jpg')" BORDER="1"> <IMG SRC="Galerip1_small.jpg" width=50 BORDER="0"></A> </TD> <TD width=50> <A HREF="java script:VoirPhoto('Galerip2_big.jpg')" BORDER="1"> <IMG SRC="Galerip2_small.jpg" width=50 BORDER="0"></A> </TD> <TD width=50> <A HREF="java script:VoirPhoto('Galerip3_big.jpg')" BORDER="1"> <IMG SRC="Galerip3_small.jpg" width=50 BORDER="0"></A> </TD> <TD width=50> <A HREF="java script:VoirPhoto('Galerip4_big.jpg')" BORDER="1"> <IMG SRC="Galerip4_small.jpg" width=50 BORDER="0"></A> </TD> </TR><TR> <TD colspan=4> <DIV ALIGN="CENTER"><font size=2> Clique sur une image pour la voir en taille réelle...</font></DIV> </TD> </TR></TABLE></div> <div id="foto" style="visibility:hidden" onClick="StopPhoto()"> <img name="Photo" src="bidon.jpg"> </div> </body></html> et le script Galerie.js <!-- Galerie.js ----------------------------------------------------------- // // Use this script to view full-size images from thumbnails. // The full-size images can be different sizes. // The pop-up window will change to the appropriate size. // // This script and many more are available free online at // The JavaScript Source -> http://javascript.internet.com // ------------------------------------------------------------------------ // function VoirPhoto(img) { if (document.Photo.src != img) { ChargerPhoto(img); document.Photo.src=img; document.all("foto").style.top=0; document.all("foto").style.left=0; document.all("foto").style.position="absolute"; document.all("foto").style.width=document.Photo.width; document.all("foto").style.height=document.Photo.height; } document.all("foto").style.visibility="visible"; } function ChargerPhoto(img) { var Photo=new Image(); Photo.width=0; Photo.height=0; Photo.src=img; ControlerPhoto(img); } function ControlerPhoto(img) { if ((Photo.width==0)||(Photo.height==0)) { Refresh="ControlerPhoto('"+img+"')"; intervallo=setTimeout(Refresh,20); } } function StopPhoto() { document.all("foto").style.visibility="hidden"; } // ---------------------------------------------------------------- End -->
×
×
  • Créer...