Virginie Bourgeaux Webrealis, Conseil, accompagnement, formation, outils web, sites, créations web, ergonomie, référencement
Le site est réalisé pour assurer l'ouverture des liens externes dans un nouvel espace (fenêtre ou onglet suivant votre navigateur). Si vous ne souhaitez pas conserver cette option, désactivez la ici.
Site testé sous WXP : FF 19.0.2 - IE 8 | MacOSX 10.6.3 : Chrome - FF
Création graphique : Morgane Planchenault - Marion Jaillant


Démonstration


 

Réduction d'une image au roll-over

<<< retour

Donc, quelques explications :
au survol on réduit jusqu'à une taille minimum définie;
lorsque la souris sort du cadre la réduction s'arrête.
la fonction setInterval est une fonction toute faite en javascript qui pemet d'appeler une autre action tous les X millisecondes
donc on appelle une autre fonction qui diminue la largeur de l'image d'un certain nombre de px
l'image est placée dans un cadre qui a un overflow:hidden, l'overflow est la méthode qui indique ce qui se passe quand le contenu d'un block dépasse le volume du block et hidden signifie que ce qui déborde est masqué.

Pour le filtre de couleur, je pensais utiliser opacity, mais pas forcément : http://www.alsacreations.com/tuto/lire/909-CSS-transparence-couleur-rgba.html, l'opacity est simplement supporté partout contrairement à rgba pour l'instant.