Gerer la luminosite des images de votre galerie
EFFET D’ECLAIRAGE SUR VOS PHOTOS
CONSIGNES
- Votre page doit être liée à la dernière version de jQuery (jquery-1.4.2.js)
- Si ce n’est pas le cas, vous pouvez télécharger ce fichier sur http://api.jquery.com/
Ensuite, placez le code suivant entre les balises <head></head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
HTML, jQuery, CSS
Collez ce code dans l’éditeur de votre choix et enregistrez le avec une extension de type .html ou .php à la racine de votre site.
<!doctype html> <head> <title>Effet d’éclairage sur vos photos !!!</title>
Style de la page
<style>
body {font:14px verdana, sans-serif;background:#000000;color:#C0C0C0;font-weight:bold;overflow:hidden;}
/*Style de la div contenant les images*/
#main {position:absolute;left:10%;top:50%;cursor:pointer;}
/*Style des images et application d’une opacité de 40% à chacune d’elles. Notez que les 3 attributs relatifs à cet effet sont nécessaires pour être compatibles avec tous les navigateurs */
#main img {width:150px;height:150px;z-index:1;filter:alpha(opacity=40);opacity:0.4;-moz-opacity:0.4}
/*Style du corps de texte sous les images*/
#page {font:14px verdana, sans-serif;color:#C0C0C0;font-weight:bold;position:absolute;left:100px;top:100px;background:#000000;}
</style>
la partie jQuery
<--Liaison à la page de la dernière version de jQuery-->
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
//Permet d’éviter les conflits avec d’autres plugins
jQuery.noConflict();
//Préchargement des effets escomptés
jQuery(document).ready(function() {
//Survol d’une image
jQuery('#main img').mouseover(function() {
//Gestion de l’opacité
jQuery(this).css("opacity","1");
jQuery(this).css("filter", "alpha(opacity=100)"); //Pour IE
});
//Sortie du curseur
jQuery('#main img').mouseout(function() {
//Gestion de l’opacité
jQuery(this).css("opacity","0.4");
jQuery(this).css("filter", "alpha(opacity=40)");//Pour IE
});
});
</script>
</head>
EFFET DE LUMIERE SUR VOS PHOTOS !
SURVOLEZ LES IMAGES POUR LES ECLAIRER !!!
Effet garanti pour vos galeries ou images de votre site !!!
Affichez le code source ou cliquez ici pour recevoir le tutoriel par mail.
Ce document intitulé « Gerer la luminosite des images de votre galerie » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.