Bonjour;
vous pouvez agrémenter vos vignettes, ou thumbnails, d'un joli effet de dégradé au survol de la souris.
Vous en aurez un exemple ici:
http://amissc.free.fr/test/Pour obtenir cet effet, veuillez d'abord éditer le fichier
includes/functions.php. Trouvez cette ligne, vers la ligne N°464 (4images version 1.7.6):
$thumb = "<img src=\"".$file_src."\" border=\"0\"".$width_height." alt=\"".format_text($image_name, 2)."\" />";
remplacez-la par ceci:
$thumb = "<img style=\"opacity: 0.6;\" class=\"gradualshine\" onmouseover=\"slowhigh(this)\" onmouseout=\"slowlow(this)\" src=\"".$file_src."\" border=\"0\"".$width_height." alt=\"".format_text($image_name, 2)."\" />";
Aux environs de la ligne N°470, vous trouverez ceci:
$thumb = "<img src=\"".$file_src."\" border=\"".$config['image_border']."\"".$width_height." alt=\"".format_text($image_name, 2)."\" />";
Remplacez-le par cela:
$thumb = "<img style=\"opacity: 0.6;\" class=\"gradualshine\" onmouseover=\"slowhigh(this)\" onmouseout=\"slowlow(this)\" src=\"".$file_src."\" border=\"0\"".$width_height." alt=\"".format_text($image_name, 2)."\" />";
Editez alors le fichier "
templates/votre_template/header.html", et trouvez:
<link rel="stylesheet" href="{template_url}/style.css" />
Insérez juste après:
<style type="text/css">
.gradualshine{
filter:alpha(opacity=35);
-moz-opacity:0.3;
}
</style>
<script type="text/javascript">
/***********************************************
* Gradual Highlight image script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var baseopacity=30
function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",50)
}
function slowlow(which2){
cleartimer()
instantset(baseopacity)
}
function instantset(degree){
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}
function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}
function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}
</script>
Voilà, c'est fait. Vous devez normalement profiter du même effet que celui qui est montré dans le lien cité plus haut.
Salutations.