Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum.
Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
CRÉATION DE THUMBNAIL + COIN ROND + EFFET ROLLOVER
Information sur la source
Description
Bonjour à tous ! J'ai créer une fonction qui permet de créer a partir de n'importe quelle image un thumbnail. Il y a beaucoup de script qui font cela. L'originalité de ma source est que la fonction créer un thumnail avec les coin ronds et un effet sur l'image lors d'un rollOver. CARACTÉRISTIQUE Coin rond / Coin carrer Effet RollOver Système de mise en cache Compatible IE / Firefox Génère un gif avec transparence pour laisser place à la couleur de fond de la page d'appel Possibilité de ne pas spécifié la hauteur (ds ce cas un dedimensionnement proportionnel est effectué)
Source
- function createThumbWithOver($img_src,$w_thumb,$h_thumb,$border=10,$radial=10,$alpha=50){
-
- $pic['destOver']['name'] = md5($img_src.$w_thumb.$h_thumb.$border.$radial.$alpha.'over'); // nom du fichier over
- $pic['destNormal']['name'] = md5($img_src.$w_thumb.$h_thumb.$border.$radial.$alpha); // nom du fichier normal
-
- $makePic = false; // variable pour vérifcation is on cré les images ou non
- // Routine pour vérifier si le fichier cache existe et si il est plus vieux que l'image d'origine
- if(file_exists('./temp/'.$pic['destNormal']['name'].'.gif') === true ){ // si le fihcier existe ?
- if(intval(filemtime($img_src)) > intval(filemtime('./temp/'.$pic['destNormal']['name'].'.gif'))){ // si le fichier cache est plsu vieux que le fichier source
- $makePic = true; // fichier source est plus récent donc il faut recréer les images
- }else{
- $makePic = false; // le fichier sourve est plsu vieux que le fichier cache donc on ne le recré pas
- }
- }else{
- $makePic = true; // si le fihcier cache n'existe pas il faut le créer
- }
-
- // Vérification de la variable , piour savoIr si on cré les images
- if($makePic === true){
- // Récupération des infos de l'image source
- list($pic['src']['info']['width'], $pic['src']['info']['height'], $pic['src']['info']['type'], $pic['src']['info']['attr']) = getimagesize($img_src);
-
- //On vérifie si le parametre de la hauteur est plsu grand que 0
- if($h_thumb == 0){ // si egal a zaro on affecte la hauteur proportionnellement
- $h_thumb = floor($pic['src']['info']['height'] * $w_thumb / $pic['src']['info']['width']);
- }
- switch($pic['src']['info']['type']){
- case"1": $pic['src']['ress'] = imagecreatefromgif($img_src); break; // Création de l'image pour une source gif
- case"2": $pic['src']['ress'] = imagecreatefromjpeg($img_src); break; // Création de l'image pour une source jpg
- case"3": $pic['src']['ress'] = imagecreatefrompng($img_src); break; // Création de l'image pour une source png
- }
-
- $pic['destNormal']['ress'] = imagecreatetruecolor($w_thumb, $h_thumb); // On crée la miniature vide pour l'image Etat Normal
- $pic['destOver']['ress'] = imagecreatetruecolor($w_thumb, $h_thumb); // On crée la miniature vide pour l'image Etat Over
-
- // On crée la miniature Normal
- imagecopyresampled($pic['destNormal']['ress'], $pic['src']['ress'], 0, 0, 0, 0, $w_thumb, $h_thumb, $pic['src']['info']['width'], $pic['src']['info']['height']);
- // On crée la miniature Over
- imagecopyresampled($pic['destOver']['ress'], $pic['src']['ress'], 0, 0, 0, 0, $w_thumb, $h_thumb, $pic['src']['info']['width'], $pic['src']['info']['height']);
-
- // On commence à créer le masque pour le contour coin rond
- $pic['maskBorder']['ress'] = imagecreate($w_thumb, $h_thumb); // On crée le mask vide
- $pic['maskBorder']['green'] = imagecolorallocate($pic['maskBorder']['ress'], 0, 255, 0); // affectation de la couleur verte
- $pic['maskBorder']['pink'] = imagecolorallocate($pic['maskBorder']['ress'], 255, 0, 255); // affectation de la couleur rose
- // Ici on trace la zone à mettre en transparence avant le merge entre les 2 images
- // PRINCIPE : 4 cercle situé dans chauque coin avec un rayon de 2 fois la bordure
- // PRINCIPE : 1 forme polygonale de 8 coter pour peindre de rose la zone restante
- imagefilledellipse($pic['maskBorder']['ress'], $radial, $radial, $radial*2, $radial*2, $pic['maskBorder']['pink']); // cercle gauche supérieur
- imagefilledellipse($pic['maskBorder']['ress'], $w_thumb-$radial, $radial, $radial*2, $radial*2, $pic['maskBorder']['pink']); // cercle droite supérieur
- imagefilledellipse($pic['maskBorder']['ress'], $radial, $h_thumb-$radial, $radial*2, $radial*2, $pic['maskBorder']['pink']); // cercle gauche inférieur
- imagefilledellipse($pic['maskBorder']['ress'], $w_thumb-$radial, $h_thumb-$radial, $radial*2, $radial*2, $pic['maskBorder']['pink']); // cercle droit inférieur
- imagefilledpolygon ($pic['maskBorder']['ress'], array($radial,0,0,$radial,0,$h_thumb-$radial,$radial,$h_thumb,$w_thumb-$radial,$h_thumb,$w_thumb,$h_thumb-$radial,$w_thumb,$radial,$w_thumb-$radial,0), 8, $pic['maskBorder']['pink']); // forme géométrique à 8 coter
- imagecolortransparent($pic['maskBorder']['ress'], $pic['maskBorder']['pink']); // Applique la transparence à la couleur rose
-
- // On commence à créer le masque pour l'image over
- $pic['maskOver']['ress'] = imagecreate($w_thumb, $h_thumb); // On crée le mask vide
- $pic['maskOver']['white'] = imagecolorallocate($pic['maskOver']['ress'], 255, 255, 255); // On definis la couleur blanche
- $pic['maskOver']['pink'] = imagecolorallocate($pic['maskOver']['ress'], 0, 255, 0); // On definis la couleur blanche qui sera utilisé comme couleur de transparence
- // Ici on trace la zone à mettre en transparence avant le merge entre les 2 images
- // PRINCIPE : 4 cercle situé dans chauque coin avec un rayon de 2 fois la bordure
- // PRINCIPE : 1 forme polygonale de 8 coter pour peindre de rose la zone restante
- imagefilledellipse($pic['maskOver']['ress'] , $border+$radial, $border+$radial, $radial*2, $radial*2, $pic['maskOver']['pink']); // cercle gauche supérieur
- imagefilledellipse($pic['maskOver']['ress'] , $w_thumb-($border+$radial), $border+$radial, $radial*2, $radial*2, $pic['maskOver']['pink']); // cercle droite supérieur
- imagefilledellipse($pic['maskOver']['ress'] , $border+$radial, $h_thumb-($border+$radial), $radial*2, $radial*2, $pic['maskOver']['pink']); // cercle gauche inférieur
- imagefilledellipse($pic['maskOver']['ress'] , $w_thumb-($border+$radial), $h_thumb-($border+$radial), $radial*2, $radial*2, $pic['maskOver']['pink']); // cercle droit inférieur
- imagefilledpolygon ($pic['maskOver']['ress'] , array($border+$radial,$border,$border,$border+$radial,$border,$h_thumb-($border+$radial),$border+$radial,$h_thumb-$border,$w_thumb-($border+$radial),$h_thumb-$border,$w_thumb-$border,$h_thumb-($border+$radial),$w_thumb-$border,$border+$radial,$w_thumb-($border+$radial),$border), 8, $pic['maskOver']['pink']); // forme géométrique à 8 coter
- imagecolortransparent($pic['maskOver']['ress'] , $pic['maskOver']['pink']); // Applique la transparence à la couleur rose
-
- // TRAITEMENT SUR L'IMAGE NORMAL
- imagecopymerge($pic['destNormal']['ress'], $pic['maskBorder']['ress'], 0, 0, 0, 0, $w_thumb, $h_thumb, 100); // copie du masque au dessus de la miniature avec une transparence (0%)
- // il faut enlever le vert pour que le fond soit transparent
- if($radial > 0){ // si le radial est de 0 alors ne pas appliquer la transparence parce que le pixel 0,0 n'est pas vert ce qui entraine une transparence sur les zones qui on la meme couleur que le pixel 0,0
- imagetruecolortopalette($pic['destNormal']['ress'], FALSE, 256); // conversion en palette 256 couleur
- $pic['destNormal']['green'] = imagecolorat($pic['destNormal']['ress'], 0, 0); // affectation de la couleur verte (récupérer au pixel 0,0)
- imagecolortransparent($pic['destNormal']['ress'], $pic['destNormal']['green']); // Applique la transparence à la couleur verte
- }
- // On enregistre la miniature avec bordure coin rond
- imagegif($pic['destNormal']['ress'],'./temp/'.$pic['destNormal']['name'].'.gif');
- imagedestroy($pic['destNormal']['ress']);
-
- // TRAITEMENT SUR L'IMAGE OVER
- imagecopymerge($pic['destOver']['ress'], $pic['maskOver']['ress'], 0, 0, 0, 0, $w_thumb, $h_thumb, $alpha); // copie du masque au dessus de la miniature avec une transparence ($alpha)
- // Merge du masque du contour
- imagecopymerge($pic['destOver']['ress'], $pic['maskBorder']['ress'], 0, 0, 0, 0, $w_thumb, $h_thumb, 100); // copie du masque au dessus de la miniature avec une transparence ($alpha)
- // il faut enlever le vert pour que le fond soit transparent
- if($radial > 0){ // si le radial est de 0 alors ne pas appliquer la transparence parce que le pixel 0,0 n'est pas vert ce qui entraine une transparence sur les zones qui on la meme couleur que le pixel 0,0
- imagetruecolortopalette($pic['destOver']['ress'], FALSE, 256); // conversion en palette 256 couleur
- $pic['destOver']['green'] = imagecolorat($pic['destOver']['ress'], 0, 0); // affectation de la couleur verte (récupérer au pixel 0,0)
- imagecolortransparent($pic['destOver']['ress'], $pic['destOver']['green'] ); // Applique la transparence à la couleur verte
- }
- // On enregistre la miniature over
- imagegif($pic['destOver']['ress'],'./temp/'.$pic['destOver']['name'].'.gif');
- imagedestroy($pic['destOver']['ress']);
- }
- // Retourne les le code html / javascript pour afficher l'image et effectuer le rollOver / rollOut
- return 'src="./temp/'.$pic['destNormal']['name'].'.gif" onMouseOver="this.src=\'./temp/'.$pic['destOver']['name'].'.gif\'" onMouseOut="this.src=\'./temp/'.$pic['destNormal']['name'].'.gif\'"';
- }
function createThumbWithOver($img_src,$w_thumb,$h_thumb,$border=10,$radial=10,$alpha=50){
$pic['destOver']['name'] = md5($img_src.$w_thumb.$h_thumb.$border.$radial.$alpha.'over'); // nom du fichier over
$pic['destNormal']['name'] = md5($img_src.$w_thumb.$h_thumb.$border.$radial.$alpha); // nom du fichier normal
$makePic = false; // variable pour vérifcation is on cré les images ou non
// Routine pour vérifier si le fichier cache existe et si il est plus vieux que l'image d'origine
if(file_exists('./temp/'.$pic['destNormal']['name'].'.gif') === true ){ // si le fihcier existe ?
if(intval(filemtime($img_src)) > intval(filemtime('./temp/'.$pic['destNormal']['name'].'.gif'))){ // si le fichier cache est plsu vieux que le fichier source
$makePic = true; // fichier source est plus récent donc il faut recréer les images
}else{
$makePic = false; // le fichier sourve est plsu vieux que le fichier cache donc on ne le recré pas
}
}else{
$makePic = true; // si le fihcier cache n'existe pas il faut le créer
}
// Vérification de la variable , piour savoIr si on cré les images
if($makePic === true){
// Récupération des infos de l'image source
list($pic['src']['info']['width'], $pic['src']['info']['height'], $pic['src']['info']['type'], $pic['src']['info']['attr']) = getimagesize($img_src);
//On vérifie si le parametre de la hauteur est plsu grand que 0
if($h_thumb == 0){ // si egal a zaro on affecte la hauteur proportionnellement
$h_thumb = floor($pic['src']['info']['height'] * $w_thumb / $pic['src']['info']['width']);
}
switch($pic['src']['info']['type']){
case"1": $pic['src']['ress'] = imagecreatefromgif($img_src); break; // Création de l'image pour une source gif
case"2": $pic['src']['ress'] = imagecreatefromjpeg($img_src); break; // Création de l'image pour une source jpg
case"3": $pic['src']['ress'] = imagecreatefrompng($img_src); break; // Création de l'image pour une source png
}
$pic['destNormal']['ress'] = imagecreatetruecolor($w_thumb, $h_thumb); // On crée la miniature vide pour l'image Etat Normal
$pic['destOver']['ress'] = imagecreatetruecolor($w_thumb, $h_thumb); // On crée la miniature vide pour l'image Etat Over
// On crée la miniature Normal
imagecopyresampled($pic['destNormal']['ress'], $pic['src']['ress'], 0, 0, 0, 0, $w_thumb, $h_thumb, $pic['src']['info']['width'], $pic['src']['info']['height']);
// On crée la miniature Over
imagecopyresampled($pic['destOver']['ress'], $pic['src']['ress'], 0, 0, 0, 0, $w_thumb, $h_thumb, $pic['src']['info']['width'], $pic['src']['info']['height']);
// On commence à créer le masque pour le contour coin rond
$pic['maskBorder']['ress'] = imagecreate($w_thumb, $h_thumb); // On crée le mask vide
$pic['maskBorder']['green'] = imagecolorallocate($pic['maskBorder']['ress'], 0, 255, 0); // affectation de la couleur verte
$pic['maskBorder']['pink'] = imagecolorallocate($pic['maskBorder']['ress'], 255, 0, 255); // affectation de la couleur rose
// Ici on trace la zone à mettre en transparence avant le merge entre les 2 images
// PRINCIPE : 4 cercle situé dans chauque coin avec un rayon de 2 fois la bordure
// PRINCIPE : 1 forme polygonale de 8 coter pour peindre de rose la zone restante
imagefilledellipse($pic['maskBorder']['ress'], $radial, $radial, $radial*2, $radial*2, $pic['maskBorder']['pink']); // cercle gauche supérieur
imagefilledellipse($pic['maskBorder']['ress'], $w_thumb-$radial, $radial, $radial*2, $radial*2, $pic['maskBorder']['pink']); // cercle droite supérieur
imagefilledellipse($pic['maskBorder']['ress'], $radial, $h_thumb-$radial, $radial*2, $radial*2, $pic['maskBorder']['pink']); // cercle gauche inférieur
imagefilledellipse($pic['maskBorder']['ress'], $w_thumb-$radial, $h_thumb-$radial, $radial*2, $radial*2, $pic['maskBorder']['pink']); // cercle droit inférieur
imagefilledpolygon ($pic['maskBorder']['ress'], array($radial,0,0,$radial,0,$h_thumb-$radial,$radial,$h_thumb,$w_thumb-$radial,$h_thumb,$w_thumb,$h_thumb-$radial,$w_thumb,$radial,$w_thumb-$radial,0), 8, $pic['maskBorder']['pink']); // forme géométrique à 8 coter
imagecolortransparent($pic['maskBorder']['ress'], $pic['maskBorder']['pink']); // Applique la transparence à la couleur rose
// On commence à créer le masque pour l'image over
$pic['maskOver']['ress'] = imagecreate($w_thumb, $h_thumb); // On crée le mask vide
$pic['maskOver']['white'] = imagecolorallocate($pic['maskOver']['ress'], 255, 255, 255); // On definis la couleur blanche
$pic['maskOver']['pink'] = imagecolorallocate($pic['maskOver']['ress'], 0, 255, 0); // On definis la couleur blanche qui sera utilisé comme couleur de transparence
// Ici on trace la zone à mettre en transparence avant le merge entre les 2 images
// PRINCIPE : 4 cercle situé dans chauque coin avec un rayon de 2 fois la bordure
// PRINCIPE : 1 forme polygonale de 8 coter pour peindre de rose la zone restante
imagefilledellipse($pic['maskOver']['ress'] , $border+$radial, $border+$radial, $radial*2, $radial*2, $pic['maskOver']['pink']); // cercle gauche supérieur
imagefilledellipse($pic['maskOver']['ress'] , $w_thumb-($border+$radial), $border+$radial, $radial*2, $radial*2, $pic['maskOver']['pink']); // cercle droite supérieur
imagefilledellipse($pic['maskOver']['ress'] , $border+$radial, $h_thumb-($border+$radial), $radial*2, $radial*2, $pic['maskOver']['pink']); // cercle gauche inférieur
imagefilledellipse($pic['maskOver']['ress'] , $w_thumb-($border+$radial), $h_thumb-($border+$radial), $radial*2, $radial*2, $pic['maskOver']['pink']); // cercle droit inférieur
imagefilledpolygon ($pic['maskOver']['ress'] , array($border+$radial,$border,$border,$border+$radial,$border,$h_thumb-($border+$radial),$border+$radial,$h_thumb-$border,$w_thumb-($border+$radial),$h_thumb-$border,$w_thumb-$border,$h_thumb-($border+$radial),$w_thumb-$border,$border+$radial,$w_thumb-($border+$radial),$border), 8, $pic['maskOver']['pink']); // forme géométrique à 8 coter
imagecolortransparent($pic['maskOver']['ress'] , $pic['maskOver']['pink']); // Applique la transparence à la couleur rose
// TRAITEMENT SUR L'IMAGE NORMAL
imagecopymerge($pic['destNormal']['ress'], $pic['maskBorder']['ress'], 0, 0, 0, 0, $w_thumb, $h_thumb, 100); // copie du masque au dessus de la miniature avec une transparence (0%)
// il faut enlever le vert pour que le fond soit transparent
if($radial > 0){ // si le radial est de 0 alors ne pas appliquer la transparence parce que le pixel 0,0 n'est pas vert ce qui entraine une transparence sur les zones qui on la meme couleur que le pixel 0,0
imagetruecolortopalette($pic['destNormal']['ress'], FALSE, 256); // conversion en palette 256 couleur
$pic['destNormal']['green'] = imagecolorat($pic['destNormal']['ress'], 0, 0); // affectation de la couleur verte (récupérer au pixel 0,0)
imagecolortransparent($pic['destNormal']['ress'], $pic['destNormal']['green']); // Applique la transparence à la couleur verte
}
// On enregistre la miniature avec bordure coin rond
imagegif($pic['destNormal']['ress'],'./temp/'.$pic['destNormal']['name'].'.gif');
imagedestroy($pic['destNormal']['ress']);
// TRAITEMENT SUR L'IMAGE OVER
imagecopymerge($pic['destOver']['ress'], $pic['maskOver']['ress'], 0, 0, 0, 0, $w_thumb, $h_thumb, $alpha); // copie du masque au dessus de la miniature avec une transparence ($alpha)
// Merge du masque du contour
imagecopymerge($pic['destOver']['ress'], $pic['maskBorder']['ress'], 0, 0, 0, 0, $w_thumb, $h_thumb, 100); // copie du masque au dessus de la miniature avec une transparence ($alpha)
// il faut enlever le vert pour que le fond soit transparent
if($radial > 0){ // si le radial est de 0 alors ne pas appliquer la transparence parce que le pixel 0,0 n'est pas vert ce qui entraine une transparence sur les zones qui on la meme couleur que le pixel 0,0
imagetruecolortopalette($pic['destOver']['ress'], FALSE, 256); // conversion en palette 256 couleur
$pic['destOver']['green'] = imagecolorat($pic['destOver']['ress'], 0, 0); // affectation de la couleur verte (récupérer au pixel 0,0)
imagecolortransparent($pic['destOver']['ress'], $pic['destOver']['green'] ); // Applique la transparence à la couleur verte
}
// On enregistre la miniature over
imagegif($pic['destOver']['ress'],'./temp/'.$pic['destOver']['name'].'.gif');
imagedestroy($pic['destOver']['ress']);
}
// Retourne les le code html / javascript pour afficher l'image et effectuer le rollOver / rollOut
return 'src="./temp/'.$pic['destNormal']['name'].'.gif" onMouseOver="this.src=\'./temp/'.$pic['destOver']['name'].'.gif\'" onMouseOut="this.src=\'./temp/'.$pic['destNormal']['name'].'.gif\'"';
}
Conclusion
INSTALLATION Nécessite la librairie GD 2 Le dossier cache doit etres au meme niveau que l'appel du script... les droit d'acces doit aussi etre affecté au dossier (777)
LA FONCTION ACCEPTE 6 PARAMÈTRES $img_src // Chemin vers l'image cible [OBLIGATOIRE] $w_thumb // largeur de la thumbnail désiré [OBLIGATOIRE] $h_thumb // hauteur de la thumbnail désiré [OBLIGATOIRE](POSSIBILITÉ DE METTRE 0 COMME VALEUR, DANS CE CAS UN REDIMENSIONNEMENT PROPORTIONNELLE EST EFFECTUÉ) $border // Épaisseur de la bordure de l'effet over [OPTIONNEL][DEFAULT:10] $radial // Rayon utilisé pour créer les coins ronds [OPTIONNEL][DEFAULT:10](Un rayon de 0 équivaut a aucun coin rond) $alpha // Détermine le niveau de transparence de l'effet Over [OPTIONNEL][DEFAULT:50](100 aucune transparence / 0 transparence complète)
EXEMPLE D'UTILISATION: <img <?php echo createThumbWithOver('couchersoleil.jpg',100,100); ?> style="cursor:pointer;"> <img <?php echo createThumbWithOver('couchersoleilgrey.jpg',100,100); ?> style="cursor:pointer;"> <img <?php echo createThumbWithOver('couchersoleil.gif',100,100); ?> style="cursor:pointer;"> <img <?php echo createThumbWithOver('img.jpg',100,100); ?> style="cursor:pointer;"> <img <?php echo createThumbWithOver('bleutree.jpg',400,100,10,0,50); ?> style="cursor:pointer;">
Fichier Zip
Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !
Télécharger le zip
Historique
- 17 juin 2006 00:37:21 :
- Mise à jour de la source et des explications
- 04 juillet 2006 14:45:23 :
- Ajout de la possibilité de mettre 0 comme valeur de paramètre de hauteur pour que la function effectue un redimensionnement proportionnel
Sources de la même categorie
Commentaires
Discussions en rapport avec ce code source
|
CalendriCode
| | | L | M | M | J | V | S | D |
| | | | 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 | |
|
Téléchargements
Logiciels à télécharger sur le même thème :
|