Fiche CSS: Filtres

Objet de la fiche : Correction exercice

 Retour au cours

Rappel de l'exercice

Dans la page index.html on va présenter le tableau avec les images initiales  dont on aura modifié l'opacité (50%) pour obtenir le résultat ci-contre. Pour cela on modifiera dans le fichier CSSExterneScreen.css la directive concernant #BoiteCatalogue table td img  pour y introduire les notion d'opacité 50%.
De plus comme les notions d'opacité sont différentes par navigateur on apportera dans la page index.html la correction appropriée pour le cas Internet Explorer.

Lors du survol on rétablira l'opacité initiale de l'image (100%) pour la mettre en valeur pour obtenir le résultat ci-contre. Pour cela on modifiera la directive concernant  #BoiteCatalogue table td img:hover pour y introduire la notion d'opacité 100%.
Comme précédemment  les notions d'opacité étant différentes par navigateur on apportera dans la page index.html la correction appropriée pour le cas Internet Explorer.

Correction

Modifications sur le fichier CSSExterneScreen.css

#BoiteCatalogue table td img {border:solid thin green; opacity:0.5}
#BoiteCatalogue table td img:hover {border:solid thin #00CC00; opacity:1}

Corrections dans la page index.html

<!--[if IE]>
<style type="text/css" media="screen">
#BoiteCatalogue table td img {filter:progid:DXImageTransform.Microsoft.alpha(opacity=50);}
#BoiteCatalogue table td img:hover {filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);}
</style>
<![endif]-->