Décortiquer ces fichiers (html, css, et js)

Sujet dans 'Hi-tech - Gadgets' lancé par Nastja, le 4 septembre 2015.

  1. Nastja

    Nastja
    Expand Collapse
    What would Joan Holloway do?

    Hello,

    Je voudrais utiliser cette page de démarrage pour Firefox et l'éditer mais j'aimerais comprendre le mécanisme derrière les petits icones qui s'ouvrent quand on passe la souris dessus.
    Déjà est-ce que c'est Javascript qui fait cet effet ou le CSS?

    http://www.deviantart.com/art/Startpage-445519822

    Merci :)
     
  2. Alyne

    Alyne
    Expand Collapse
    And we could run away, Before the light of day, You know we always could, The mountains say, the mountains say

    À première vue l'effet en question est réalisé en CSS (le JS sert principalement à éditer/configurer le contenu de la page à partir du fichier data.js qui contient la configuration et la liste des icônes à afficher pour simplifier l'édition)

    Si tu regardes le résultat d'un des éléments "survolables", tu as par exemple :
    Code:
    <div tabindex="0" class="folder">
      <img title="Knowledge" src="img/icons/knowledge.png" class="folder-icon">
      <div class="folder-contents">
         <a title="Wikipedia" href="http://en.wikipedia.org" class="shortcut"><img src="img/icons/wikipedia.png"></a>
         <a title="SmartSearch" href="http://smartsearch.altervista.org" class="shortcut"><img src="img/icons/smartsearch.png"></a>
         <a title="Translate" href="http://translate.google.com" class="shortcut"><img src="img/icons/translate.png"></a>
      </div>
    </div>
    Un div .folder qui contient une image (celle affichée d'office au centre), et un div .folder-contents qui sera affiché seulement au survol du .folder (.folder:hover en css)
    La méthode utilisée est que la div .folder n'affiche que la zone au centre, et lorsqu'on la survole elle s'agrandit pour afficher tout le contenu autour qui était masqué jusque là parce qu'il dépassait de la zone :)
     
    Nastja a BigUpé ce message
Chargement...