[Résolu] Liens Miniatures vers Agrandis

Bonjour,

Je suis confrontée à un problème qui sans doute va vous paraître simple à résoudre ; pour moi c'est un véritable casse tête c'est pour cela que je vous demande conseil.

Je suis en train de travailler sur mon site perso sur Dreamweaver MX.

La majeure partie de mes pages html sont des diaporamas sur lesquelles on peut trouver :

- de toutes petites images (vignettes)
- une zone où s'affichent les agrandis des dites vignettes
- une légende

Concernant les vignettes j'utilise la ligne de code suivante :

<ahref="#"><imgsrc="petit.jpg"onclick="document.getElementById('img').src='grand.jpg'" /></a>

Et pour définir l'emplacement de l'agrandi :

<img id="img" src="" />

Et puis pour la légende j'utilise la fonction de comportement de Texte > Claques

Quand je teste la page à partir de Dreamweaver tout se passe correctement. En revanche il me signale quelques erreurs comme :

- L'attribut onClick de la balise IMG n'est pas pris en charge.
- L'attribut type de la balise Script n'est pas pris en charge.

N'étant pas franchement une pro de la chose, j'ai construit 18 pages de la sorte pensant, grâce à la prévisualisation, que tout allait bien.

Mais là, stupeur, quand je fais le test en "vrai" en uploadant sur mon espace Web... c'est la catastrophe, rien ne fonctionne.

J'ai envisagé/essayé les solutions suivantes sans grands résultats esthétiques/pratiques :

- ouverture de pop-up pour les agrandis
- frames (au secours)
- roll-over avec affichage de l'agrandi

j'en passe, et des meilleures.

Etant au bord de la crise de nerf je me demandais si quelqu'un pourrait m'indiquer un moyen d'afficher un agrandi à partir d'un clik sur une vignette, s'affichant dans la même page laissant les vignettes visibles.

Je voudrais pouvoir interagir sur les éléments graphique comme je l'entends (couleur, placement...)

En espérant avoir été claire, à votre bon coeur.....

Et merci !
Modifié par pik (25 Mar 2007 - 17:07)

Bonsoir & bienvenue, pik.

Pourrais-tu donner un exemple de la disposition que tu souhaites obtenir, par exemple sur un autre site web ? Ce sera plus simple de t'aider en partant d'une base concrète.

Sinon, il y a une galerie en javascript dans les tutoriels d'Alsacreations ... ça t'intéressera peut-être

Merci

Ici un schéma : http://img86.imageshack.us/my.php?image=exis5.jpg

Voilà à peu près ce que je voudrais sachant que les agrandis sont en "portait" et en "paysage" et mesurent 500 x 375 pixels ou l'inverse. Il y a bien sûr un fond de page situé à un endroit précis et des liens en haut de page.

J'ai effectivement visité le coin des tutoriels, notamment le tutoriel sur le diaporama en javascript. Mais cela me semble ne pas trop correspondre à ma mise en page (ce tutoriel utilise des listes, j'avoue ne pas maîtriser ces petites bêtes).

Merci d'avance pour votre aide.
Modifié par pik (01 Mar 2007 - 00:51)

pik a écrit :
J'ai effectivement visité le coin des tutoriels, notamment le tutoriel sur le diaporama en javascript. Mais cela me semble ne pas trop correspondre à ma mise en page (ce tutoriel utilise des listes, j'avoue ne pas maîtriser ces petites bêtes).

Au contraire, ce tutoriel est, me semble-t-il, tout à fait adapté à ta mise en page... Les listes — ces petites bêtes comme tu les appelles — sont très intéressantes et sont souvent très utiles pour formater un contenu. Lance-toi, c'est vraiment très simple à mettre en oeuvre!

Merci bien je vais donc essayer de l'adapter à ma mise en page (ou du moins apprendre à manier les listes).

En revanche, j'ai cru remarquer que ce script contenait un élément pour afficher le nom de l'image au passage de la souris (alt).

Je souhaiterais ne pas avoir d'alt, autant sur les vignettes que sur les agrandis, seulement une légende qui s'affiche au dessus de l'agrandi.

Je suis peut-être trop exigeante. J'avoue que je trouve le petit rectangle jaune du alt particulièrement moche. Alors peut-être faut-il l'employer absolument pour y ou x raisons, ça je ne sais pas.

Si cela n'est pas obligatoire il suffit peut-être de ne rien mettre à ces endroits :

<li><a href="images/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="rien" /></a></li>

<dd><img id="big_pict" src="images/photo1.png" alt="rien" /></dd>

Par contre cela va peut-être géner le script.js pour s'exécuter si je ne remplis pas ces infos ?

Tant de questions de bon matin, pfiou j'ai la tête qui tourne.
Modifié par pik (01 Mar 2007 - 10:09)

Salut,

L'attribut alt ("alternative") des images est en général très important pour des raisons d'accessibilité.

C'est en effet le moyen le plus efficace & le plus robuste (Laurent, sors de ce corps ) pour fournir une information alternative à tous les utilisateurs qui ne peuvent/veulent pas afficher l'image. Les malvoyants, les utilisateurs de navigateurs textes, etc.

PS : Merci d'utiliser les balises adéquates ([ code] & [ /code]) lorsque tu insères du code dans tes messages. Tu peux éditer le post ci-dessus pour corriger

Oups, voilà c'est modifié !

Merci pour l'explication sur l'attribut alt, je ne connaissais pas son importance.

Je teste tout cela ce soir.

Merci beaucoup.

Ouf, voilà je crois que je m'en suis sortie.

Effectivement ce script (Galerie JS) était bien fait pour moi.

Avec quand même quelques modifications au niveau de la .css et un peu (beaucoup) de temps j'ai réussi à comprendre.

Merci donc à tous.

Juste un bémol qui, bien sûr, n'a rien à voir (enfin je pense) avec la nouvelle structure de mes pages, le délai d'affichage des images est loin d'être instantané... pour ne pas dire très long (je me demande même si j'ai bien cliqué).

J'héberge mon site chez Free, ceci explique cela ?

Le fait d'utiliser un script tel que celui de la galerie photo peut-il ralentir le chargement ?

pik a écrit :
Juste un bémol qui, bien sûr, n'a rien à voir (enfin je pense) avec la nouvelle structure de mes pages, le délai d'affichage des images est loin d'être instantané... pour ne pas dire très long (je me demande même si j'ai bien cliqué).

Bonjour,

Le délai d'attente avant affichage de l'image est directement lié à son poids, d'où l'importance d'optimiser les compressions à l'aide d'un logiciel adéquat.

Ceci dit, il est vrai que le temps de chargement paraît plus long avec cette technique que lors d'un chargement "normal" de l'image: celle-ci n'est affichée que lorsque le chargement est totalement terminé, alors qu'une image se chargera traditionnellement de manière progressive, d'où l'impression réelle d'une attente plus courte. De plus, rien ne montre que l'image est bel et bien entrain de charger! L'idéal serait de pouvoir indiquer au visiteur que le média est occupé à se télécharger par un système simple à la Lightbox (lire: la désormais célèbre petite roue qui tourne ).
Modifié par Benjamin D.C. (04 Mar 2007 - 03:10)

Merci pour ta réponse.

Je ne manquerais pas de venir vous indiquer le lien vers mon site une fois que celui-ci sera terminé.

Bonne continuation