[JS] Fondu entre deux images

loiseauthierry@free.fr (Thierry Loiseau) writes:

Vos conseils ?

Je viens d'essayer les deux, et franchement, je trouve cela
plus clair sans fondu-enchaîné. Ça fait trop mal aux yeux.

PS: Fu2 f.c.i.w.auteurs.

--drkm

Thierry Loiseau wrote:

Salut,

Sur mon site <http://ecm.terrasson.free.fr/projet2004.html>
j'ai fait une application JS pour visiter ma ville (entre autre).

J'ai prévu par ailleurs de changer de point de vue avec une espèce de
fondu-enchaîné qui marche bien avec IE6 (wintel 98SE), mais je ne
parviens pas à trouver le bon code pour Firefox :-((((

doukilétidonc le fondu-enchaîné ?

Re-testé parcours (ADSL + nouveau Mac) :
- IE les vues (prises au z'azzard sur la carte) s'affichent
avec une espèce de saccade
- FF : la vue affichée -> clic sur carte pour en afficher une autre
-> brève apparition d'une vue d'une ancienne balade
-> affichage de celle choisie (enfin ... on espère que)

Vos conseils ?

1) tu me dis ce que j'étais censé voir :)
2) il eût mieux valu continuer à bosser sur le zoom de la carte
3) voir ce qui cloche avec IE Mac qui met la première vue (cachée)
par dessus le rideau


--
Stephane Moriaux et son [moins] vieux Mac

Sur mon site <http://ecm.terrasson.free.fr/projet2004.html>
j'ai fait une application JS pour visiter ma ville (entre autre).

J'ai prévu par ailleurs de changer de point de vue avec une espèce de
fondu-enchaîné qui marche bien avec IE6 (wintel 98SE), mais je ne
parviens pas à trouver le bon code pour Firefox :-((((

Tu peux obtenir le même effet avec Firefox en utilisant la propriété CSS
opacity.

Personnellement j'utilise cette fonction (que je n'ai pas eu le temps
encore d'optimiser) avec un élément DIV contenant l'image déclaré ainsi :

<div style="opacity: 0;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)">

la fonction :

var theTimeout=-1, animEnCours;

function opacifier(o){
if(!o.filters && o.style && o.style.opacity){
if(theTimeout==-1)animEnCours=o;
if(animEnCours==o){
var oso=+o.style.opacity;
if(oso<1.01) {
if(oso<0.34)oso+=0.01; else oso+=0.03;
o.style.opacity=oso;}
else{theTimeout=-1; return}
}
theTimeout=setTimeout(function(){opacifier(o)},25);
}
if(o.filters && o.filters.item("DXImageTransform.Microsoft.Alpha")){
if(theTimeout==-1)animEnCours=o;
if(animEnCours==o){
var oso=+o.filters.item("DXImageTransform.Microsoft.Alpha").Opacity;
if(oso<100) {
if(oso<34)oso+=1; else oso+=3;
o.filters.item("DXImageTransform.Microsoft.Alpha").Opacity=oso;}
else{theTimeout=-1; return}
}
theTimeout=setTimeout(function(){opacifier(o)},25);
}
}

Regarde si tu peux t'en inspirer ! Le rendu est à peu de chose près
le même dans IE6 et Ff.

--
Y.D.

YD wrote:

Personnellement j'utilise cette fonction (que je n'ai pas eu le temps
encore d'optimiser) avec un élément DIV contenant l'image déclaré ainsi :

super ! où est le mode d'emploi ?
(je n'ai même pas mon image affichée)

comment, quand et où j'active la fonction ?
une démo en ligne ?

Bon ...
j'y suis arrivé en faisant çà :

<img src="truc.jpg" style="opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)"
onload="opacifier(this);">

çà fonctionne très bien(*) sur mon FF et mon Camino
Safary n'affiche même pas l'image
iCab affiche l'image sans fondu

Par contre : touj pas de fondu sur mon IE

(*) Bravo ! c'est un effet assez bonnard :-)

J'attends fébrilement la suite :
-> démo (en ligne) pour changement d'images
(de préf, les 2 images sont superposées)
-> correctifs pour autres navigateurs ?



--
Stephane Moriaux et son [moins] vieux Mac

Salut Stephane !

ASM <stephanemoriaux.NoAdmin@wanadoo.fr> wrote:

1) tu me dis ce que j'étais censé voir :)
2) il eût mieux valu continuer à bosser sur le zoom de la carte

En fait, je bricole juste un peu sur le projet, la commission européenne
ayant décidé en février dernier d'abandonner le programme "Netdays
Europe" :-((

Pour le "fondu", il n'apparaît que sur windows / IE

:'(

3) voir ce qui cloche avec IE Mac qui met la première vue (cachée)
par dessus le rideau

Ca je n'ai jamais réussi (mais je n'ai pas trop cherché) à voir pourquoi
?!

@++,
Thierry
--
<http://www.trombinewtscope.free.fr/> <http://astrophoto.free.fr/>
<http://ecm.terrasson.free.fr/> <http://gerry.garstein.free.fr/>

Thierry Loiseau <loiseauthierry@free.fr> wrote:

2) il eût mieux valu continuer à bosser sur le zoom de la carte

Il n'y a plus de carte : je l'ai changé par une vue aérienne (IGN) de la
ville, mais avec son 1m2, la photo n'est pas très simple à scanner.

:-((
--
<http://www.trombinewtscope.free.fr/> <http://astrophoto.free.fr/>
<http://ecm.terrasson.free.fr/> <http://gerry.garstein.free.fr/>

Thierry Loiseau <loiseauthierry@free.fr> wrote:

2) il eût mieux valu continuer à bosser sur le zoom de la carte

Il n'y a plus de carte : je l'ai changée par une vue aérienne (IGN) de
la ville, mais avec son 1m2, la photo n'est pas très simple à scanner.

:-((
--
<http://www.trombinewtscope.free.fr/> <http://astrophoto.free.fr/>
<http://ecm.terrasson.free.fr/> <http://gerry.garstein.free.fr/>

YD <yd-news@free.fr> wrote:

Personnellement j'utilise cette fonction (que je n'ai pas eu le temps
encore d'optimiser) avec un élément DIV contenant l'image déclaré ainsi :

<div style="opacity: 0;

Pour ne tenir compte que de FF, un style.opacity peut-il être suffisant?

@++ YD et grand merci pour ton aide !
Thierry
--
<http://www.trombinewtscope.free.fr/> <http://astrophoto.free.fr/>
<http://ecm.terrasson.free.fr/> <http://gerry.garstein.free.fr/>

Pour ne tenir compte que de FF, un style.opacity peut-il être suffisant?

Oui, opacity varie de 0 (pas d'image visible) jusqu'à 1 (opacité totale).

--
Y.D.

YD <yd-news@free.fr> wrote:

Pour ne tenir compte que de FF, un style.opacity peut-il être suffisant?

Oui, opacity varie de 0 (pas d'image visible) jusqu'à 1 (opacité totale).

Ok! Je vais donc tester ça ! Euh, dernière question pour la route, ne
peut-on pas appliquer ça directement sur une image plutôt que de passer
par un <div> ?

<img src="toto.png" style="opacity:1" id="bidule">

document.getElementById('bidule').style.opacity=0.5;

@++,
Thierry
--
<http://www.trombinewtscope.free.fr/> <http://astrophoto.free.fr/>
<http://ecm.terrasson.free.fr/> <http://gerry.garstein.free.fr/>