Partage
  • Partager sur Facebook
  • Partager sur Twitter

Menu avec images "réactives"

Ajouter des "class" normal, hover, active et visited à des images

    12 septembre 2017 à 7:38:21

    Bonjour, le titre est assez explicatif, mais allons-y:

    Imaginons que je veuille faire un site sur la nature,

    • page 1= les animaux
    • page 2 = la forêt
    • page 3 = la mer

    Les menus pour accéder à ces pages seraient:

    pour la page 1 :

    • normal :image d'un paysage 100x100px
    • hover : image d'un animal 100 x 100px
    • Active : image d'un fusil 100 x 100px
    • Visited : image d'un squelette

    Pour la page 2:

    • normal :image d'une forêt 100 x 100px
    • hover : image d'un arbre 100 x 100px
    • Active : image d'une tronçonneuse 100 x 100px
    • Visited : image d'un désert

    ETC etc...

    Je pense que ce devrait être possible avec des CSS mais deux jours d'essais plus ou moins convaincants n'ont pas résolu mon problème.

    Merci d'avance de toute aide

    Dominique

    • Partager sur Facebook
    • Partager sur Twitter
      12 septembre 2017 à 9:04:06

      Bonjour,

      Il est en effet possible de faire ça.

      Avez vous regardé du côté de la fonction background en CSS ? -> lien

      En affichant votre image comme background dans une div par exemple vous pouvez modifier la source du background suivant "l'état" de cette div ^^

      En espérant vous avoir guidé au moins légèrement

      -
      Edité par WiizMamel 12 septembre 2017 à 9:06:20

      • Partager sur Facebook
      • Partager sur Twitter
      Vous savez, moi je ne crois pas qu’il y ait de bonne ou de mauvaise situation. Moi, si je devais résumer ma vie aujourd’hui avec vous, je dirais que c’est d’abord des rencontres. Des gens qui m’ont tendu la main, peut-être à un moment où je ne pouvais pas, où j’étais seul chez moi. Et c’est assez curieux de se dire que les hasards, les rencontres forgent une destinée... Parce que quand on a le goût de la chose, quand on a le goût de la chose bien faite, le beau geste, parfois on ne trouve pas l’interlocuteur en face je dirais, le miroir qui vous aide à avancer. Alors ça n’est pas mon cas, comme je disais là, puisque moi au contraire, j’ai pu : et je dis merci à la vie, je lui dis merci, je chante la vie, je danse la vie... je ne suis qu’amour ! Et finalement, quand beaucoup de gens aujourd’hui me disent « Mais comment fais-tu pour avoir cette humanité ? », et bien je leur réponds très simplement, je leur dis que c’est ce goût de l’amour ce goût donc qui m’a poussé aujourd’hui à entreprendre une construction mécanique, mais demain qui sait ? Peut-être simplement à me mettre au service de la communauté, à faire le don, le don de soi...
        12 septembre 2017 à 9:32:48

        Pour faire suite à mon précédent mail, voici un exemple de ce que je voudrais faire, mais ici mon image "visited" ne fonctionne pas (et je n'ai pas mis d'autre lien que la page elle-même..

        http://susini.corsica/TESTS/test-img2.html

        La feuille de style est "un peu" surchargée et bidouillée :pirate: mais ça fonctionne sur Google, Firefox et Edge, elle est dans la page elle-même pour les curieux.

        Merci d'avance à tous ceux qui essayeront de m'aider :)

        • Partager sur Facebook
        • Partager sur Twitter
          12 septembre 2017 à 9:42:47

          D'après ces 2 liens : lien1, lien2

          Les navigateurs limitent les propriétés qui peuvent être appliquées par :visited, et background-image n'est pas autorisée.

          L'alternative serait donc d'utiliser background-color. (voir lien2)

          -
          Edité par WiizMamel 12 septembre 2017 à 9:43:18

          • Partager sur Facebook
          • Partager sur Twitter
          Vous savez, moi je ne crois pas qu’il y ait de bonne ou de mauvaise situation. Moi, si je devais résumer ma vie aujourd’hui avec vous, je dirais que c’est d’abord des rencontres. Des gens qui m’ont tendu la main, peut-être à un moment où je ne pouvais pas, où j’étais seul chez moi. Et c’est assez curieux de se dire que les hasards, les rencontres forgent une destinée... Parce que quand on a le goût de la chose, quand on a le goût de la chose bien faite, le beau geste, parfois on ne trouve pas l’interlocuteur en face je dirais, le miroir qui vous aide à avancer. Alors ça n’est pas mon cas, comme je disais là, puisque moi au contraire, j’ai pu : et je dis merci à la vie, je lui dis merci, je chante la vie, je danse la vie... je ne suis qu’amour ! Et finalement, quand beaucoup de gens aujourd’hui me disent « Mais comment fais-tu pour avoir cette humanité ? », et bien je leur réponds très simplement, je leur dis que c’est ce goût de l’amour ce goût donc qui m’a poussé aujourd’hui à entreprendre une construction mécanique, mais demain qui sait ? Peut-être simplement à me mettre au service de la communauté, à faire le don, le don de soi...
            12 septembre 2017 à 10:04:03

            Je vais essayer avec une transparence sur les images "visited" : Si je mets 50% de transparence j'aurai un effet "déjà vu"...

            Je poste la réponse dès que j'aurai le temps d'essayer.

            Et Merci déjà à WiizMamel :magicien:

            RE-bonjour,

            Dans le même ordre d'idées, j'aime beaucoup :soleil: ce site:

            http://cigue.net/fr/projets/

            Les pages visitées sont marquées d'une croix sur l'image lien, moi, je le ferais avec un fading (ou autre trick)

            Dans le code source, je ne trouve pas avec quoi c'est fait !:euh:

            • Partager sur Facebook
            • Partager sur Twitter
              12 septembre 2017 à 15:05:45

              Je pense qu'ils utilisent du javaScript et plus particulièrement du jQuerry ;)
              • Partager sur Facebook
              • Partager sur Twitter
                13 septembre 2017 à 9:46:28

                Bonjour,

                Voilà ce que j'ai fait en me basant sur votre exemple : jsfiddle

                La fonction javascript est à adapter pour que le navigateur se souvienne du lien visited meme après avoir rafraîchi la page.

                Mais je vous invite a faire un nouveau sujet dans la partie javascript du forum ^^.

                -
                Edité par WiizMamel 13 septembre 2017 à 9:51:25

                • Partager sur Facebook
                • Partager sur Twitter
                Vous savez, moi je ne crois pas qu’il y ait de bonne ou de mauvaise situation. Moi, si je devais résumer ma vie aujourd’hui avec vous, je dirais que c’est d’abord des rencontres. Des gens qui m’ont tendu la main, peut-être à un moment où je ne pouvais pas, où j’étais seul chez moi. Et c’est assez curieux de se dire que les hasards, les rencontres forgent une destinée... Parce que quand on a le goût de la chose, quand on a le goût de la chose bien faite, le beau geste, parfois on ne trouve pas l’interlocuteur en face je dirais, le miroir qui vous aide à avancer. Alors ça n’est pas mon cas, comme je disais là, puisque moi au contraire, j’ai pu : et je dis merci à la vie, je lui dis merci, je chante la vie, je danse la vie... je ne suis qu’amour ! Et finalement, quand beaucoup de gens aujourd’hui me disent « Mais comment fais-tu pour avoir cette humanité ? », et bien je leur réponds très simplement, je leur dis que c’est ce goût de l’amour ce goût donc qui m’a poussé aujourd’hui à entreprendre une construction mécanique, mais demain qui sait ? Peut-être simplement à me mettre au service de la communauté, à faire le don, le don de soi...

                Menu avec images "réactives"

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                • Editeur
                • Markdown