Agrandissement et images côte à côte.

Salux à tous,
J'ai fait des recherches, mais sans trouver de réponses.
Sur mon site (www.boisbievre.fr) j'ai certaines images (pas toutes, celles dont le titre est souligné) qui s'agrandissent lorsqu'on passe le curseur dessus.
Jusque la, pas de souci.
Cependant, je voudrais que des images qui puissent s'agrandir soit côte à côte sur la même ligne. Ce que je n'arrive pas à faire.
De même, je n'arrive pas à faire en sorte qu'une image simple (sans agrandissement) et une image qui s'agrandit soit côte à côte.
J'ai fait plusieurs essais, mais sans succès.
Voulez-vous m'aider à résoudre ces problèmes ?
Merci de votre aide.

Je vous copie le style pour les images qui s'agrandissent.
.

/* Styles pour agrandir les images*/
body {	
  height:500px; 
  }

img {
  border:1px solid black;
  }	

.thumb {
  position:relative; 
  top:0;
  left:0; 
  }
  
.thumb a {
  margin:0;
  text-decoration:none;
  }

.thumb a:hover {
  background-color:black;	
  }

.thumb a .grand {
  display:block;
  position:absolute; 
  width:0px; 
  }

.thumb a:hover .grand { 
  position:absolute; 
  top: 0px;
  left:0px;
  width: 720px; 
  height: 540px; 
 z-index: 1;
  }

Modifié par dominique (20 Aug 2008 - 09:59)

Bonjour et bienvenue Muad'Dib

J'ai supprimé les messages en doublon Pour modifier un post publié sur le forum, il suffit de cliquer sur le bouton "éditer"...
Modifié par dominique (20 Aug 2008 - 10:00)

Bonjour,

Il faudrait, dans l'idéal, revoir complètement la méthode employée pour afficher les grandes images. La méthode actuelle pose plusieurs problèmes:
- Toutes les grandes images d'une page sont chargées au chargement de la page, que le visiteur veuille les voir ou pas... ça va être sportif pour les visiteurs en bas débit!
- L'affichage des images se fait uniquement au survol par la souris. Un utilisateur qui ne peut pas utiliser la souris (ponctuellement dans un contexte donné ou à cause d'un handicap) ne pourra pas voir les grandes images.
- Certaines vignettes affichent une grande image au survol, et d'autres non, sans que rien ne permette de les différencier (problème ergonomique).
- Le positionnement des grandes images quand elles s'affichent n'est pas très efficace, et on peut facilement «perdre» l'image alors qu'on cherchait à la voir en entier dans la fenêtre du navigateur.
- En 800x600, une partie de l'image est souvent invisible et inaccessible.

Mon conseil: virer complètement cette technique défaillante, et tabler sur bien plus simple: des petites vignettes (éléments IMG avec attribut alt correctement renseigné) entourées d'un lien pointant vers la grande image. Ça aura également l'avantage de simplifier ton code HTML et CSS, et donc de te permettre de régler tes problèmes de positionnement des images s'ils subsistent.

On pourra éventuellement utiliser un effet JavaScript (avec un script tel que Lightbox) pour rendre tout ça plus sexy si on le souhaite, mais il faut au moins assurer la base (paragraphe précédent).

Merci pour ta réponse.

a écrit :
Toutes les grandes images d'une page sont chargées au chargement de la page, que le visiteur veuille les voir ou pas... ça va être sportif pour les visiteurs en bas débit!

- Pour le chargement je ne le savais pas. Ça ne me plait pas c'est certains.

a écrit :
- L'affichage des images se fait uniquement au survol par la souris. Un utilisateur qui ne peut pas utiliser la souris (ponctuellement dans un contexte donné ou à cause d'un handicap) ne pourra pas voir les grandes images.

- Très juste, je n'y avait pas penser. Ça ne me plait pas non plus.
Que faut-il faire pour corriger le problème ?
merci

a écrit :
- Certaines vignettes affichent une grande image au survol, et d'autres non, sans que rien ne permette de les différencier (problème ergonomique).

- Pour cela, j'avais mis un mot en rouge sur la page d'accueil disant : "Bon à savoir" en-dessous j'explique que certaines images peuvent s'agrandir. Ce sont celles dont le titre est souligné.
Je pensais que ça suffirait. Me suis trompé.

a écrit :
- Le positionnement des grandes images quand elles s'affichent n'est pas très efficace, et on peut facilement «perdre» l'image alors qu'on cherchait à la voir en entier dans la fenêtre du navigateur.
- En 800x600, une partie de l'image est souvent invisible et inaccessible.

