Sujet Précédent Sujet Suivant

FONDU D'IMAGE

Utilisateur anonyme - 26 juil. 2006 à 21:48
atiladiffusion Messages postés 17 Date d'inscription mardi 5 septembre 2006 Statut Membre Dernière intervention 10 février 2008 - 18 oct. 2006 à 00:49

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/38793-fondu-d-image

atiladiffusion Messages postés 17 Date d'inscription mardi 5 septembre 2006 Statut Membre Dernière intervention 10 février 2008
18 oct. 2006 à 00:49

c'est trouvé
---------------


function visible(){
vitesseIE=1;
vitesseFF=60;
if(document.getElementById)	{
cur=document.getElementById("imageID");
if(document.all){
cur.filters.alpha.opacity+=parseFloat(3);
if (cur.filters.alpha.opacity==100)
return;
else 
setTimeout("visible()",vitesseIE);

}
else{
i=parseFloat(cur.style.getPropertyValue("-moz-opacity"));
i=parseFloat(cur.style.getPropertyValue("opacity"));
i+=parseFloat(0.1);
cur.style.setProperty("-moz-opacity", i, "");
cur.style.setProperty("opacity", i, "");
if (i>=1)
return;
else 
setTimeout("visible()",vitesseFF);
}
}
}
function invisible(index){
vitesseIE=1;
vitesseFF=60;

if(document.getElementById)	{
cur=document.getElementById("imageID");

if(document.all){
if (index=="1"){
cur.filters.alpha.opacity=100;
}
cur.filters.alpha.opacity-=parseFloat(3);
if (cur.filters.alpha.opacity==0){
document.getElementById("imageID").src=document.getElementById("imageID").src2;
visible();
return;
}
else {
setTimeout("invisible('0')",vitesseIE);
}

}
else{ 
if (index=="1"){
cur.style.setProperty("-moz-opacity", 1, "");
cur.style.setProperty("opacity", 1, "");
}
i=parseFloat(cur.style.getPropertyValue("-moz-opacity"));
i=parseFloat(cur.style.getPropertyValue("opacity"));
i-=parseFloat(0.1);
cur.style.setProperty("-moz-opacity", i, "");
cur.style.setProperty("opacity", i, "");
if (i<=0){
document.getElementById("imageID").src=document.getElementById("imageID").src2;
visible();
return;
}
else {
setTimeout("invisible('0')",vitesseFF);

}
}
}
}

atiladiffusion Messages postés 17 Date d'inscription mardi 5 septembre 2006 Statut Membre Dernière intervention 10 février 2008
18 oct. 2006 à 00:09

j'en suis là, mais ca marche toujours pas... sous mac=safari
-------------------------------------------

function visible(){
vitesseIE=1;
vitesseFF=60;
if(document.getElementById) {
cur=document.getElementById("imageID");
if(document.all){
cur.filters.alpha.opacity+=parseFloat(3);
if (cur.filters.alpha.opacity==100)
return;
else
setTimeout("visible()",vitesseIE);

}
else{
/*i=parseFloat(cur.style.getPropertyValue("-moz-opacity"));test pour safari*/
i=parseFloat(cur.style.getPropertyValue("-khtml-opacity"));
i+=parseFloat(0.1);
/*cur.style.setProperty("-moz-opacity", i, "");test pour safari*/
cur.style.setProperty("-khtml-opacity", i, "");
if (i>=1)
return;
else
setTimeout("visible()",vitesseFF);
}
}
}
function invisible(index){
vitesseIE=1;
vitesseFF=60;

if(document.getElementById) {
cur=document.getElementById("imageID");

if(document.all){
if (index=="1"){
cur.filters.alpha.opacity=100;
}
cur.filters.alpha.opacity-=parseFloat(3);
if (cur.filters.alpha.opacity==0){
document.getElementById("imageID").src=document.getElementById("imageID").src2;
visible();
return;
}
else {
setTimeout("invisible('0')",vitesseIE);
}

}
else{
if (index=="1"){
/*cur.style.setProperty("-moz-opacity", 1, "");test pour safari*/
cur.style.setProperty("-khtml-opacity", 1, "");
}
/*i=parseFloat(cur.style.getPropertyValue("-moz-opacity"));test pour safari*/
i=parseFloat(cur.style.getPropertyValue("-khtml-opacity"));
i-=parseFloat(0.1);
/*cur.style.setProperty("-moz-opacity", i, "");test pour safari*/
cur.style.setProperty("-khtml-opacity", i, "");
if (i<=0){
document.getElementById("imageID").src=document.getElementById("imageID").src2;
visible();
return;
}
else {
setTimeout("invisible('0')",vitesseFF);

}
}
}
}

