Déplacement d'une image (via balise img) au survol de la souris

Bonsoir,

Je suis en train de réaliser une page html proposant divers éléments qui seront modifiés au survol de la souris. Jusque ici d'un point de vue théorique pas de probleme, un hover aurait dû faire l'affaire, or j'essai de favoriser mon référencement naturel, j'ai donc choisit une structure particulière dans l'agencement de mon code html.
Le background-image est donc exclu.

Voilà pour illustrer :

<div class="fleches">
      <a href="#"><img src="img/flecheG.gif" alt="précédente" /></a>
 </div>

Bon je vous accorde que le gain de ce alt n'est pas génial lol, mais pour d'autres images ce serait un plus non négligeable.
Dans un second temps voici le css :

.fleches{
        height:62px;
        width:62px;
        overflow:hidden;
    }

        .fleches img{
            border:none;
        }
        .fleches img:hover{
            top:-62px;
        }

Voilà, j'explique donc mon code. Je réalise dans un premier temps grâce à ma div, une "fenetre" qui agira comme un pochoire et ne laissera apparaitre que les 62 premiers pixels de mon image. Le tout fonctionne parfaitement pour l'instant.
Ensuite avec mon hover je tente de modifier la position de mon image afin de la remonter de 62pixels et de laisser apparaitre la seconde partie de l'image.

Ceci devrait me faire gagner du temps de chargement et assurer une certaine fluidité au passage de la souris.

Pour l'instant cela ne fonctionne pas, pourriez vous me dire pourquoi ou me mettre sur la voie d'une potentielle solution ?

D'avance merci.
Modifié par Florent V. (21 Feb 2010 - 11:11)

Bon je m'auto répond au cas ou quelqu'un chercherait la réponse.

J'ai réussi à résoudre mon problème en modifiant le css tel que :

.fleches{
        margin:60px 11px 60px 16px;
        height:62px;
        width:62px;
        overflow:hidden;
        position:absolute;
    }

        .fleches img{
            border:none;
            position:relative;
        }
        .fleches img:hover{
            top:-62px;
        }

J'aurais du pousser un peu plus loin puisque j'avais déjà essayé cette solution mais voyant que ma structure sautait du fait que j'utilise un float en complement je n'ai même pas pris la peine de vérifier si ça marchait.
Après re-vérification par acquis de conscience en écrivant :

.fleches{
        margin:60px 11px 60px 16px;
        height:62px;
        width:62px;
        overflow:hidden;
        position:absolute;
        [b]position:relative;
        float:left;[/b]
    }

Néanmoins cette solution est pour le moins "dégueulasse", enfin je trouve, donc si quelqu'un voit mieux tout en prenant en compte le float que je n'avais aps mis dans un premier temps dans un soucis de clareté, je suis preneur.

Merci bien et bonne soirée
Modifié par Florent V. (21 Feb 2010 - 11:11)

bonsoir,

une methode que j'utilise frequement en mode standard :

<a href="#" title="page suivante" class="next" ><img alt="suivant" src="arrow-next.jpeg"  /></a>

et le css

a.next img {
height:20px;
width:20px;
background:url(arrow-next.jpeg) no-repeat ;
border:none;
vertical-align:top;
}
a:hover {background:none transparent; /*pour eveiller  IE6 */}
a.next:hover {
height:0;
width:0;
padding:10px;
}

En gros deux images pour une seule balise img .
- l'une dans le source
- et l'autre en fond.
au passage sur le lien ,
- on reduit la taille de l'image a zero
- et on applique un padding pour toujours couvrir le même espace laissant apparaitre l'image de fond .

