cs_Kimjoa
Messages postés262Date d'inscriptionvendredi 6 mai 2005StatutMembreDernière intervention19 septembre 2014
-
8 juin 2008 à 15:38
annonyme -
11 janv. 2014 à 20:52
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
kingcobra
Messages postés316Date d'inscriptionvendredi 23 mai 2003StatutMembreDernière intervention19 septembre 2012 2 juin 2012 à 15:43
En voici une qui utilise canvas, et même pas besoin d'enregistré l'image, on utilise directement le tout dans la page web.
Bon c'est payant... Mais bon le prix est dérisoire.
J'adore ce site en passant :) !
jdmcreator
Messages postés647Date d'inscriptionsamedi 30 décembre 2000StatutMembreDernière intervention20 juillet 20127 22 mars 2009 à 01:58
Je voudrais préciser mon dernier post.
C'est le code HTML à Utiliser pour créer le reflet. Pour enregistrer l'image rien de moins qu'un screenshot (F13 ou Print Screen) et qu'un simple logiciel comme Paint
jdmcreator
Messages postés647Date d'inscriptionsamedi 30 décembre 2000StatutMembreDernière intervention20 juillet 20127 22 mars 2009 à 01:32
Très possible à enregistrer. Code à ajouter à la fin :
<textarea id=test></textarea>
Ça donne (pour l'image de départ) :
Bien sincèrement ;)
JDMCreator
macsou01
Messages postés45Date d'inscriptionmardi 20 mars 2007StatutMembreDernière intervention28 juillet 2011 4 janv. 2009 à 10:59
Ben non, comme dit plus haut, le reflet est une succession de divs... donc impossible à enregistrer (à ma connaissance).
spectroman
Messages postés16Date d'inscriptionlundi 3 février 2003StatutMembreDernière intervention25 mars 2013 4 janv. 2009 à 00:08
Dommage que l'on ne puisse apparemment pas enregistrer l image du reflet :[
macsou01
Messages postés45Date d'inscriptionmardi 20 mars 2007StatutMembreDernière intervention28 juillet 2011 16 juin 2008 à 17:22
Oui ma méthode en javascript n'est pas très optimisé par rapport à d'autres méthodes comme php, canvas, etc mais bon :p.
Mais elle a un petit avantage, c'est que si on utilise un gif animé, il l'est aussi dans le reflet.
LeFauve42
Messages postés239Date d'inscriptionvendredi 20 octobre 2006StatutMembreDernière intervention20 avril 2009 16 juin 2008 à 14:11
Il y a un truc qui permet d'avoir sur le meme PC tous les IE de la version 5.5 a la 8 beta.
Je n'ai pas le nom en tete, mais tu dois pouvoir googler ca.
Peu de webmasters sont pres a se passer d'un visiteur sur 5, meme pour un chouette reflet ;o)
Pour une image, ce n'est pas tres important, mais pour une galerie, par exemple avec 24 thumbnails sur ta page, ca fait deja 750 divs, ca commence a faire beaucoup.
Enfin dans ce cas, il doit etre possible de generer le reflet dans le thumbnail directement sur le serveur.
macsou01
Messages postés45Date d'inscriptionmardi 20 mars 2007StatutMembreDernière intervention28 juillet 2011 16 juin 2008 à 13:31
Je ne peux pas tester ie6, j'ai Vista, à moins que tu connaisses une solution (pas un simple site de capture d'écran ça ne permet pas de tester le javascript). Mais bon ie6... ça devient vraiment vraiment dépassé quand même. ;)
Mais c'est vrai que ça surcharge un peu le dom mais bon pas tant que ça, par exemple pour une image de hauteur 100px, avec un reflet de 30% de hauteur, ça ne crée 'que' 30 divs.
LeFauve42
Messages postés239Date d'inscriptionvendredi 20 octobre 2006StatutMembreDernière intervention20 avril 2009 16 juin 2008 à 11:00
C'est sympa, mais ca fait des trucs vraiment bizares sur IE6 (et differents chaque fois que je clique sur "Afficher", meme sans changer les parametres).
Il faudrait au moins que ton script detecte IE6 et ne fasse rien si tu ne veux pas te prendre la tete a le supporter.
Enfin, ca peut attendre apres ton Bac ;o)
Sinon, c'est pas mal, meme ca doit bien surcharger le dom si tu l'utilises sur pleins d'images de la meme page.
macsou01
Messages postés45Date d'inscriptionmardi 20 mars 2007StatutMembreDernière intervention28 juillet 2011 11 juin 2008 à 14:57
Finalement j'ai utilisé un conteneur unique avec comme id 'lines' qui contient toutes les lignes, il suffit donc de le supprimer pour supprimer toutes les lignes.
macsou01
Messages postés45Date d'inscriptionmardi 20 mars 2007StatutMembreDernière intervention28 juillet 2011 11 juin 2008 à 12:59
Ouais j'y ai pensé mais j'ai pas eu le temps de m'en occuper ( je passe le bac :p ).
nicomilville
Messages postés3472Date d'inscriptionlundi 16 juillet 2007StatutMembreDernière intervention28 février 201436 11 juin 2008 à 07:04
salut,
pas mal, a la place de l'id pourquoi ne pas mettre une class ?
Car une class peut être la même pour des éléments de la même page ...
++
macsou01
Messages postés45Date d'inscriptionmardi 20 mars 2007StatutMembreDernière intervention28 juillet 2011 9 juin 2008 à 20:30
Ok merci pour ces explications !
ralecul
Messages postés111Date d'inscriptiondimanche 23 mars 2003StatutMembreDernière intervention 1 août 2008 9 juin 2008 à 19:22
ralecul
Messages postés111Date d'inscriptiondimanche 23 mars 2003StatutMembreDernière intervention 1 août 2008 9 juin 2008 à 19:17
Pour le i--, voilà la solution :
<script type="text/javascript">
<![CDATA[
var i=2;
i--;
]]>
</script>
Sinon pour ce qui est des multiple Id, je ne suis pas d'accord du tout !
Le validateur W3C ne peut pas voir ton erreur car comme tu l'as dit elle est ajoutée dynamiquement...
Ce n'est pas parce qu'il ne peut pas la voir qu'elle n'y ait pas ;-)
L'autre version (http://www.netzgesta.de/reflex/) utilise VML sous IE et canvas pour les autres navigateurs.
De plus il est possible de simuler canvas sous IE à l'aide de excanvas (ExplorerCanvas).
Mais j'avoue que ça fait un peu usine à gaz quand même...
@+
macsou01
Messages postés45Date d'inscriptionmardi 20 mars 2007StatutMembreDernière intervention28 juillet 2011 9 juin 2008 à 17:32
Salut, pour ce qui est du canvas je ne trouve pas ça une bonne idée, car ce n'est pas supporté par beaucoup de navigateurs... Sinon les id multiples, ça ne pose pas vraiment de problèmes quand ceux ci sont crées dynamiquement (donc pas dans le code source d'origine). En tous cas ça ne génère pas d'erreurs...
Pour ce qui est de la boucle, je n'ai pas mis i-- (mais i -= 1) car c'était interprété comme une début de commentaire par le validateur du w3c... Mais c'est vrai que je n'ai pas déclaré la variable i !.
Voilà voilà ! :)
ralecul
Messages postés111Date d'inscriptiondimanche 23 mars 2003StatutMembreDernière intervention 1 août 2008 8 juin 2008 à 23:09
Salut,
L'idée est bonne, le reflet ça fait très web 2.0 (c'est même devenu un cliché...)
Je te conseille de jeter un coup d'oeil à cette version : http://www.netzgesta.de/reflex/. Elle utilise canvas qui a mon avis est plus approprié pour faire ce genre de chose.
Une version Orientée-Object avec passage d'options à la prototype serait sympa aussi...
Quelques remarques :
for (i = max; i > 0; i -= 1) -> for (var i = max; i > 0; i--)
if (navigator.appName == 'Microsoft Internet Explorer') { -> beurk !
if (line.style.opacity != undefined)
line.style.opacity = i / max * intensity;
else if (line.style.filter != undefined)
line.style.filter = 'alpha(opacity=' + i / max * 100 * intensity + ')';
line.id = 'line'; -> alors comme ça elles ont toutes le même id ?
Un id doit être unique, il faut trouver une autre solution !
macsou01
Messages postés45Date d'inscriptionmardi 20 mars 2007StatutMembreDernière intervention28 juillet 2011 8 juin 2008 à 16:33
Ok, merci du conseil. Faudra que je creuse ton idée, je n'ai jamais utilisé de gestionnaires d'évènements.
cs_Kimjoa
Messages postés262Date d'inscriptionvendredi 6 mai 2005StatutMembreDernière intervention19 septembre 2014 8 juin 2008 à 15:38
salut , sympa tas source bien codé et utile, seule b-mole, évite les insertion des évenement dans les balise HTML , utilise des gestionnaires d'évement c'est mieux et tu peux mettre plusieur fonction pour un meme evenement et pour un meme objet HTML. Les fonction d evenement sont addEventListener pour FF et attachEvent pour IE.
Te met 8/10 bye !
11 janv. 2014 à 20:52
2 juin 2012 à 16:10
2 juin 2012 à 15:43
Bon c'est payant... Mais bon le prix est dérisoire.
J'adore ce site en passant :) !
22 mars 2009 à 01:58
C'est le code HTML à Utiliser pour créer le reflet. Pour enregistrer l'image rien de moins qu'un screenshot (F13 ou Print Screen) et qu'un simple logiciel comme Paint
22 mars 2009 à 01:32
<textarea id=test></textarea>
Ça donne (pour l'image de départ) :
Bien sincèrement ;)
JDMCreator
4 janv. 2009 à 10:59
4 janv. 2009 à 00:08
16 juin 2008 à 17:22
Mais elle a un petit avantage, c'est que si on utilise un gif animé, il l'est aussi dans le reflet.
16 juin 2008 à 14:11
Je n'ai pas le nom en tete, mais tu dois pouvoir googler ca.
IE6 est qund meme encore assez repandu. Si tu googles pour trouver les statistiques de differents sites, (ex au hasard: http://www.w3schools.com/browsers/browsers_stats.asp ou http://danzcontrib2.free.fr/statistiques.php), tu peux voir des chiffres entre 20 et 30%.
Peu de webmasters sont pres a se passer d'un visiteur sur 5, meme pour un chouette reflet ;o)
Pour une image, ce n'est pas tres important, mais pour une galerie, par exemple avec 24 thumbnails sur ta page, ca fait deja 750 divs, ca commence a faire beaucoup.
Enfin dans ce cas, il doit etre possible de generer le reflet dans le thumbnail directement sur le serveur.
16 juin 2008 à 13:31
Mais c'est vrai que ça surcharge un peu le dom mais bon pas tant que ça, par exemple pour une image de hauteur 100px, avec un reflet de 30% de hauteur, ça ne crée 'que' 30 divs.
16 juin 2008 à 11:00
Il faudrait au moins que ton script detecte IE6 et ne fasse rien si tu ne veux pas te prendre la tete a le supporter.
Enfin, ca peut attendre apres ton Bac ;o)
Sinon, c'est pas mal, meme ca doit bien surcharger le dom si tu l'utilises sur pleins d'images de la meme page.
11 juin 2008 à 14:57
11 juin 2008 à 12:59
11 juin 2008 à 07:04
pas mal, a la place de l'id pourquoi ne pas mettre une class ?
Car une class peut être la même pour des éléments de la même page ...
++
9 juin 2008 à 20:30
9 juin 2008 à 19:22
<script type="text/javascript">
//<![CDATA[
var i=2;
i--;
//]]>
</script>
9 juin 2008 à 19:17
<script type="text/javascript">
<![CDATA[
var i=2;
i--;
]]>
</script>
Sinon pour ce qui est des multiple Id, je ne suis pas d'accord du tout !
Le validateur W3C ne peut pas voir ton erreur car comme tu l'as dit elle est ajoutée dynamiquement...
Ce n'est pas parce qu'il ne peut pas la voir qu'elle n'y ait pas ;-)
L'autre version (http://www.netzgesta.de/reflex/) utilise VML sous IE et canvas pour les autres navigateurs.
De plus il est possible de simuler canvas sous IE à l'aide de excanvas (ExplorerCanvas).
Mais j'avoue que ça fait un peu usine à gaz quand même...
@+
9 juin 2008 à 17:32
Pour ce qui est de la boucle, je n'ai pas mis i-- (mais i -= 1) car c'était interprété comme une début de commentaire par le validateur du w3c... Mais c'est vrai que je n'ai pas déclaré la variable i !.
Voilà voilà ! :)
8 juin 2008 à 23:09
L'idée est bonne, le reflet ça fait très web 2.0 (c'est même devenu un cliché...)
Je te conseille de jeter un coup d'oeil à cette version : http://www.netzgesta.de/reflex/.
Elle utilise canvas qui a mon avis est plus approprié pour faire ce genre de chose.
Une version Orientée-Object avec passage d'options à la prototype serait sympa aussi...
Quelques remarques :
for (i = max; i > 0; i -= 1) -> for (var i = max; i > 0; i--)
if (navigator.appName == 'Microsoft Internet Explorer') { -> beurk !
if (line.style.opacity != undefined)
line.style.opacity = i / max * intensity;
else if (line.style.filter != undefined)
line.style.filter = 'alpha(opacity=' + i / max * 100 * intensity + ')';
line.id = 'line'; -> alors comme ça elles ont toutes le même id ?
Un id doit être unique, il faut trouver une autre solution !
8 juin 2008 à 16:33
8 juin 2008 à 15:38
Te met 8/10 bye !