18041 sujets

Questions générales et questions de débutants

Problème "zoom" image sous IE6

Bonjour à tous

J'ai un problème d'affichage d'un zoom sur image sous IE6. L'image agrandie doit passer sur le texte de fond au passage de la souris. La technique fonctionne très bien avec Firefox et IE7. IE6 créé un espace qui correspond à la taille de l'image zoomée.

Dites-moi si mon explication n'est pas très claire

Mon CSS
#zoomFacturation {
background-image:url(img/fdecran/fact12.jpg);
background-position:-550px -123.5px;
background-repeat: no-repeat;
margin: 0 auto;
width : 200px;
height: 141px;
}
#zoomFacturation p, #zoomFacturation a {
height: 388px; 
display: block;
margin:0
}
#zoomFacturation a:hover {
background-image:url(img/fdecran/fact12.jpg);
background-position:0px Opx;
background-repeat: no-repeat;
margin: 0 auto;
width : 550px;
left: 50px;
z-index:1;
position:absolute;
top:30px;
}


Et le HTML
  <div id="zoomFacturation">
<p><a href="#" title="&eacute;cran de facturation"></a></p>
</div>


Merci de votre aide
Bonjour,

Bizarrement, ton lien est complètement vide. Pas terrible pour les utilisateurs de lecteurs d'écrans, ceux qui ont désactivé CSS, ceux qui ont désactivé les images de fonds, ou bien dans le cas où l'image en question a du mal à se charger... sans parler des moteurs de recherche.

Sinon, tu utilises une image de fond pour div#zoomFacturation, et une autre (active au survol uniquement) pour div#zoomFacturation a. Petit manque de cohérence ?
Calimero a écrit :
En fait la technique vient de Openweb.

Comme quoi, même Openweb publie des trucs pas folichons. Smiley cligne
Si tu désactives la feuille de style, il ne reste aucune image. Pourtant, j'aurais cru que cette image sur ta page faisait partie intégrante du contenu, et n'était pas une simple image décorative ?

Calimero a écrit :
Quelle serait, à ton avis la meilleure solution ?

Faire les choses simplement : mettre une image de contenu, placer dessus un lien pointant vers la même image en plus grand. Ne pas bidouiller des images de fond en CSS quand il s'agit de contenus. Ne pas bidouiller des liens pour avoir un effet de survol sous IE6 et inférieurs. Surtout que cet effet de survol me semble inattendu, et perturbant (la grande image vient cacher des contenus tout autour de l'emplacement de la petite image).

Donc : une petite image de contenu (balise <img />), entourée d'un lien pointant vers la même capture d'écran mais dans un plus grand format. On peut aussi placer un lien textuel en dessous de l'image, si on préfère. Enfin, on peut décider d'ouvrir l'image en grand dans une popup plutôt que dans la page en cours.


Au passage, tu as un gros problème de mise en page : si le texte est un peu trop gros ou un peu trop long, tout dépasse. Diagnostic : abus de hauteurs fixes (mauvaise idée) et de positionnement absolu (mauvaise idée bis).
Merci pour tes infos.

1 - Oui l'image n'est pas une simple décoration
2 - Ce qui te semble inattendu était un effet voulu pour ne pas déformer la page (ce qui n'est peut-être pas une bonne idée...)
3 - Et comme tu le souligne il y a des problèmes de déformation que j'ai bien du mal à gérer... car je ne sais pas tout faire...

Alors si tu peux me donner une indication pour que tout le design s'adapte à une hauteur variable de la partie centrale...

Sinon pour l'image j'ai aussi vu ça
Dans la même veine que ton lien il y a Lightbox JS :
http://www.huddletogether.com/projects/lightbox/

J'ai bien compris que l'effet de zoom qui cache du contenu servait à ne pas perturber le reste de la mise en page. Mais si ça demande de masquer du contenu, c'est un peu moyen comme solution. Une simple popup ou un lien vers l'image en grand (dans l'idéal : un lien vers l'image en grand + un javascript pour ouvrir une popup avec l'image, par exemple) me semblent tout à fait fonctionnels et plus simple pour les utilisateurs.
Sympa ton lien.

En fait j'ai modifié au profit d'un popup, voir ici par exemple

J'en ai profité pour modifier toute la structure du site (encore pas toutes les pages pour l'instant).

Tes commentaires précieux sont les bienvenus Smiley cligne

PS : tu trouvais que j'abusais de "position obsolute" (défaut qui provient du fait que j'ai commencé avec Dreamweaver), à présent j'utilise davantage "float". Mais est-ce mieux ?

Merci
Modifié par Calimero (20 Feb 2007 - 11:42)
- Liens fonctionnels avec ou sans javascript
- popups adaptables par l'utilisateur à ses contraintes d'agrandissement des caractères/du contenu
- permettre à l'utilisateur d'anticiper un changement de contexte de navigation (nouvelle fenêtre), difficilement perceptible pour qui n'est pas dans le mode d'accès visuel courant (utilisateurs de lecteurs d'écran, de loupe d'écran...)
OK j'ai pris bonne note.

Mais dans ce cas je suis obligé de définir les dimensions de mes images. Ou y a-t-il un moyen pour que la fenêtre s'ouvre toute seule à la bonne dimension ?

merci
De toutes façons (et j'aurai dû le préciser ci-dessus), un popup ne doit pas contenir directement l'image, mais doit être une page HTML complète (pour fournir l'alternative textuelle via l'élément <img>).

Donc, prévoir des popups stylés via CSS, présentant les images, et dimensionnés à la taille maximale de celles-ci, par exemple.
Modifié par Laurent Denis (20 Feb 2007 - 13:19)
Enore merci pour tes conseils mais...

si j'enlève les dimensions (et avec HTML+CSS) cela fonctionne encore sous IE mais pas sous Firefox.

Galère...
En tout cas le système utilisé pour les deux premiers liens pose problème avec Firefox. La fonction Checksize() ne semble pas fonctionner (ça marche avec Konqueror et Opera, par contre), et lorsque je veux redimensionner la fenêtre (minuscule), la fenêtre se ferme.

Quel que soit le système utilisé, ne pas mettre de fonction pour fermer la fenêtre en cas de clic sur body. Laisser l'utilisateur fermer la fenêtre lui-même. À la rigueur, on pourra lui fournir un lien/bouton « fermer la fenêtre » en dessous de l'image.
Calimero a écrit :
si j'enlève les dimensions (et avec HTML+CSS) cela fonctionne encore sous IE mais pas sous Firefox.

Il ne s'agit pas d'enlever les dimensions :
Laurent Denis a écrit :
Donc, prévoir des popups stylés via CSS, présentant les images, et dimensionnés à la taille maximale de celles-ci, par exemple.
Sujet clos
Aller à