Problème : hover avec 2 images

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème : hover avec 2 images

Message par Ancients Mar 8 Mar 2016 - 10:22

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://nsp-d3.forumofficiel.com/

Description du problème

Bonjour,

J'ai un problème pour faire un hover avec 2 images. Je ne pensais pas que ça serait si difficile.

Problème : hover avec 2 images Screen22
Problème : hover avec 2 images Screen23

Le hover est fait, mais lors du passage de la souris sur l'image de base, il y a un petit de chargement ou autre avant que l'autre image s'affiche.

Je vous invite à tester sur la page d'accueil de mon forum.

Ce qui va à l'encontre (selon moi) du hover, si le passage d'une image à l'autre n'est pas fluide, ça ne sert à rien.

Pourtant les hover avec des images, il y en a partout sans problème de fluidité.

Je sais qu'il faut prendre en compte le poids de l'image mais :

1. J'ai déjà optimiser les deux images
2. Encore une fois les hovers que vous pouvez voir en surfant, n'ont pas de pb de fluidité

D'ou ma question, pourquoi? un "simple" hover avec 2 images, n'est pas fluide.

Le but du hover est que les deux images s'en fasse qu'une avec un léger changement visuel.

Merci pour votre aide


Dernière édition par Ancients le Mar 8 Mar 2016 - 18:29, édité 1 fois
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

Voir le profil de l'utilisateur http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème : hover avec 2 images

Message par Miettes Mar 8 Mar 2016 - 10:48

Hello Smile

Tu sais ce que sont des sprites en graphisme ?

Peut etre que ça pourrait régler ton problème de fluidité.

En gros, tu crées une image avec les 2 états : normal et hover

Par exemple :
Problème : hover avec 2 images Explication-sprite_zpscirfz8gr

Ensuite, dans ta CSS tu joues avec le positionnement de l'image de fond, par exemple :
Code:


.table-index1 {
    background: url('http://illiweb.com/fa/pbucket.gif') no-repeat center 0;
    height: 185px;
    position: center;
    width: 307px;
}

.table-index1:hover {
  background-position: center 100%;
}



De cette façon, ton image est chargée tout de suite et tu n'as pas de temps de latence Smile
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

Voir le profil de l'utilisateur http://tambouille-raleuses.forumactif.com/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème : hover avec 2 images

Message par Ancients Mar 8 Mar 2016 - 10:54

Bonjour Miettes,

Merci pour votre réponse rapide!

Je ne connaissais pas les sprites mais j'ai compris le principe.

Comment puis-je créer des sprites?

Merci d'avance
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

Voir le profil de l'utilisateur http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème : hover avec 2 images

Message par Miettes Mar 8 Mar 2016 - 11:03

Avec un logiciel de graphisme (genre gimp, photoshop ou photofiltre), ou tu as des outils en ligne [en savoir plus]
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

Voir le profil de l'utilisateur http://tambouille-raleuses.forumactif.com/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème : hover avec 2 images

Message par Ancients Mar 8 Mar 2016 - 11:05

D'accord je vais tester sur photoshop, je reviens vers vous si le résultat n'y est pas.

Merci beaucoup
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

Voir le profil de l'utilisateur http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème : hover avec 2 images

Message par Miettes Mar 8 Mar 2016 - 11:09

ça marche Smile

Bon courage ^^
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

Voir le profil de l'utilisateur http://tambouille-raleuses.forumactif.com/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème : hover avec 2 images

Message par Ancients Mar 8 Mar 2016 - 11:19

Bonjour (c'était rapide)

Problème : hover avec 2 images Screen24

Code:
.table-index1 {
    background: url('http://i68.tinypic.com/fnbhjs.png') no-repeat center 0;
    height: 185px;
    position: center;
    width: 307px;
}
 
.table-index1:hover {
  background-position: center 100%;
}

Apparemment mon sprite est pas bon haha
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

Voir le profil de l'utilisateur http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème : hover avec 2 images

Message par Miettes Mar 8 Mar 2016 - 11:25

Si c'est bon Smile

C'est juste que du coup, le background position change (comme tu l'as fait cote à cote et pas l'un en dessous de l'autre). Essaie avec ça :
Code:
.table-index1 {
    background: url('http://i68.tinypic.com/fnbhjs.png') no-repeat 0 center;
    height: 185px;
    width: 307px;
}
 
.table-index1:hover {
  background-position: -311px center;
}

Idea background-position: horizontal vertical;
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

Voir le profil de l'utilisateur http://tambouille-raleuses.forumactif.com/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème : hover avec 2 images

Message par Ancients Mar 8 Mar 2016 - 16:51

Bonjour,

En fait j'ai refait le sprite (avec le sprite generator), cette fois ci en les mettant de manière verticale.

Je vous laisse regarder sur mon forum, le résultat est presque bon mais :

La première image est trop basse (de peu) et la seconde (hover) est trop haute (de peu).

Merci à vous
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

Voir le profil de l'utilisateur http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème : hover avec 2 images

Message par Miettes Mar 8 Mar 2016 - 17:04

Il te suffit juste de jouer avec la position du fond Smile Par exemple :
Code:
.table-index1 {
    background: url(http://i64.tinypic.com/2j1s8ld.png) no-repeat center -7px;
    height: 185px;
    width: 307px;
}

.table-index1:hover {
    background-position: center -201px;
}
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

Voir le profil de l'utilisateur http://tambouille-raleuses.forumactif.com/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème : hover avec 2 images

Message par Ancients Mar 8 Mar 2016 - 17:31

Oh c'est magique!, je peux utiliser les mêmes réglages pour les autres images?

Merci beaucoup!
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

Voir le profil de l'utilisateur http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème : hover avec 2 images

Message par Miettes Mar 8 Mar 2016 - 17:31

Peut etre Smile

Sinon, il faudrait adapter pour chaque élément (comme tu as des noms précis, ça ne devrait pas poser problème Smile )
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

Voir le profil de l'utilisateur http://tambouille-raleuses.forumactif.com/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème : hover avec 2 images

Message par Ancients Mar 8 Mar 2016 - 17:57

J'ai adapter les deux autres et ça marche très bien.

Parce contre il faut que je décale le hover de manière horizontale :

Code:
/*---  Index HOME Image 2 ---*/
.table-index2 {
    background: url(http://i65.tinypic.com/bj5x8j.png) no-repeat center -7px;
    height: 185px;
    width: 307px;
}
 
.table-index2:hover {
    background-position: center -199px;
}

No comment hm? Smile

Merci à vous
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

Voir le profil de l'utilisateur http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème : hover avec 2 images

Message par Miettes Mar 8 Mar 2016 - 18:00

Du coup, à la place du "center", il va falloir mettre des chiffres Smile

Code:


.table-index2 {
    background: url(http://i65.tinypic.com/bj5x8j.png) no-repeat 0 -7px;
    height: 185px;
    width: 307px;
}

.table-index2:hover {
    background-position: 1px -199px;
}

Allez journée terminée ^^ Je file ; bonne soirée !
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

Voir le profil de l'utilisateur http://tambouille-raleuses.forumactif.com/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème : hover avec 2 images

Message par Ancients Mar 8 Mar 2016 - 18:03

D'accord, merci beaucoup pour cette histoire de hover!

C'est parfait,
Très bonne soirée à vous
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

Voir le profil de l'utilisateur http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum