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 - 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 - 18:29, édité 1 fois
avatar

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

Miettes
****

Féminin
Messages : 426
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 - 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
avatar

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 - 11:03

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

Miettes
****

Féminin
Messages : 426
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 - 11:05

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

Merci beaucoup
avatar

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 - 11:09

ça marche Smile

Bon courage ^^
avatar

Miettes
****

Féminin
Messages : 426
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 - 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
avatar

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 - 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;
avatar

Miettes
****

Féminin
Messages : 426
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 - 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
avatar

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 - 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;
}
avatar

Miettes
****

Féminin
Messages : 426
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 - 17:31

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

Merci beaucoup!
avatar

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 - 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 )
avatar

Miettes
****

Féminin
Messages : 426
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 - 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
avatar

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 - 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 !
avatar

Miettes
****

Féminin
Messages : 426
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 - 18:03

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

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

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