[Probleme] Iframe, Object et autres joyeusetés...

Bonjour à tous

Je suis webmaster d'un site sur l'aeronautique (www.aerodream-fr.net), muni d'une galerie photos.

Un exemple d'image sur la galerie, pour que vous puissiez mieux comprendre :
http://photos.aerodream-fr.net/affichage2.php?img=331#img

Ce qui me pose probleme depuis maintenant plusieurs semaines :

J'ai mis en place des fleches pour que le visiteur puisse faire défiler les photos. Seulement, à cause de la bannière et des boutons tout en haut, et comme la page se recharge (systeme dynamique en php), le visiteur est obligé de faire défiler la page pour aligner la photo avec son écran.

J'ai alors pensé à plusieurs solutions :

- Faire une ancre au dessus de la photo et mettre l'ancre dans le lien (ou charger l'ancre via un javascript). >> Ne marche pas. En effet, l'ancre ne prend pas effet au premier chargement de la page. Si l'on charge la page une premiere fois, que l'on va sur une autre photo et qu'on revient sur la photo précédente, c'est seulement maintenant que l'ancre prend effet.

- Faire disparaitre carrément la partie du haut avec les boutons et le header. Mais cette idée ne me plait pas trop.... Voir même pas du tout.

- Utiliser des Iframe ou des Object comme dit sur le blog (c'est d'ailleurs en cherchant sur google que j'ai pensé à poster ici en voyant l'article d'alsacréations sur ces balises). >> Ce serait la solution idéale étant donné que les liens pour changer d'image seraient à l'interieur de la frame ou de l'objet, alors la page entière ne se rechargerait pas, et l'utilisateur n'aurait donc qu'à faire défiler la page qu'une seule fois, l'alignement ne changeant pas puisque la page générale ne se recharge pas. (J'espère avoir été clair).
Problème : Ca me plairait bien, seulement ça ne me semble pas être la meilleure solution, d'une part parcque iframe et object sont deux balises dont les lectures peuvent varier selon le navigateur (et sachant que mes visiteurs sont aussi bien sous FF qu'IE) mais aussi, et surtout parce que ces deux balises exigent une taille FIXE. Cependant, je suis obligé à cause du caractère dynamique des pages de mettre TOUTES les pages du site en iframe (pour permettre la transmition des variables par l'URL) et les pages du site (je parle en fait de la galerie, une sorte de mini-site à part) ont une hauteur qui varient du simple au triple (page d'accueil, ou bien liste de miniatures par exemple). Ce qui ferait que sur la page d'accueil, j'aurais une barre de défilement inutile et surtout deux hauteurs d'écran vides en dessous du contenu...

J'en fait donc appel à votre aide, soit si vous avez une meilleure solution Soit si vous savez comment faire pour corriger ou contourner les problemes mis en évidence par les solutions qui me sont venues à l'esprit

D'avance, merci beaucoup pour votre aide.

Clement "GunMan" CHRISTOMANOS.

Bonjour et bienvenue sur ce forum,

GunMan a écrit :
- Faire une ancre au dessus de la photo et mettre l'ancre dans le lien (ou charger l'ancre via un javascript). >> Ne marche pas. En effet, l'ancre ne prend pas effet au premier chargement de la page. Si l'on charge la page une premiere fois, que l'on va sur une autre photo et qu'on revient sur la photo précédente, c'est seulement maintenant que l'ancre prend effet.

C'est à priori une solution tout à fait intéressante, et tout à fait fonctionnelle. Encore faut-il faire les choses correctement. Tu as fais ceci :

<balise id="img"></balise>

L'élément balise n'existe pas en HTML.

Un exemple d'ancre correctement formée :

<a href="#" name="img" id="img"></a>

Les attributs href et name ne sont théoriquement pas nécessaires, mais seront utiles pour la compatibilité avec certains navigateurs.


Sinon, ton code HTML est tout de même parfois assez surprenant. Et contrairement à ce qui est annoncé sur la page, il est loin d'être valide HTML 4.01. Niveau accessibilité, de nombreux points laissent également à désirer.
Modifié par Florent V. (05 May 2007 - 15:46)

Bonjour

C'est sûr que le code n'est pas spécialement clair, et niveau accessibilité, c'est carrément le néant. Mais en attendant l'hypotétique venue de visiteurs non-voyants je préfère éviter de devoir refaire tout le code de mon site étant donné la masse colossale de travail que cela réprésente