- Ok, je comprends. Pas bien non plus.

a écrit :
Mon conseil: virer complètement cette technique défaillante, et tabler sur bien plus simple: des petites vignettes (éléments IMG avec attribut alt correctement renseigné) entourées d'un lien pointant vers la grande image. Ça aura également l'avantage de simplifier ton code HTML et CSS, et donc de te permettre de régler tes problèmes de positionnement des images s'ils subsistent.

- Si j'ai bien compris, je laisse les petites photos en place, mais je les rends cliquable afin que la photo s'ouvre sur une autre page. C'est ça ?

J'ai fait un essai à cette adresse : http://www.boisbievre.fr/diffe_fustes.html
Il faut dérouler et aller à : "Particularité" c'est l'image en-dessous. Elle est cliquable et une page s'ouvre montrant une autre image.
C'est ce que tu veux dire ?

Si c'est bon comme procédé, est-ce que les images se chargent également quand la page se charge ?
Suis prêt à modifier et à suivre tous tes conseils, mais si tu avais des tutos pour m'éclairer, ce serait vraiment cool.
Merci pour toutes tes idées et suggestions.
J'attends avec patience ta réponse.

Muad'Dib a écrit :
C'est ce que tu veux dire ?

Tout à fait. Sauf que l'image de destination ne devrait pas être une image de 1,7Mo, mais plutôt une image de taille raisonnable (en 720x500 ou 500x720 par exemple), correctement compressée en JPEG. On visera des tailles d'images un peu en dessous ou autour de 100 Ko si possible.

Muad'Dib a écrit :
est-ce que les images se chargent également quand la page se charge ?

Non, c'est un lien hypertexte et les navigateurs ne préchargent pas le contenu de destination des liens hypertexte à l'avance (sinon ton navigateur turbinerait comme un malade et tu récupèrerais tout le Web, de lien en lien ).

Muad'Dib a écrit :
Suis prêt à modifier et à suivre tous tes conseils, mais si tu avais des tutos pour m'éclairer, ce serait vraiment cool.

Ben comme c'est un problème vraiment basique («Faire un lien en HTML»), il n'y a pas vraiment de tutoriel sur la question. Il y a des cours de HTML de base qui apprennent à utiliser des paragraphes, des liens, des titres, à placer des images. Je pense que tu as déjà ces connaissance, donc ça devrait être à ta portée.

En passant, rien à voir mais dans ton contenu tu passes d'un titre H2 à un titre H4, ce qui donne l'architecture suivante:

H1  Les fustes maisons en rondins bruts
    H2  Différentes fustes
        H3  (... vide ...)
            H4  Des intérieurs avant emménagements. L'on aperçoit le bar.

Tu fais d'ailleurs un emploi massif des H4 qui me semble peu approprié. À vue de nez, je dirais que dans la page que tu as indiqué les seuls titres (en dehors du titre du site) sont «Différentes fustes» (H2) et «Particularités» (devrait être un H3). Le reste, ce serait plutôt de simples paragraphes (P), avec de temps à autre un style «légende d’image» spécifique (<p class="legende">...</p>).
Modifié par Florent V. (20 Aug 2008 - 11:50)

Ai aussi fait un essai sur la même page : http://www.boisbievre.fr/diffe_fustes.html
Avec les deux dernières photos tout en bas. Rendu cliquable. Elles sont, en plus, côte à côte.
Et je pense que la page ne charge pas tout de suite la grande image.
Est-ce bon comme ça ??

Reste le problème de l'ouvrir sans la souris, donc je pense que ce sera avec le clavier.
Comment fait-on ?
Merci.

Muad'Dib a écrit :
Reste le problème de l'ouvrir sans la souris

Si tu as un lien sur ton image, ça marchera en navigant au clavier (avec la touche TAB pour passer de lien en lien dans la plupart des navigateurs, ou Shift+touches de direction dans Opera 9.5). Donc rien de particulier à faire.

Merci pour toutes vos suggestions.
Je pense avoir fait le plus gros.
Il me reste quelques grandes photos à réduire.
Une moitié est déjà faite.

Si vous avez autres choses, n'hésitez pas.

Voilà, j'ai fait les modifs en espérant n'avoir rien oublié.
Si vous passer par là, merci de jeter "encore" un coup d'oeil et de me dire s'il y a des choses à faire.
Merci de vos commentaires et suggestions.