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>
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>
/*Style de la page*/
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>
<--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>
<body>
<p style="color:#C0C0C0;font-size:28px;">EFFET DE LUMIERE SUR VOS PHOTOS !</p>
<div id="page" >
<font style="color:#FFFF00">SURVOLEZ LES IMAGES POUR LES ECLAIRER !!!<br>Effet garanti pour vos galeries ou images de votre site !!! </font><br>
Affichez le code source ou cliquez <a href="newsletter.php" style="color:#FFFF00;text-decoration:none">ici</a> pour recevoir le tutoriel par mail.<br><br>
</div>
<div id="main">
<img id="1" src="images/1.jpg"/>
<img id="2" src="images/2.jpg"/>
<img id="3" src="images/3.jpg"/>
<img id="4" src="images/4.jpg"/>
<img id="5" src="images/5.jpg"/>
<img id="6" src="images/6.jpg"/>
<img id="7" src="images/7.jpg"/>
</div>
<br>
<div id="mess">SURVOLEZ LES IMAGES POUR LES ECLAIRER OU LES ASSOMBRIR<br><font style="color:#ff4500">Si ce tuto vous est utile, un clic sur la bannière<br>
publicitaire contribuera au développement de ce site !!!</font></div>
</body>
</html>
Page de démonstration : http://www.patrickcleder.com/tuto_34.php