CRÉATION DE THUMBNAIL + COIN ROND + EFFET ROLLOVER
josh666
Messages postés81Date d'inscriptionmercredi 7 juillet 2004StatutMembreDernière intervention 1 octobre 2007
-
16 juin 2006 à 23:03
cs_louisantoine
Messages postés2Date d'inscriptionlundi 19 mai 2008StatutMembreDernière intervention28 mars 2011
-
28 mars 2011 à 19:44
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
cs_louisantoine
Messages postés2Date d'inscriptionlundi 19 mai 2008StatutMembreDernière intervention28 mars 2011 28 mars 2011 à 19:44
petit up !!! ce sujet est un peu vieux :s mais si quelqu'un peut m'aider, ce serait sympa !
cs_louisantoine
Messages postés2Date d'inscriptionlundi 19 mai 2008StatutMembreDernière intervention28 mars 2011 23 mars 2011 à 12:14
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 ?
cat69
Messages postés1Date d'inscriptiondimanche 17 septembre 2006StatutMembreDernière intervention29 janvier 2008 29 janv. 2008 à 16:13
Merci beaucoup pour ce code facile à utiliser et super efficace.
gwadanumeric
Messages postés1Date d'inscriptionjeudi 9 septembre 2004StatutMembreDernière intervention28 août 2007 28 août 2007 à 12:08
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
Mastronic
Messages postés94Date d'inscriptionlundi 8 août 2005StatutMembreDernière intervention13 juin 2012 11 déc. 2006 à 13:43
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.
RV2931
Messages postés185Date d'inscriptionsamedi 21 mai 2005StatutMembreDernière intervention16 juillet 2016 10 sept. 2006 à 14:25
debutant dit : superbe ta gallerie IDEALYO,
ça, ça donne envie de se taper le code pour comprendre et faire pareil ...
idealyo
Messages postés44Date d'inscriptionmercredi 16 juillet 2003StatutMembreDernière intervention19 août 2006 19 août 2006 à 11:28
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
josh666
Messages postés81Date d'inscriptionmercredi 7 juillet 2004StatutMembreDernière intervention 1 octobre 20071 4 juil. 2006 à 14:48
Un petit ajout, a la fonction ... redimensionnement proportionnel de l'image si on mets 0 comme valeurs de hauteur.
WhiteDwarf
Messages postés510Date d'inscriptionsamedi 29 décembre 2001StatutMembreDernière intervention23 mai 2008 27 juin 2006 à 02:23
^^ 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++
josh666
Messages postés81Date d'inscriptionmercredi 7 juillet 2004StatutMembreDernière intervention 1 octobre 20071 26 juin 2006 à 17:55
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.. :)
stef1589
Messages postés44Date d'inscriptiondimanche 19 mars 2006StatutMembreDernière intervention27 mars 2008 26 juin 2006 à 10:20
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
WhiteDwarf
Messages postés510Date d'inscriptionsamedi 29 décembre 2001StatutMembreDernière intervention23 mai 2008 26 juin 2006 à 01:29
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..
TheSin
Messages postés331Date d'inscriptionmardi 12 novembre 2002StatutMembreDernière intervention10 février 2009 26 juin 2006 à 00:55
josh666, je crois que tu as oublié "pas" dans ta question ^^
(sinon je comprend pas la question lol)
josh666
Messages postés81Date d'inscriptionmercredi 7 juillet 2004StatutMembreDernière intervention 1 octobre 20071 25 juin 2006 à 23:58
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 ?
WhiteDwarf
Messages postés510Date d'inscriptionsamedi 29 décembre 2001StatutMembreDernière intervention23 mai 2008 24 juin 2006 à 18:39
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
josh666
Messages postés81Date d'inscriptionmercredi 7 juillet 2004StatutMembreDernière intervention 1 octobre 20071 22 juin 2006 à 16:07
Personne m'a d'idée.. ? :P
josh666
Messages postés81Date d'inscriptionmercredi 7 juillet 2004StatutMembreDernière intervention 1 octobre 20071 20 juin 2006 à 04:53
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 ++
WhiteDwarf
Messages postés510Date d'inscriptionsamedi 29 décembre 2001StatutMembreDernière intervention23 mai 2008 19 juin 2006 à 22:28
"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 ?
josh666
Messages postés81Date d'inscriptionmercredi 7 juillet 2004StatutMembreDernière intervention 1 octobre 20071 19 juin 2006 à 15:04
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.. :)
WhiteDwarf
Messages postés510Date d'inscriptionsamedi 29 décembre 2001StatutMembreDernière intervention23 mai 2008 19 juin 2006 à 06:36
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 ;)
@++
TheSin
Messages postés331Date d'inscriptionmardi 12 novembre 2002StatutMembreDernière intervention10 février 2009 17 juin 2006 à 12:44
Ca a l'air sympa, dommage que j'ai pas le temps de le tester et que je n'en ai pas besoin ;)
josh666
Messages postés81Date d'inscriptionmercredi 7 juillet 2004StatutMembreDernière intervention 1 octobre 20071 17 juin 2006 à 00:38
Corrections effectuées !
josh666
Messages postés81Date d'inscriptionmercredi 7 juillet 2004StatutMembreDernière intervention 1 octobre 20071 16 juin 2006 à 23:57
"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
MrdJack
Messages postés146Date d'inscriptionjeudi 22 avril 2004StatutMembreDernière intervention 8 mars 20082 16 juin 2006 à 23:46
"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
@+
josh666
Messages postés81Date d'inscriptionmercredi 7 juillet 2004StatutMembreDernière intervention 1 octobre 20071 16 juin 2006 à 23:03
28 mars 2011 à 19:44
23 mars 2011 à 12:14
29 janv. 2008 à 16:13
28 août 2007 à 12:08
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
11 déc. 2006 à 13:43
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.
10 sept. 2006 à 14:25
ça, ça donne envie de se taper le code pour comprendre et faire pareil ...
19 août 2006 à 11:28
Si vous voulez voir un exemple du code: http://playactu.com/image_1674.html
Merci encore ;) préviens si tu l'optimizes
4 juil. 2006 à 14:48
27 juin 2006 à 02:23
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++
26 juin 2006 à 17:55
Donc sa reste a voir.. :)
26 juin 2006 à 10:20
malgré que je ne men serve pas tout de suite, je pense que cette source me sera utile bientot
26 juin 2006 à 01:29
26 juin 2006 à 00:55
(sinon je comprend pas la question lol)
25 juin 2006 à 23:58
24 juin 2006 à 18:39
22 juin 2006 à 16:07
20 juin 2006 à 04:53
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 ++
19 juin 2006 à 22:28
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 ?
19 juin 2006 à 15:04
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.. :)
19 juin 2006 à 06:36
@++
17 juin 2006 à 12:44
17 juin 2006 à 00:38
16 juin 2006 à 23:57
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
16 juin 2006 à 23:46
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
@+
16 juin 2006 à 23:03