Cette technique ne fonctionne qu'en mode standard , en particulier pour IE .
voir : http://www.alsacreations.com/article/lire/573-A-propos-du-Modele-de-boite-Microsoft-ou-quirks.html
(et ne pas confondre avec : http://jeremie.patonnier.net/post/2009/11/10/Le-modele-de-boite-flexible-en-CSS-3 ou le box-sizing ...)

gc

Merci pour ta réponse, je vais peser le pour et le contre pour savoir si j'utiliserais ta méthode puisque laisser de côté du bidouillage pour utiliser un bricolage cela m'ennuie un peu. Mais bon si c'est pour gagner la cause IE6 peut-être que je prendrais le temps.
Merci aussi pour ces articles, celui sur les quirks en particulier duquel j'étais passé à côté et qui est fort intéressant.

Sur ce, bonne soirée.
Modifié par Florent V. (21 Feb 2010 - 11:11)

bonjour,
ce que je te propose n'est pas du bidouillage ... les éléments restent dans le flux et ont le comportement attendu .
Pour IE 6 , il s'agit d'un défaut sur a:hover (bien connu pour ceux qui styler avant firefox et Cie) , qui oblige a changer une regle au survol afin de provoquer un reflow et mettre effectivement a jour (ou en application ) les règles css lié a cet évènement/règle semi-dynamique sur :hover .(la liste de bug ou defauts connu de IE6 est longue , longue ... : ) )

Le fait de s'assurer de proposer au navigateur un doctype valide , n'est qu'une bonne pratique , fortement conseillé , parce qu'elle permet justement de faire usage de la façon la plus efficace et la plus "homogène possible" des feuilles de style ...

Cordialement, GC

<edit> Sinon , la methode la plus connu pour ce que tu vet est ce que l'on appelle les "sprite CSS" . , pas forcement adapter au remplacement de texte par une image </edit>
Modifié par gc-nomade (20 Feb 2010 - 14:02)

Merci beaucoup pour ce complément d'information très précieux. Je pense que je vais adopter ta technique après intense réflexion lol
Il est à noter que je faisais bien la distinction entre la tienne et la mienne que je qualifiait respectivement de bricolage et de bidouillage. Pour moi bricolage se plaçait au dessus de bidouillage, mais le principe même de devoir passer par une solution annexe à un comportement css de base pour obtenir l'effet souhaité reste un hack à mon sens. Mais ce n'était pas vraiment péjoratif je te rassure.

De plus, il s'agit là de mon portfolio alors il serait bon que je prenne sur moi et que j'arrête de maudire les utilisateur d'IE6 et que je leur permette une navigation plus ou moins correct si je veux assurer ma promotion auprès de ceux-ci. Après tout je ne suis pas google pour dicter mes règle. (cf:leur intention d'arrêter la rétro-compatibilité IE6)
Modifié par Florent V. (21 Feb 2010 - 11:11)

Sur le fond:
- Le top: -62px sera ignoré pour un élément en position: static (par défaut).
- Positionner le conteneur en absolu me semble être plus casse-gueule qu'autre chose, en plus d'être très inutile dans cet extrait de code:
J'ai réussi à résoudre mon problème en modifiant le css tel que :

.fleches {
  height: 62px;
  width: 62px;
  overflow: hidden;
  position: absolute;
}
.fleches img {
  position: relative;
}
.fleches img:hover {
  top: -62px;
}

- Si tu veux contrôler précisément le positionnement de l'image dans son conteneur, tu peux opter pour:

.fleches {
  height: 62px;
  width: 62px;
  overflow: hidden;
  position: relative; /* Le bloc sert de référent à ses descendants positionnés en absolu. */
}
.fleches img {
  position: absolute;
  top: 0;
  left: 0;
}
.fleches:hover img {
  top: -62px;
}

- Réviser le positionnement CSS serait pas mal, je pense. La lecture du Guide de survie du positionnement CSS est des sources qui y sont citée est conseillée.

Sur la forme: le violet indigo ça va deux secondes, mais c'est pas un forum emo ici hein.

Ah c'était juste une erreur de recopiage, j'ai tendance parfois à inverser l'ascendance de relative sur absolute =) (faut dire qu'à une heure du mat' je n'étais plus très frais)

Pas d'inquiétude pour le guide de survie je l'ai lu, et même relu, et c'est en partie grâce à celui-ci que j'ai pu corriger mon problème.

HS : ahah c'est bien le premier forum que je visite sur lequel on prohibe l'utilisation de couleurs sur des post entiers. C'est dommage je trouvais que ça apportait plus de vie ~
Modifié par Shin (21 Feb 2010 - 14:33)