Création de thumbnail + coin rond + effet rollover

Soyez le premier à donner votre avis sur cette source.

Vue 14 762 fois - Téléchargée 1 138 fois

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 / Exemple :


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

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
2
Date d'inscription
lundi 19 mai 2008
Statut
Membre
Dernière intervention
28 mars 2011

petit up !!! ce sujet est un peu vieux :s mais si quelqu'un peut m'aider, ce serait sympa !
Messages postés
2
Date d'inscription
lundi 19 mai 2008
Statut
Membre
Dernière intervention
28 mars 2011

Merci beaucoup pour ce code !!! cependant j'ai un petit soucis !!! mon image s’étire, j'aimerai que mon thumb soit le centre de mon image sans étirement... quelqu'un peu m'aider ?
Messages postés
1
Date d'inscription
dimanche 17 septembre 2006
Statut
Membre
Dernière intervention
29 janvier 2008

Merci beaucoup pour ce code facile à utiliser et super efficace.
Messages postés
1
Date d'inscription
jeudi 9 septembre 2004
Statut
Membre
Dernière intervention
28 août 2007

superbe code avec un contrôle du programme d'appel en php et avec un getsize pour récupérer la taille des images et un fileexist pour savoir si l'image est présente on arrive à faire un truc sympa
bravo au concepteur il est vrai qu'avec une feuille css et quatre lignes on arrive au même résultat mais cela n'est pas compatible avec tous les navigateurs.
encore bravo continue.
lien
http://www.webtv-guadeloupe.com
Messages postés
94
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
13 juin 2012

bravos josh666,

Tu veux une idées pour programmer, des autre effet.. alors en voila une.

la géneration de la deuxieme image ( forme coeur, etoile.. film cinéma.. ) se fait à partir d'une image en noir et blanc qui te sert comme masque...

Ainsi chacun peut donné la forme qu'il veut..
Qu'en pensse tu.. avec un merge, peut etre cela peut se faire sans trop de ligne de code.
Afficher les 25 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.