Problème : hover avec 2 images

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

Résolu Problème : hover avec 2 images

Message par Ancients le 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.




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
****

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

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 le 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 :


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


.table-index1 {
    background: url('http://i912.photobucket.com/albums/ac325/Miettes_SoP/explication-sprite_zpscirfz8gr.png') 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
****

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

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

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

Message par Ancients le 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
****

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

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 le 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
****

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

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

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

Message par Ancients le 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
****

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

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 le Mar 8 Mar 2016 - 11:09

ça marche Smile

Bon courage ^^

Miettes
****

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

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

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

Message par Ancients le Mar 8 Mar 2016 - 11:19

Bonjour (c'était rapide)



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
****

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

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 le 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
****

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

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

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

Message par Ancients le 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
****

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

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 le 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
****

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

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

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

Message par Ancients le 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
****

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

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 le 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
****

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

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

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

Message par Ancients le 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
****

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

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 le 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
****

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

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

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

Message par Ancients le 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
****

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

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


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