Question simple, css hover multi elements

Hello,

Ma question n'est pas portée sur le technique en terme de code mais plus sur la manière dont faire correctement les choses. Je m'explique j'ai une image avec disont.. 5 ampoules (1350x900 avec un fond, les ampoules sont attaché au "plafond" ou plutot au haut de la page). Je souhaites avoir un effet Hover sur chaque ampoule et simuler leur éclairage. Comment dois-je m'y prendre ? Est ce que je dois mettre une image globale avec les ampoules éteintes, et 5 image d'ampoule allumées que je positionne par dessous chaque ampoule éteinte en hidden pour ensuite les rendre visible (du coup le reponsive sa va etre chiant). N'y as-il pas un moyen plus simple que de gérer pour chaque ampoule allumées un % de margin pour gérer le responsive? parce que du coup, cela veut dire que je vais devoir les positionné en absolute et gérer les margins en % pour garder la bonne position des ampoules allumée (c'est à dire, au dessus des ampoules eteintes).

Merci de vos conseils
Modifié par JENCAL (05 Feb 2016 - 10:16)

Salut JENCAL,

Pourquoi ne pas gérer chaque ampoule séparément ? Avec un sprite pour l'ampoule allumée/éteinte comme ca tu pourra les placer ou tu veux voir en faire disparaître.

Salut, merci de ta réponse

Les ampoules sont gérer séparement, car j'ai une image globale pour les ampoules éteintes (qui sont bien sur de taille différentes) , et 5 autres images pour les ampoules allumées. Pour chaque ampoules allumées j'ai un .png en transparence. Le problème c'est pour "placé" ses ampoules allumées au dessus de chaque ampoules éteintes correspondantes. Je dois gérer cela en % et je trouve que c'est ... casse gueule car ma premiere image je suis obliger (en dessous de 600px) de changer sa taille (passage de width 70% a 100%) sinon sur iphone c'est trop petit. Du coup cela veut dire que pour les 5 ampoules éteintes je dois gérer 4 % (margin-top, et margin-left), a moins que je me trompe totalement...

Aaaaah d'accord tes ampoules éteintes sont mélangée à ton fond... dur... tu peux pas les décoller ?

Oué je pourrais, et du coup après ? avec un sprite je pourrais gérer cela plus simplement tu me dis ? hmmm.. ça ma l'air intéressant.

Du coup je viens de trouver un lien que je testerais ce soir, je pense que tu ma mis sur la bonne voie merci à toi
Modifié par JENCAL (05 Feb 2016 - 10:37)

Ca m'a l'air plus simple oui (mais je n'e détient pas la vérité toute puissante hein )
En gros tu auras ton fond (sans ampoule, juste le plafond) et par dessus tu peux venir placer tes ampoules en absolute ou tu veux (avec la méthode des sprites tu fais switcher l'image de l'ampoule pour passer de éteint a allumé).
Si tu le gère bien tu pourrais n'avoir qu'une image d'ampoule (tu pourra faire des tailles d'ampoule différentes en redimensionnant le bloc).

_laurent a écrit :
Ca m'a l'air plus simple oui (mais je n'e détient pas la vérité toute puissante hein )
En gros tu auras ton fond (sans ampoule, juste le plafond) et par dessus tu peux venir placer tes ampoules en absolute ou tu veux (avec la méthode des sprites tu fais switcher l'image de l'ampoule pour passer de éteint a allumé).

Je suis d'accord, au niveau du pozitionnement (oui je fais ma réforme orthographique aussi) ce sera plus simple.

Bon, je vous cache pas que c'était la galère, du coup pour simuler le .hover sur les "ampoules" (donc une zone bien limité, j'ai utilisé les <map> <area> que je ne connaissais pas du tout. j'ai détourer mes ampoules, utilisé une librairie jquery pour avoir des area reponsive, et voila, le tour est joué !

Les sprites c'est pas mal, mais comme mes formes été plus "polygone" que rectangle... j'étais pas fan du coté visuel.

merci à vous en tout cas.