Concernant la validation W3C, la galerie etait en faite valide... il y a longtemps J'ai tout simplement omis de retirer le logo. De plus, je n'ai pas grand interêt à chercher absolument cette validation dans la mesure ou mon site n'a que très peu de problemes de compatibilité et que la plupart de ces problèmes ne sont que des interpretations différentes du code et non des choses plus génantes. J'ai en fait commencé le HTML il y a très longtemps (1998, j'avais alors 7 ans) et je ne me suis toujours pas habitué aux standards HTML4.0... Et dans la mesure ou mes visiteurs s'interessent rarement à mon site pour son code

Mmmh, j'avais oublié que j'avais fait le test avec "balise", je pensais avoir remis le fichier original.

J'ai fait beaucoup de tests avec A (ancre conventionelle) mais sans les attributs href et id. Je vais de ce pas essayer.

L'élément <balise> existe pourtant bel est bien et est considéré comme une ancre par tous les navigateurs avec lesquels j'ai testé cela. J'avais trouvé ça sur Commentçamarche.com si mes souvenirs sont bons.

Je vais tester ça

Bon, je viens de tester avec les attributs href et id en plus.

Ca ne change toujours rien, je me retrouve avec une ancre qui n'est active que quand je recharche la page.

Mais, n'est ce pas le propre d'une ancre tout simplement ?

J'avais testé il y a un temps quelque chose :
- Une page avec une ancre dessus
- Une deuxieme page, sur laquelle il y a un lien vers l'ancre de la deuxieme page.

Je pars de la deuxieme page, clique sur le lien. J'arrive sur la premiere page mais au début et non à l'emplacement de l'ancre ! C'est seulement en faisant Precedent, puis en recliquant sur le lien que cela m'a conduit au bon endroit de la page.

GunMan a écrit :
Mais en attendant l'hypotétique venue de visiteurs non-voyants je préfère éviter de devoir refaire tout le code de mon site étant donné la masse colossale de travail que cela réprésente

Il faut le répéter à chaque fois, mais allons-y une fois de plus : la démarche d'accessibilité ne s'adresse pas aux non-voyants. L'accessibilité ne vise pas un public spécifique, mais utilise des moyens standardisés pour proposer un contenu accessible au plus grand nombre, quels que soient les handicaps ou les outils utilisés.

Lire cet article :
http://blog.alsacreations.com/2007/04/30/351-validite-et-accessibilite

GunMan a écrit :
De plus, je n'ai pas grand interêt à chercher absolument cette validation dans la mesure ou mon site n'a que très peu de problemes de compatibilité et que la plupart de ces problèmes ne sont que des interpretations différentes du code et non des choses plus génantes.

Un passage par le validateur avant de poser une question sur ce forum spécialisé dans les Standards W3C t'aurait pourtant permis de te rendre compte que l'élément balise n'existe pas. À la place, j'ai été obligé de te l'indiquer moi-même.

De plus, ton Doctype est incorrect, car tronqué (il manque l'URL de la DTD). Les navigateurs web qui interprètent ta page l'interprètent donc en mode Quirks, ce qui n'est jamais un bon plan. À titre personnel, je ne travaille jamais en mode Quirks : les navigateurs y sont trop imprévisibles. Par exemple, il se pourrait qu'ils interprètent mal les liens vers des ancres en mode Quirks, mais qu'ils les interprètent mieux en mode standard...

(Remarque, je ne dis pas que ça corrigera ce problème précis, mais au moins on part sur de bonnes bases lorsqu'on travaille en mode standard.)

GunMan a écrit :
Et dans la mesure ou mes visiteurs s'interessent rarement à mon site pour son code

La qualité du code a également une incidence sur la qualité perçue par l'utilisateur. Si ça n'était pas le cas, on ne se prendrait pas la tête...

GunMan a écrit :
L'élément <balise> existe pourtant bel est bien

Non. Il n'existe pas en HTML 4, et il n'existe pas non plus en XHTML 1.0 (qui reprend HTML 4). Je doute par ailleurs qu'il ait jamais existé en HTML 1, 2 ou 3. Les noms des éléments HTML sont en général des mots anglais ou les abréviations de mots anglais. « Balise » est un mot français.

On trouve parfois <balise> dans certains exemples donnés en ligne, mais il est logiquement entendu que « balise » remplace le nom de l'élément, un peu comme si j'écrivais par exemple :

<élément attribut="valeur de l'attribut"> contenu </élément>

Il n'y a pas d'élément HTML nommé « élément » ni d'attribut HTML nommé « attribut ».

GunMan a écrit :
Ca ne change toujours rien, je me retrouve avec une ancre qui n'est active que quand je recharche la page.

Mais, n'est ce pas le propre d'une ancre tout simplement ?

Non, ça n'est pas le propre d'une ancre. Par exemple, si tu suis le lien suivant :
http://www.la-grange.net/w3c/html4.01/struct/text.html#edef-CODE
tu devrais arriver pile au bon endroit sur cette page plutôt longue.

Sans creuser particulièrement la question, je vois deux pistes :
- une conséquence du mode Quirks ;
- une conséquence de certaines erreurs de syntaxe (le validateur indique que tu as des balises fermantes qui ne correspondent à aucune balise ouvrante).

Essaie peut-être également de donner un nom différent d'"img" à ton ancre. Ça n'a peut-être aucune incidence, mais en général mieux vaut éviter d'utiliser des noms correspondant à des éléments du langage.

GunMan a écrit :
J'avais testé il y a un temps quelque chose :
- Une page avec une ancre dessus
- Une deuxieme page, sur laquelle il y a un lien vers l'ancre de la deuxieme page.

Je pars de la deuxieme page, clique sur le lien. J'arrive sur la premiere page mais au début et non à l'emplacement de l'ancre ! C'est seulement en faisant Precedent, puis en recliquant sur le lien que cela m'a conduit au bon endroit de la page.

Bizarre, en général je n'ai pas ce genre de comportement. Mais c'est peut-être parce que les sites que je visite et qui utilisent des ancres sont tous rendus par les navigateurs en mode standard, et très rarement en mode Quirks.

- Concernant l'element Balise, il est vrai que ça m'est paru curieux. Après une petite reflexion c'est tout simplement parcqu'une balise quelquonque (img par exemple) qui a l'attribut ID crée une ancre. Le fait que ça marchait était du simplement au fait que si l'élément n'était pas reconnu, l'attribut ID l'était bien, lui (cqfd). (Et comme un c**, quand j'ai vu que ça marchait j'ai cru que la balise existait...).

- En mode Standard (avec une declaration doctype correcte) ça ne donne rien non plus

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml"> 

- Changer le nom n'y fait rien non plus. Ici le nom de l'ancre est 'aero' :
http://photos.aerodream-fr.net/affichage2.php?img=104#aero

- Logiquement, les balises fermantes en trop ne devraient pas être la cause du problème étant donné que l'ancre est présente est fonctionne bel est bien (au second chargement, mais elle fonctionne). Maintenant si elle pouvait marcher du premier coup, ça m'arrangerait quand même

J'essaie, je cherche, et je fais la chasse aux balises fermantes dont il est devenu difficile de determiner l'origine (à cause du code dynamique)

C'est quand même la première fois en 8 ans de pratique de l'HTML que je suis face à problème aussi curieux. Pas toi ?
Modifié par GunMan (05 May 2007 - 20:40)

Ah, je pense savoir d'où vient le problème (petit éclair d'inspiration tout à coup).

Le moteur de rendu du navigateur veut afficher l'ancre demandée en haut de l'écran. Mais que se passe-t-il si la page est trop courte pour être défilée vers le bas ? Bien entendu, le navigateur affichera l'ancre le plus haut possible, mais bloquera si la page ne peut pas être défilée.

Maintenant, imagines que tu n'aies pas l'image principale dans la page. La page serait alors très courte. Eh bien, lorsque le navigateur charge ta page pour la première fois, celle-ci est, à ses yeux, effectivement très courte. Car il tente de faire défiler la page avant d'avoir complètement chargé les images, et ne peut donc pas savoir que tu as une image de 683px de haut en plein milieu de la page. Par contre, lorsque tu recharges la page, il connait la taille de tous les éléments, et agit en conséquence.

Bref, la solution est toute simple : il te faut indiquer les dimensions de toutes les images volumineuses, et avant tout celles de l'image centrale. À vue de nez, toutes tes images font 1024x683px.

<img src="photos/highdef/300.jpg" alt="F-86A Sabre - FU-178" border="1" width="1024" height="683">

C'était effectivement ça

Magnifique ! Depuis le temps que j'essaie de le faire marcher, je n'y avais même pas pensé. (Honte sur moi de ne pas avoir réfléchi à ça au passage).

Bon, et bien merci infiniement

Je vais maintenant essayer de bosser sur le site pour agir contre les robots qui spamment mes forums et mon livre d'or tous les jours. J'ai lu pas mal de trucs sur le net à propos de ça : Pour toi, quelle est la meilleure solution ? Cryptogramme à rentrer pour poster ?

GunMan a écrit :
Je vais maintenant essayer de bosser sur le site pour agir contre les robots qui spamment mes forums et mon livre d'or tous les jours.

Bon courage.

GunMan a écrit :
J'ai lu pas mal de trucs sur le net à propos de ça : Pour toi, quelle est la meilleure solution ? Cryptogramme à rentrer pour poster ?

Pas forcément un cryptogramme, ça peut être une question de logique élémentaire (ce qui posera toujours problèmes à certains utilisateurs, mais reste à priori acceptable). Voir par exemple sur le blog d'Alsacréations à quoi ça peut ressembler.

Pour ma part, j'ai un blog Dotclear dont les commentaires ne sont pas restreints, mais filtrés en fonction d'une liste noire et de mots clef interdits (grâce au plugin Spamplemousse). Ça marche plutôt bien, même s'il faut aussi faire quelques suppressions manuelles à l'occasion.

Merci Je vais essayer de voir pour la blacklist de mots clés C'est vrai que c'est intelligent, d'autant plus que c'est quelque chose de difficilement contournable par les robots (si on agit au niveau d'apache par exemple, avec le htaccess ).

Merci encore pour l'aide Tout marche à perfection, et c'est maintenant beaucoup plus confortable pour visionner toutes les photos les unes à la suite des autres