Un dégradé esthétique pour vos vignettes.

[† manurom]

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):

Code: [Select]

$thumb = "<img src=\"".$file_src."\" border=\"0\"".$width_height." alt=\"".format_text($image_name, 2)."\" />";
remplacez-la par ceci:

Code: [Select]

      $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:

Code: [Select]

      $thumb = "<img src=\"".$file_src."\" border=\"".$config['image_border']."\"".$width_height." alt=\"".format_text($image_name, 2)."\" />";
Remplacez-le par cela:

Code: [Select]

      $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:

Code: [Select]

<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.