begin process at 2012 02 11 18:16:24
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Graphique

 > CRÉATION DE THUMBNAIL + COIN ROND + EFFET ROLLOVER

CRÉATION DE THUMBNAIL + COIN ROND + EFFET ROLLOVER


 Information sur la source

Note :
7,33 / 10 - par 6 personnes
7,33 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Classé sous :gd, thumbnail, redimensionner, cache, rollover Niveau :Initié Date de création :16/06/2006 Date de mise à jour :04/07/2006 14:45:22 Vu / téléchargé :13 067 / 1 024

Auteur : josh666

Ecrire un message privé
Commentaire sur cette source (25)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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,10 0); ?> 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

Les Membres Club peuvent 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

Source avec Zip Source avec une capture CAMEMBERT BD par dardelphi
Source avec une capture AMÉLIORATION : CAMEMBERT par asphator
GESTION DE COULEUR par manuche
Source avec Zip NAVIGATOR (+CSSDETECTOR) par xXVoxPopuliXx
COMMENT, AVEC GD, DESSINER UN RECTANGLE TRANSPARENT PLEIN AV... par Rainbow

 Sources en rapport avec celle ci

CLASSE DE GESTION DE "VARIABLES GLOBALES D'ENVIRONNEMENT" par pifou25
CRÉER UNE IMAGE À PARTIR DU TEXTE par dilar
Source avec Zip Source avec une capture VIGNETTE EN RECADRANT AVEC TAILLE FIXE! par GillesWebmaster
REDIMENTION D'IMAGE, LIBRAIRIE GD par 17l7
MODIFIER UNE IMAGE(REDIMENSIONNER) STOKER DANS LA BASE DE DO... par farzit

Commentaires et avis

Commentaire de josh666 le 16/06/2006 23:03:12

Laisser vos commentaires / Améliorations !

Commentaire de MrdJack le 16/06/2006 23:46:56

"100 aucune opacité / 0 transparence complète"
ya ptete une erreur là...
mais sinon l'effet est pas mal.
coté code, ya des optimisations a effectuer :
#        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

les opération répétées qui donnent toujours le mem résultats peuvent etre calculées une fois pour toute et stockées dans une variable
$border+$radial ; $radial*2 etc...
mais ca reste de l'optimisation basique

@+

Commentaire de josh666 le 16/06/2006 23:57:45

"100 aucune transparence / 0 transparence complète" comme sa, c mieu je crois... :P

En ce qui concerne l'otimisation des calculs en les stoquant ds une variable c'est vrai que sa serait mieu... je fais sa aussitot que j'ai le temps

Commentaire de josh666 le 17/06/2006 00:38:35

Corrections effectuées !

Commentaire de TheSin le 17/06/2006 12:44:06

Ca a l'air sympa, dommage que j'ai pas le temps de le tester et que je n'en ai pas besoin ;)

Commentaire de WhiteDwarf le 19/06/2006 06:36:56

Pas mal du tout j'aime beaucoup, bravo. Je ne sais pas non plus si ca me servira, mais si un jour j'en ai beson, je sais ou c'est ;)

@++

Commentaire de josh666 le 19/06/2006 15:04:36

Merci bien.

En fait j'ai pensé de couplé avec un gestionnaire d'iamge sa pourrait être sympa.. masi bon a vous de voir l'usage que vous voulez en faire.. :P
Je vais surment en faire d'autre style d'ici peu je vous tien au courant.. :)

Commentaire de WhiteDwarf le 19/06/2006 22:28:35

"Je vais surment en faire d'autre style d'ici peu je vous tien au courant.. :)" ==> ouais carrément :)

Sinon ca peut faire un effet joli dans un espace membre, pour afficher l'avatar de quelqu'un sur un forum...
Par contre, faire un changement d'opacité sur l'image en javascript, ca serais pas mieux que de le faire avec deux images séparées ?

Commentaire de josh666 le 20/06/2006 04:53:34

En fais si tu avais regarder le code comme il faut, tu aurait remarquer que le script cré 2 images .. une etat normal et une etat over.. :P
Et le paramètre $alpha permet de définir l'opacité du masque blanc qui est appliquer sur l'image normal avant de l'enregistrer comme etat Over..
Le javascript ne sert qu'a remplacer l'iamge etat normal par l'image etat Over lors du survol de l'image. :P

Sinon vous avez des idées concernant les nouveaux style de thumbnails ?
Toutes les idées ont accpeter...enfin presque.. ne me demander pas de thumbnail en forme de coeur...
c pas que jsusi pas capable.. mais c un peu trop cul cul a mon gout.. lol

Sur ce ++

Commentaire de josh666 le 22/06/2006 16:07:30

Personne m'a d'idée.. ? :P

Commentaire de WhiteDwarf le 24/06/2006 18:39:21

Juste que je pense que c'est plus rapide de faire un changement de l'opacité en la définnissant en CSS plutôt qu'en créant deux images séparées

Commentaire de josh666 le 25/06/2006 23:58:49

Ouais , mais je coris aps que sa soit possible de le faire avec les coin rond... et je coris que c'Est compatible avec tous les navigateur non ?

Commentaire de TheSin le 26/06/2006 00:55:30

josh666, je crois que tu as oublié "pas" dans ta question ^^
(sinon je comprend pas la question lol)

