Fade in / out sur une page chargée dans un Div ..

Bonjour,

Je me remet un poil sur les langages web et j'essaie d'intégrer un peu de javascript dans mes pages au lieu de bon vieux ?affiche=tarifs :D

Du coup je me confronte à un petit problème

A partir de plusieurs liens différents présents dans un "div gauche" du type : <a href="#" onclick="envoieRequete('page1.php','tarifs_right')" >D&eacute;tail</a>

je veux afficher des pages différentes dans le div "tarifs_right" avec un effet d'opacité sur els différents blocs de page1.php

J'ai tourner sur pas mal de lib sans succes, soit j'arrive à avoir les effets en utilisant pas l'include de page et en mettant tout les div dans ma page principale, mais à ce moment la je n'arrive pas à afficher chaque div indépendamment l'un de l'autre, tout est sur la page et au mieux si j'utilise un style="display:none" au moment du display on il affiche une fois l'image avant de relancer les effets d'opacité

Code:

---

1 2 3 4 5 6 7 8 9 10 11

function chargement(div_page) { new Effect.multiple($(div_page).select('h3'), Effect.Opacity, {from: 0.0, to: 0.9, duration: 0.5, speed: 0.0 }); new Effect.multiple($(div_page).select('li'), Effect.Opacity, {from: 0.0, to: 0.9, duration: 1.5, speed: 0.0 }); new Effect.multiple($(div_page).select('img'), Effect.Opacity, {from: 0.0, to: 0.9, duration: 1.0, speed: 0.0 }); new Effect.multiple($(div_page).select('div'), Effect.Opacity, {from: 0.0, to: 0.9, duration: 1.5, speed: 0.0 }); new Effect.multiple($(div_page).select('a'),

---

soit je garde le principe de l'include de page dynamique avec la fonction :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

function envoieRequete(url,id) { var xhr_object = null; var position = id; if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest(); else if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); // On ouvre la requete vers la page désirée xhr_object.open("GET", url, true); xhr_object.onreadystatechange = function(){ if ( xhr_object.readyState == 4 ) { // j'affiche dans la DIV spécifiées le contenu retourné par le fichier document.getElementById(position).innerHTML = xhr_object.responseText; } } // dans le cas du get xhr_object.send(null); }

---

mais à ce moment la j'ai tout essayer avec des codes type :

Citation:

---

<script type="text/javascript">
window.onload = function chargement(div_page)
{
new Effect.multiple($(div_page).select('h3'),
Effect.Opacity, {from: 0.0, to: 0.9, duration: 0.5, speed: 0.0 });
new Effect.multiple($(div_page).select('li'),
Effect.Opacity, {from: 0.0, to: 0.9, duration: 1.5, speed: 0.0 });
new Effect.multiple($(div_page).select('img'),
Effect.Opacity, {from: 0.0, to: 0.9, duration: 1.0, speed: 0.0 });
new Effect.multiple($(div_page).select('div'),
Effect.Opacity, {from: 0.0, to: 0.9, duration: 1.5, speed: 0.0 });
new Effect.multiple($(div_page).select('a'),
Effect.Opacity, {from: 0.0, to: 0.9, duration: 2.5, speed: 0.0 });
}
</script>

---

mais je n'arrive pas a appliquer les effets d'opacité de page1.php avec un code :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

<script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="/js/lightbox.js"></script>   <script type="text/javascript"> function chargement(div_page) { new Effect.multiple($(div_page).select('h3'), Effect.Opacity, {from: 0.0, to: 1.0, duration: 0.5, speed: 0.0 }); new Effect.multiple($(div_page).select('li'), Effect.Opacity, {from: 0.0, to: 1.0, duration: 1.5, speed: 0.0 }); new Effect.multiple($(div_page).select('img'), Effect.Opacity, {from: 0.0, to: 1.0, duration: 1.0, speed: 0.0 }); new Effect.multiple($(div_page).select('div'), Effect.Opacity, {from: 0.0, to: 1.0, duration: 1.5, speed: 0.0 }); new Effect.multiple($(div_page).select('a'), Effect.Opacity, {from: 0.0, to: 1.0, duration: 2.5, speed: 0.0 }); } </script>   </head>   <body onload="chargement('tarifs_port')">   <div id="tarifs_port"> <div id="TextHolder"> <h3>Titre</h3> <ul id="groupe"> <li>Premier</li> <li>Deuxième</li> <li>Troisième</li> <li>Quatrième</li> </ul> </div> <div id="TextHolder"> <a href=?menu=contact>Me Contacter</a> </div> <div id="bandeau_droit"> <div id="imagesHolder"> <a href="/images/exemport-1.jpg" rel="lightbox[roadtrip]"><img src="/images/exemport-1.jpg" width="100" BORDER="0"/></a> </div> <div id="imagesHolder"> <a href="/images/exemport-3.jpg" rel="lightbox[roadtrip]"><img src="/images/exemport-3.jpg" width="100" BORDER="0"/></a> </div> <div id="imagesHolder"> <a href="/images/exemport-2.jpg" rel="lightbox[roadtrip]"><img src="/images/exemport-2.jpg" width="100" BORDER="0"/></a> </div> </div> </div> </body>

---

Alors que si j'appelle directement page1.php les effets sont bien présents même si il me semble que la première fois que j'appelle la page, l'image "clignote" en apparaissant un poil avant l'effet

D'avance merci bcp :) a raison d'une journée par div sinon je vais y passer l'été :D