Problème : hover avec 2 images
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Problème : hover avec 2 images
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
Re: Problème : hover avec 2 images
Hello
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 :
De cette façon, ton image est chargée tout de suite et tu n'as pas de temps de latence
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://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
Re: Problème : hover avec 2 images
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
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
Re: Problème : hover avec 2 images
Avec un logiciel de graphisme (genre gimp, photoshop ou photofiltre), ou tu as des outils en ligne [en savoir plus]
Re: Problème : hover avec 2 images
D'accord je vais tester sur photoshop, je reviens vers vous si le résultat n'y est pas.
Merci beaucoup
Merci beaucoup
Re: Problème : hover avec 2 images
ça marche
Bon courage ^^
Bon courage ^^
Re: Problème : hover avec 2 images
Bonjour (c'était rapide)
Apparemment mon sprite est pas bon haha
- 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
Re: Problème : hover avec 2 images
Si c'est bon
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 :
background-position: horizontal vertical;
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;
}
background-position: horizontal vertical;
Re: Problème : hover avec 2 images
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
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
Re: Problème : hover avec 2 images
Il te suffit juste de jouer avec la position du fond 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;
}
Re: Problème : hover avec 2 images
Oh c'est magique!, je peux utiliser les mêmes réglages pour les autres images?
Merci beaucoup!
Merci beaucoup!
Re: Problème : hover avec 2 images
Peut etre
Sinon, il faudrait adapter pour chaque élément (comme tu as des noms précis, ça ne devrait pas poser problème )
Sinon, il faudrait adapter pour chaque élément (comme tu as des noms précis, ça ne devrait pas poser problème )
Re: Problème : hover avec 2 images
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 :
No comment hm?
Merci à vous
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?
Merci à vous
Re: Problème : hover avec 2 images
Du coup, à la place du "center", il va falloir mettre des chiffres
Allez journée terminée ^^ Je file ; bonne soirée !
- 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 !
Re: Problème : hover avec 2 images
D'accord, merci beaucoup pour cette histoire de hover!
C'est parfait,
Très bonne soirée à vous
C'est parfait,
Très bonne soirée à vous
Sujets similaires
» Problème hover avec un sprite de 2 images
» Menu de navigation avec images en hover
» problème avec Défilement d'images avec liens (partenaires) :
» Problème avec Calendrier (pas même thème) et avec images
» Probleme avec les images en PNG
» Menu de navigation avec images en hover
» problème avec Défilement d'images avec liens (partenaires) :
» Problème avec Calendrier (pas même thème) et avec images
» Probleme avec les images en PNG
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum