28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous Smiley langue

J'ai un problème pour adapter une sorte de système de zoom qui est assez optimisé car toutes les images sont déja chargé avant de passer la souris sur les images de zoom... à moin d'être très rapide Smiley murf

Donc voilà ça fonctionne très bien sous Firefox mais pas sous IE7.
Si vous pouviez m'aider ce serait très sympa.

Lien temporaire de test afin de voir les sources :
http://tetsumaki.free.fr/test_images/
Bonjour et bienvenue sur ce forum,

Alors on va faire simple: les CSS ne sont pas fait pour ce genre d'usage. Il s'agit d'un détournement de fonctionnalités CSS (les styles appliqués avec la pseudo-classe :hover) afin de réaliser un effet dynamique.

Ce type d'effet, si l'on souhaite qu'il soit compatible et de qualité, se réalisera en Javascript. Cela permettra par ailleurs d'améliorer l'accessibilité de ce système (même avec Firefox par exemple, on ne peut pas accéder aux cartes si on navigue au clavier...), pour peu qu'on y prête attention bien sûr. Smiley cligne

Si on ne souhaite pas faire de Javascript, il serait avisé de se rabattre sur une solution plus simple, et sans doute ergonomiquement plus intéressante: une série de vignettes, accompagnées de préférence d'un intitulé explicite genre «Machin indiqué sur la carte de France (échelle 1:50000)», «Machin indiqué sur la carte de la région Truc (échelle 1;5000)». L'ensemble vignette (attribut alt vide) + intitulé serait alors un lien pointant vers l'image en grande taille.
On gagne en clarté de présentation (franchement, les + de diverses taille là c'est moyennement clair...), le mécanisme est mieux connu des utilisateurs (clic pour accéder à un document, plutôt que survol sur une zone pour affichage dans une autre zone), et on gagne en bande passante vu qu'on ne charge pas tout (746 Ko, bonjour l'angoisse!).

Si l'un des plans est prépondérant, on peut l'afficher d'emblée, et garder le principe d'un lien explicite avec vignette pour permettre d'accéder aux autres plans.
On peut aussi rajouter un lien vers Google Maps ou équivalent, pointant déjà sur le bon lieu et à l'échelle souhaitée. Smiley smile

Bonne continuation.