Commentaire de WhiteDwarf le 26/06/2006 01:29:36

effectivement on ne peu pas faire les coins ronds, mais on peu faire les coins ronds en php, on enregistre l'image, et ensuite on change l'opacité en CSS, ca évite de faire créer deux images au code. et puis c'est plus rapide.. et je crois que la transparence des images est gérée par FF, IE, et netscape, donc les principaux, les autres je ne sais pas il faut essayer..

Commentaire de stef1589 le 26/06/2006 10:20:12

pas mal, je dirais meme bravo!
malgré que je ne men serve pas tout de suite, je pense que cette source me sera utile bientot

Commentaire de josh666 le 26/06/2006 17:55:20

Si tu sais faire le meme effet avec les styles, d'accord.. mais je ne vois pas comment arriver au meme résultat... en fait le rollOver avec transparence ne se fait pas sur toute l'image... c'est seulement une bordure d,Une épaisseur X qui apparait en transparence par dessus l'image d'origine... et pour ce qui est de la rapidité... d'accord la première fois c'Est plus long (génération des images, mais apr la suite il ne les recré aps si elle existe deja)

Donc sa reste a voir.. :)

Commentaire de WhiteDwarf le 27/06/2006 02:23:21

^^ oui je suis d'accord avec toi... mais c'est aussi vrai qu'aujourd'hui avec le JS et le CSS on peut faire beaucoup de choses, maintenant le php est certes plus puissant...

La seule chose que je trouve dommage avec la GD c'est que la qualité finale n'est pas forcément extra.. (j'ai pas vraiment testé la GD2 à fond)...

Sinon, bah oui j'aime bien ton code il est bien foutu et l'idée est bonne... continue comme ca ^^

A++

Commentaire de josh666 le 04/07/2006 14:48:22

Un petit ajout, a la fonction ... redimensionnement proportionnel de l'image si on mets 0 comme valeurs de hauteur.

Commentaire de idealyo le 19/08/2006 11:28:07

Merci pour ton code, je viens de le mettre en place sur mon site playactu.
Si vous voulez voir un exemple du code: http://playactu.com/image_1674.html

Merci encore ;) préviens si tu l'optimizes

Commentaire de RV2931 le 10/09/2006 14:25:43

debutant dit : superbe ta gallerie IDEALYO,

ça, ça donne envie de se taper le code pour comprendre et faire pareil ...

Commentaire de Mastronic le 11/12/2006 13:43:50

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.

Commentaire de gwadanumeric le 28/08/2007 12:08:28

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

Commentaire de cat69 le 29/01/2008 16:13:02

Merci beaucoup pour ce code facile à utiliser et super efficace.

Commentaire de louisantoine le 23/03/2011 12:14:14 8/10

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 ?

Commentaire de louisantoine le 28/03/2011 19:44:13

petit up !!! ce sujet est un peu vieux :s mais si quelqu'un peut m'aider, ce serait sympa !

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

comment redimensionner à la volée des images grâce à la lib GD ??? [TITRE MODERE CAR BOURRE DE FAUTES] [ par fredericmaill ] Bonjour, j'aimerais savoir comment redimention&#233; a la voll&#233; des images, donc j'aimerais savoir quelle fonction de la lib gd utiilis&#233; !! Problème de mise en cache de pages PHP [ par seabird ] Salut &#224; tous,Je voudrais mettre en cache pendant 1 journ&#233;e&nbsp; mes pages PHP pour acc&#233;l&#233;rer l'affichage. Je voudrais utiliser jp Menu cache par rapport au mysql ... [ par ben06300 ] Bonjour, Comment faire un systeme qui permet d'afficher un menu si et seulement si nous avons un "oui" dans une table. du style voiture ........... da pb d'inserertion d' images gd dans champ longblob [ par fredericmaill ] Bonjour @ tous !!! j'ai fais un syst&#232;me d'upload qui enregistre a la fois l'image dans un r&#233;pertoire de mon serveur et enregistre &#233;gal Image GD et php ! prob d'affichage [ par riecola ] Bonjour tout le monde. Voil&#224; mon probl&#232;me : mon utilisateur selectionne une image et un texte au choix dans un formulaire ensuite une page s Recolorisation d'une image avec la lib. GD [ par fanfouer ] Bonjour, Je cherche a faire un petit script &#224; l'aide de la librairie GD pour changer les couleurs d'une image que je lui passe &#224; l'aide d'un Générateur de cartes à jouer [ par ZuGbEn ] Bonjour ! Je suis en train de d&#233;velopper un g&#233;n&#233;rateur de cartes &#224; jouer, qui affiche par exemple un 7 de carreau quand on lui de A propos des images GD [ par ckhalilo ] j'ai un problème d'integration des image dans un formulaire, pour eviter l'envoie automatique dans mon formulaire bref mon problème est le suivant qu L'extension gd [ par Teclis01 ] Bonsoir!Voil&#224; c'est juste pour avoir une info sur l'extension gd...En fait j aimerais coller une image sur une autre de ce genre...-------------- Rafraichir une page [ par niko14 ] Hello everybody!!Voila le bin's!!En fait voila, j'ai une page ou on choisit un type de budget et on valide!Qd on a valid&#233; on arrive sur une page


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,404 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales