CodeS-SourceS
Rechercher un code, un tuto, une réponse

Gerer la luminosite des images de votre galerie

Août 2017


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.


[Image:http://static.commentcamarche.net/codes-sources.commentcamarche.net/pictures/faq-255c2c6ad288e308b92694bf1f72ab7d.png|500px||center]

A voir également

Publié par pjcleder.
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.
Ajouter un commentaire

Commentaires

Donnez votre avis
La plus simple des galeries photo en jquery !
Les privilèges dans firefox