CRÉER UN REFLET D'UNE IMAGE
cs_Kimjoa
Messages postés
262
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014
-
8 juin 2008 à 15:38
annonyme - 11 janv. 2014 à 20:52
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.
https://codes-sources.commentcamarche.net/source/46935-creer-un-reflet-d-une-image
https://codes-sources.commentcamarche.net/source/46935-creer-un-reflet-d-une-image
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 !