function afficher_image(index,image){
for (i=1;i<5;i++)
document.getElementById(i).src=img_non_select.src;
document.getElementById(index).src=img_select.src;

document.getElementById("imageID").src2=image;
if (navigator.appName=="Opera"){
document.getElementById("imageID").src=image;
}else{
invisible('1');
}

}

function plus(){
for (i=1;i<5;i++){
if (document.getElementById(i).src==img_select.src){
i++;
if (i<=4)
afficher_image(i,eval ("i"+i+".src"));
return;
}
}
}

function moins(){
for (i=1;i<5;i++){
if (document.getElementById(i).src==img_select.src){
i--;
if (i>=1)
afficher_image(i,eval ("i"+i+".src"));
return;
}
}
}

atiladiffusion Messages postés 17 Date d'inscription mardi 5 septembre 2006 Statut Membre Dernière intervention 10 février 2008
17 oct. 2006 à 23:37

et sinon ya ca qui semble etre cohérent mais je ne sais pas le faire.
http://www.brainerror.net/scripts_js_blendtrans.php
De l'aide s'il vous plait

atiladiffusion Messages postés 17 Date d'inscription mardi 5 septembre 2006 Statut Membre Dernière intervention 10 février 2008
17 oct. 2006 à 23:20

il faut peut etre se diriger vers ca...

