CRÉATION DE THUMBNAIL + COIN ROND + EFFET ROLLOVER

---

Commentaire sur cette source (23)
Ajouter un commentaire et/ou une note

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

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\'"';
}

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;">

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

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

• CAMEMBERT 2D/3D
• TEXTE GRAPHIQUE SANS GDI
• ALGORITHME DE DOUGLAS-PEUKER
• CLASSE DE TRAITEMENT D'IMAGE
• GÉOLOCALISATION DE VOS VISITEURS (REVISÉ)

• SYSTÈME DE CACHE POUR SITE EN PHP5
• HORLOGE ANALOGIQUE [ET NUMERIQUE] EN IMAGE
• SERCACHE > CLASS PHP5 POUR LA CRÉATIONS DE CACHES SIMPLEMENT
• [PHP 5.1] PHOTOPHOP (PHPDRAW 2)
• MODIFIER UNE IMAGE(REDIMENSIONNER) STOKER DANS LA BASE DE DONNÉE(MYSQL)