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

[Nastja]

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

 

[Alyne]

À 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 :

<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