function SetOpacity(elmt, opacity){

if(elmt.filters){

elmt.filters.alpha.opacity=opacity

}else{

elmt.style.setProperty("-moz-opacity", opacity/100, "");

elmt.style.setProperty("-khtml-opacity", opacity/100, "");

elmt.style.setProperty("opacity", opacity/100, "");

}

atiladiffusion Messages postés 17 Date d'inscription mardi 5 septembre 2006 Statut Membre Dernière intervention 10 février 2008
17 oct. 2006 à 23:18

oui c 'est bien ca; le seul hic c'est que je fais un ptit site, et je dois présenter à mon client... qui est sous mac et pc! et moi je sais pas faire

proftnj Messages postés 54 Date d'inscription lundi 10 juillet 2006 Statut Membre Dernière intervention 11 septembre 2011
17 oct. 2006 à 23:16

Aha! -khtml-opacity: 0.5; existe pour Safari!
Je retire ce que j'ai écrit plus haut! Merci pour l'info.
Et Opera, alors? Et les autres navigateurs?
C'est énervant!
dylan_salmon pourrait peut-être compléter son script (moi, j'en suis incapable), Il y aurait compatibilité avec IE, FF et Safari: cela fonctionnerait pour plus de 95 % des internautes, non?

atiladiffusion Messages postés 17 Date d'inscription mardi 5 septembre 2006 Statut Membre Dernière intervention 10 février 2008
17 oct. 2006 à 23:13

genre: et si c'est safari --> -khtml-opacity: 0 !pour invisible
et dans invisible--> -khtml-opacity: 1;
ca ne marcherai pas?

atiladiffusion Messages postés 17 Date d'inscription mardi 5 septembre 2006 Statut Membre Dernière intervention 10 février 2008
17 oct. 2006 à 23:08

Pourtant j'ai trouvé ca:
-khtml-opacity: 0.5; /* Safari */
ici
http://forum.alsacreations.com/topic-5-2063-1-Opacit--compatible-multi-navigateur-.html

coment faire pour que si ce n'est pas le bon navig il fait apparaitre sans effet les images.
c'est pas possible à partir de ton script?

proftnj Messages postés 54 Date d'inscription lundi 10 juillet 2006 Statut Membre Dernière intervention 11 septembre 2011
17 oct. 2006 à 23:00

Les effets de filtres n'existent pas pour Safari.
Pour faire apparaître ou disparaître une image, il faut un script très différent que celui proposé ici. Créer une image transparente qui a les mêmes dimensions que l'image à faire apparaître, puis utiliser les fonctions "onmouseover" et "onmouseout" (ou "onclick"). Ça doit être faisable.

atiladiffusion Messages postés 17 Date d'inscription mardi 5 septembre 2006 Statut Membre Dernière intervention 10 février 2008
17 oct. 2006 à 22:49

Bonsoir, y a t'il un moyen de le faire marcher dans Safari?
Si ce n'est pas possible comment faire pour faire juste apparaitre les images sans effet au moins.

Merci d'avance

atiladiffusion Messages postés 17 Date d'inscription mardi 5 septembre 2006 Statut Membre Dernière intervention 10 février 2008
17 oct. 2006 à 00:25

oups j'ai trouvé grâce à ton script... de test. Merci beaucoup c'est vraiment génial

atiladiffusion Messages postés 17 Date d'inscription mardi 5 septembre 2006 Statut Membre Dernière intervention 10 février 2008
17 oct. 2006 à 00:08

Par contre moi j'aimerai bien voir le code de ta map, car oi j'ai besoin de mettre plussieurs images, et que lorsque l'on clik sur le numéro de l'image que l'on veut afficher, l'ancienne disparaisse et la nouvelle apparait..
Tu peux montrer le code?

jmecodol Messages postés 16 Date d'inscription jeudi 19 janvier 2006 Statut Membre Dernière intervention 28 août 2006
31 juil. 2006 à 21:55

@ prOftnJ :
merci pour la précision,
connaître la source d'une trace,
ca n'a pas de prix, même si le code marche .

la je dis,
avec ca, il y a de quoi faire de super éffets .

si c'était moi, je mettrai quand même cette anecdote en commentaire, le javascript est si puissant (et si incompatible c.f.: prOftnJ::méssage perso. ;)), que beaucoup de ceux qui laissent des codes mettent les précisions qui vont bien .

encore merci .

## un novice javascript .

proftnj Messages postés 54 Date d'inscription lundi 10 juillet 2006 Statut Membre Dernière intervention 11 septembre 2011
31 juil. 2006 à 21:20

Les effets de filtres ne font pas partie des recommandations du W3C.
"cur.filters.alpha.opacity" est une fonction spécifique de IE 6;
"-moz-opacity" est une fonction spécifique de mozilla et de son clone Firefox.
Probable que ce script ne donne rien avec Opéra, Safari,... et peut-être même Netscape.
Tant que ça ne plante rien, il n'y a pas de problème.

jmecodol Messages postés 16 Date d'inscription jeudi 19 janvier 2006 Statut Membre Dernière intervention 28 août 2006
31 juil. 2006 à 20:46

ah non,
en fait ca marche !!

c'est sous firefox,
dans "Outils" => "Console JavaScript" .
au moment du chargement ...
( ou avec F5 ),
au moment du chargement, il y a une erreur théorique ( vu que le code fait ce qu'on veut ).

c'est pour ca que c'est vraiment aller au bout des vérifications, comme la Console JavaScript vérifie au poil les normes, même si ca marche, il note les défaults javascript de manière hyper approfondie ;) .

et normalement ( lol ), si il n'y a pas d'érreur dans la console, c'est portable .
les érreurs peuvent venir par exemple d'une méthode qui va disparaitre, ou non W3C .

enfin voila .
mais ca marche au poil, d'ailleur je vais l'intégrer a un prochain projet hihihihihi ...

merci .

dylan_salmon Messages postés 8 Date d'inscription vendredi 10 février 2006 Statut Membre Dernière intervention 31 juillet 2006
31 juil. 2006 à 20:21

oui il faut que tu déclares dans la balise sur laquelle tu veux faire un fondu l'opacité par défaut de ton image sinon tu auras une erreur.

j'ai retesté, et y'a pas de problème, ça fonctionne sur FF et IE

(l'image apparait au début... cliquez sur l'image pour la faire disparaitre et repasser à l'endroit de l'image pour la faire réapparaitre)

Bonne soirée !!

jmecodol Messages postés 16 Date d'inscription jeudi 19 janvier 2006 Statut Membre Dernière intervention 28 août 2006
31 juil. 2006 à 17:09

je n'ai pas ie sous la main,
la source est sympa,
mais le chargement de la page sous Firefox ( pas les évènements javascript ) donnent une érreur javascript :
- "Propriété filter inconnue. Déclaration abandonnée" .

donc j'ai enlevé 'style="filter:alpha(opacity=100); -moz-opacity: 1;"', et la attention, ce sont des érreur en boucle infinie ! attention .

c'est un peu pointilliste de dire ca, mais bon, le code serai parfait si il n'y avait pas d'éreur javascript sous Firefox et ie .

parfois c'est impossible lol .
sinon c'est sympa d'avoir mis un eemple qui marche par copié collé sans télécharger une image . ;) .

proftnj Messages postés 54 Date d'inscription lundi 10 juillet 2006 Statut Membre Dernière intervention 11 septembre 2011
31 juil. 2006 à 14:59

Avec moi, ça ne fonctionne pas du tout, ni avec IE, ni avec FF. J'ai fermé le balise "script", mais l'image est visible dès le chargement de la page et ne disparaît pas si je clique dessus. J'ai effectué un copier-coller du code dans le bloc-note. Y a-t-il quelque chose à changer?

Utilisateur anonyme
26 juil. 2006 à 21:48

Bonjour,
N'oublie pas de fermer ta balise avec un </script> au lieu du <script> oubli de la barre ...
Sinon, c'est bien fait compatible ff et tout!
8/10

Discussions similaires

image avec FPDF

vectoriser un logo sous photoshop

[Photoshop] : Image noir et blanc en image blanc et noir ?

insérer une image dans une form

Conversion d'une image tiff -> jpeg sans perte

Votre réponse

Discussions similaires