Problème agrandissement d'image
Pooh
-
pooh -
pooh -
Bonjour à tous,
Je travaille actuellement à la conception d'une page web en html et j'y ai placé des images en miniatures pour les agrandir lorsqu'on clique dessus. À ce niveau là tout va bien. Le problème c'est que lorsque le pointeur de la souris passe sur l'image, tout le reste de la page subit un léger décalage puis cela revient à la normale lorsque le curseur quitte l'image miniature. Comment peut-on éviter que la page "bouge" ainsi. C'est très agaçant visuellement.
Merci pour votre aide
Pooh
Je travaille actuellement à la conception d'une page web en html et j'y ai placé des images en miniatures pour les agrandir lorsqu'on clique dessus. À ce niveau là tout va bien. Le problème c'est que lorsque le pointeur de la souris passe sur l'image, tout le reste de la page subit un léger décalage puis cela revient à la normale lorsque le curseur quitte l'image miniature. Comment peut-on éviter que la page "bouge" ainsi. C'est très agaçant visuellement.
Merci pour votre aide
Pooh
A voir également:
- Problème agrandissement d'image
- Agrandir une image - Guide
- Image iso - Guide
- Reduire taille image - Guide
- Légende image word - Guide
- Acronis true image gratuit - Télécharger - Sauvegarde
6 réponses
On pourrait préciser que ça peut concerner un effet défini sur les liens, le “a:hover” dans le style en CSS.
Une bordure, un padding, une autre image…
?
On peut voir ?
Une bordure, un padding, une autre image…
?
On peut voir ?
Bonjour à tous et merci encore pour votre aide. Dans le css, j'ai effectivement 2 styles de texte qui utilise le "onmouseover". D'ailleurs lorsque la première image est insérée, cela suit un de ces styles mais j'ai vérifié et mon </span> est bien mis. Je vous met le lien de la page et vous pourrez constater ce que ça fait. Je vous préviens que la plupart des pages sont en construction. Je fait ce site pour une amie et c'est plus facile pour nous que je mette en ligne puis elle me fait ses commentaires.
http://www.karinelacoste.com/bois.html
Vous avez une idée?
http://www.karinelacoste.com/bois.html
Vous avez une idée?
Je viens de mettre ma page en ligne et je vois qu'en plus mes images ne s'affichent pas agrandies!!! Je sais que ce n'est probablement qu'une question d'adresse pcq ça fonctionnait très bien sur mon ordi mais ça me fait un problème de plus à régler.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
bsr,
alors deja y'a un truc :
- quand tu es sur cette page : http://www.karinelacoste.com/bois.html , le lien de la premiere photo pointe vers http://www.karinelacoste.com/photos_web/IMG_603.jpg . or cette image n'existe pas sur le serveur.
Je te signales que la mignature a pour nom IMG_0603.jpg (un zéro devant le 603). a tu bien placé sur le serveur, dans le dossier /photos_web/ l'image en taille réelle plus grande (image IMG_603.jpg je suppose) ?
Dans le code source, tu met la miniature avec les paramètres suivants :
or : la miniature IMG_0603.jpg a deja ce format! ce n'est donc pas une réduction d'un format de plus haute qualité, mais bien une image de miniature. pour le vérifier, regarde ici : http://www.karinelacoste.com/photos_web/IMG_0603.jpg . c'est une miniature au format 190*253. donc meme si tu pointe le lien vers cette adresse, tu ne l'aura jamais plus grande!
J'espere avoir été clair.
En revanche, j'ai pas saisi le coup de l'image qui se décale de qq pixel vers le bas (j'ai pas vraiment cherché non plus)
alors deja y'a un truc :
- quand tu es sur cette page : http://www.karinelacoste.com/bois.html , le lien de la premiere photo pointe vers http://www.karinelacoste.com/photos_web/IMG_603.jpg . or cette image n'existe pas sur le serveur.
Je te signales que la mignature a pour nom IMG_0603.jpg (un zéro devant le 603). a tu bien placé sur le serveur, dans le dossier /photos_web/ l'image en taille réelle plus grande (image IMG_603.jpg je suppose) ?
Dans le code source, tu met la miniature avec les paramètres suivants :
<a href="photos_web/IMG_603.jpg" ALT="image"> <img src="photos_web/IMG_0603.jpg" border=0 height=253 width=190> </a>
or : la miniature IMG_0603.jpg a deja ce format! ce n'est donc pas une réduction d'un format de plus haute qualité, mais bien une image de miniature. pour le vérifier, regarde ici : http://www.karinelacoste.com/photos_web/IMG_0603.jpg . c'est une miniature au format 190*253. donc meme si tu pointe le lien vers cette adresse, tu ne l'aura jamais plus grande!
J'espere avoir été clair.
En revanche, j'ai pas saisi le coup de l'image qui se décale de qq pixel vers le bas (j'ai pas vraiment cherché non plus)
Avec le code, ça sera plus facile.
Alors, quelques pistes. Plus ou moins importantes.
• Tu places un peu tout, dont ton menu, dans des <pre>.
Ils ne servent pas à ça. Tu peux t'en passer.
• Tu ouvres et referme bizarrement certains groupes de balises.
• Le
En HTML, il me semble que ça devrait plutôt être
• Tu as des
Supprime-les.
• Les
Déplace-les.
• Tu utilises plusieurs
Ils doivent être uniques (normal1, normal2, normal3…). Ils auraient alors l'avantage de pouvoir servir d'ancre. Comme _#2.
Ou alors utilise des class
Idem pour
• Pour revenir plus précisément à ton problème, les navigateurs que j'utilise réagissent différemment.
Opera et Firefox (_ff_) adaptent la hauteur des cellules. Ce n'est pas très beau, mais rien ne se passe.
Avec Safari, le survol des images ne provoque rien. Par contre, le survol de “Point de mire” et des 2 dernières entrées du menu provoque ce que tu décris. La cellule de la 2e image s'adapte (_1_ et _2_).
On retrouve un décallage dans Accueil. On voit que c'est la mise en gras du lien survolé qui agit (un autre exemple).
Le texte a besoin de plus de place et le reste doit s'adapter.
Essaye de voir si en enlevant ce choix, les choses rentrent dans l'ordre.
On peut supposer que la présence de nombreux espaces dans ta mise en page peut aussi avoir des effets.
Trouve autre chose pour l'alignement.
• Ton menu gagnerait certainement à être fait de
• Pour l'absence des images, les causes peuvent varier. On pourrait ajouter que les images doivent avoir été transférées sur le serveur (-;
J'espère que toutes ces corrections remettront les choses dans l'ordre.
+ Tu utilises le “pt” comme unité pour la taille de ton texte.
Essaye de les remplacer par des “px” ou des “em”.
Les “pt” sont plutôt adapté aux documents imprimés.
Alors, quelques pistes. Plus ou moins importantes.
• Tu places un peu tout, dont ton menu, dans des <pre>.
Ils ne servent pas à ça. Tu peux t'en passer.
• Tu ouvres et referme bizarrement certains groupes de balises.
<PRE><PRE><span id="collection"> <A HREF="http://www.karinelacoste.com/commander.html"> Pour commander </PRE></TD></A></span>devrait plutôt se refermer comme
<PRE><span id="collection"> <A HREF="http://www.karinelacoste.com/commander.html"> Pour commander </A></span></PRE></TD>
• Le
<td rowspan="3" align="topleft">n'est pas valide.
En HTML, il me semble que ça devrait plutôt être
<td rowspan="3" valign="top" align="left">
• Tu as des
<td bgcolor="#006699" p="" align="left">qui traînent et qui ne correspondent à rien.
Supprime-les.
• Les
<td bgcolor="#006699"><a href="photos/IMG_0605.jpg" alt="image"><img src="photos_web/IMG_0605.jpg" border="0" height="253" width="190">ne sont pas au bons endroits. Ils ont leur place dans les <img>, pas dans les <a>.
Déplace-les.
• Tu utilises plusieurs
<span id="normal2">
Ils doivent être uniques (normal1, normal2, normal3…). Ils auraient alors l'avantage de pouvoir servir d'ancre. Comme _#2.
Ou alors utilise des class
<span class="normal2">Le nom du style devra alors être “.normal2” et non plus “#normal2”.
Idem pour
<span id="collection">
• Pour revenir plus précisément à ton problème, les navigateurs que j'utilise réagissent différemment.
Opera et Firefox (_ff_) adaptent la hauteur des cellules. Ce n'est pas très beau, mais rien ne se passe.
Avec Safari, le survol des images ne provoque rien. Par contre, le survol de “Point de mire” et des 2 dernières entrées du menu provoque ce que tu décris. La cellule de la 2e image s'adapte (_1_ et _2_).
On retrouve un décallage dans Accueil. On voit que c'est la mise en gras du lien survolé qui agit (un autre exemple).
Le texte a besoin de plus de place et le reste doit s'adapter.
Essaye de voir si en enlevant ce choix, les choses rentrent dans l'ordre.
On peut supposer que la présence de nombreux espaces dans ta mise en page peut aussi avoir des effets.
Trouve autre chose pour l'alignement.
• Ton menu gagnerait certainement à être fait de
<ul> <li><a href= … /a></li> <li><a href= … /a></li> <li><a href= … /a></li> </ul>
• Pour l'absence des images, les causes peuvent varier. On pourrait ajouter que les images doivent avoir été transférées sur le serveur (-;
J'espère que toutes ces corrections remettront les choses dans l'ordre.
+ Tu utilises le “pt” comme unité pour la taille de ton texte.
Essaye de les remplacer par des “px” ou des “em”.
Les “pt” sont plutôt adapté aux documents imprimés.
Merci beaucoup Gihef pour toutes ces précisions. Il faut dire que c'est mon 2e site à vie, le mien et celui-là alors je suis encore "newbie" dans le html. Je vais regarder tout ça aujourd'hui ou demain et voir si ça arrange mon problème. De toute façon, même si ça ne le corrige pas, ce sera déjà un plus pour le site et pour moi dans la façon de le faire.
Merci encore. Je vous tiens au courant si ça fonctionne ou pas.
Merci encore. Je vous tiens au courant si ça fonctionne ou pas.
<a href="photos/IMG_0603.jpg" ALT="image">
<img src="photos_web/IMG_0603.jpg" border=0 height=253 width=190></a>
Est-ce que le problème pourrait venir du fait que l'image est insérée dans un tableau? J'ai 2 rectangles côte à côte, l'un contient la photo et l'autre la description. J'ai 6 rangées comme ça dans mon tableau. Comme je le mentionnais, lorsque je passe le pointeur sur l'une des photos, celle-ci reste fixe alors que tout le reste de la page se décale légèrement vers le haut. Cela fonctionne bien par contre pour l'agrandissement.
Merci encore pour votre aide
regarde si tu as une valeur a "onmousehover" dans ton code ou dans le css tableau ????
juste une idee qui me passait par la tete :-)!
RAD