[Javascript] comment remplacer une image ouverte???

comment remplacer une image ouverte??? [Javascript] - HTML/CSS - Programmation

Marsh Posté le 20-12-2006 à 13:02:20    

Salut!
Quand j'execute mon script et je clic sur un lien, mon graphique s'affiche, mais je veux afficher un autre graphe quand je clic sur un autre lien. Le probleme c'est que je ne veux pas le nouveau graphique à coté de l'ancien mais à la place de celui-ci. Donc quand je clic sur un lien le nouveau graphe doit remplacer l'autre.
Merci. J'espere avoir été clair.

Code :
  1. // JavaScript Document
  2. function graph_france(chart)
  3. {
  4. var graph = document.getElementById(chart);
  6. if(chart == "cac_graph" && graph.innerHTML == "" )
  7.  {graph.innerHTML = "<div><img  src='http://fr.ichart.yahoo.com/t?s=^FCHI' width='200' height='120' style='border-color:#368EBE; border:1px solid;'alt='Chart CAC 40' /></div>";}
  8.  else if(chart == "cacnext20_graph" && graph.innerHTML == "" )
  9.    {graph.innerHTML = "<div><img  src='http://fr.ichart.yahoo.com/t?s=^FCHI' width='200' height='120' style='border-color:#368EBE; border:1px solid;' alt='Chart CACNEXT 20'/></div>"; }
  10.   else if(chart == "itcac_graph" && graph.innerHTML == "" )
  11.     {graph.innerHTML = "<div><img  src='http://fr.ichart.yahoo.com/t?s=^FCHI' width='200' height='120' style='border-color:#368EBE; border:1px solid;' alt='Chart ITCAC 50'/></div>";} 
  12.    else if(chart == "sbf80_graph" && graph.innerHTML == "" )
  13.      {graph.innerHTML = "<div><img  src='http://fr.ichart.yahoo.com/t?s=^FCHI' width='200' height='120' style='border-color:#368EBE; border:1px solid;' alt='Chart SBF 80'/></div>";}
  14.     else if(chart == "sbf120_graph" && graph.innerHTML == "" )
  15.       {graph.innerHTML = "<div><img  src='http://fr.ichart.yahoo.com/t?s=^FCHI' width='200' height='120' style='border-color:#368EBE; border:1px solid;'alt='Chart SBF 120' /></div>";}
  16.      else if(chart == "sbf250_graph" && graph.innerHTML == "" )
  17.        {graph.innerHTML = "<div><img  src='http://fr.ichart.yahoo.com/t?s=^FCHI' width='200' height='120' style='border-color:#368EBE; border:1px solid;' alt='Chart SBF 250'/></div>";}
  18.       else if(chart == "mid_graph" && graph.innerHTML == "" )
  19.         {graph.innerHTML = "<div><img  src='http://fr.ichart.yahoo.com/t?s=^FCHI' width='200' height='120' style='border-color:#368EBE; border:1px solid;' alt='Chart MIDCAPS'/></div>";}
  20.        else if(chart == "small_graph" && graph.innerHTML == "" )
  21.     {graph.innerHTML = "<div><img  src='http://fr.ichart.yahoo.com/t?s=^FCHI' width='200' height='120' style='border-color:#368EBE; border:1px solid;' alt='Chart SMALLCAPS'/></div>";}
  22.         else if(chart == "alternext_graph" && graph.innerHTML == "" )
  23.           {graph.innerHTML = "<div><img  src='http://fr.ichart.yahoo.com/t?s=^FCHI' width='200' height='120' style='border-color:#368EBE; border:1px solid;' alt='Chart ALTERNEXT'/></div>";}
  24.          else if(chart == "vix1_graph" && graph.innerHTML == "" )
  25.            {graph.innerHTML = "<div><img  src='http://fr.ichart.yahoo.com/t?s=^FCHI' width='200' height='120' style='border-color:#368EBE; border:1px solid;' alt='Chart VIX1'/></div>";}
  26.           else if(chart == "vix6_graph" && graph.innerHTML == "" )
  27.             {graph.innerHTML = "<div><img  src='http://fr.ichart.yahoo.com/t?s=^FCHI' width='200' height='120' style='border-color:#368EBE; border:1px solid;' alt='Chart VIX6'/></div>";}
  29. else graph.innerHTML = "";
  30. }


et dans ma page j'ai mis un <span id=".."></span>

Code :
  1. <tr onmouseover="this.className='sur'" onmouseout="this.className='hors'">
  2.     <td><a href="javascript:graph_france('cac_graph')" class="graph">CAC 40</a></td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
  3.    </tr>
  4. ....
  5. <table align="center" cellspacing="0">
  6. <tr>
  7. <td><span id="cac_graph"></span></td><td><span id="cacnext20_graph"></span></td>
  8. <td><span id="itcac_graph"></span></td><td><span id="sbf80_graph"></span></td>
  9. <td><span id="sbf120_graph"></span></td><td><span id="sbf250_graph"></span></td>
  10. <td><span id="mid_graph"></span></td><td><span id="small_graph"></span></td>
  11. <td><span id="alternext_graph"></span></td><td><span id="vix1_graph"></span></td>
  12. <td><span id="vix6_graph"></span></td>
  13. </tr>
  14. </table>


Message édité par mjcom le 20-12-2006 à 14:52:44

---------------
[:bossik]
Reply

Marsh Posté le 20-12-2006 à 13:02:20   

Reply

Marsh Posté le 20-12-2006 à 13:14:40    

Oh mon dieu

Reply

Marsh Posté le 20-12-2006 à 13:37:03    

et oui je suis un zero en JS


---------------
[:bossik]
Reply

Marsh Posté le 22-12-2006 à 07:27:54    

Oula oula, bon dans l`ordre :
 
pour changer la source d`une image :

Code :
  1. <img id='mon_image' src='toto.jpg' />
  2. <a onclick="document.getElementById('mon_image').src = 'images/llimagequetuveux.jpg'; ">


il ya d`autre methode pour par exemple, precharger les autre images mais je te laisse chercher sur google.
 
Ensuite, au lieu de faire suivre 20000 elseif, il ya une forme algorythmique toute faite pour ce genre d`utilisation.. :
(mais tu pourrais tout aussi bien utiliser un tableau associatif ou c`que tu veux)

Code :
  1. var new_img;
  2. switch (chart)
  3. {
  4.   case 'cac_graph':
  5.      new_img ='img1.jpg'
  6.    break;
  8.    case 'cacnext20_graph':
  9.      new_img ='img2.jpg'
  10.    break;
  11.    ... ect ...
  13.   default:
  14.       //Instruction_par_défaut  
  15.       img_new = '';
  16.    break;
  17. }
  18. //puis le truc d`au dessus :
  19. document.getElementById('mon_image').src = new_img;


 
Appliques ca, tu devrais y arriver

Reply

Marsh Posté le 22-12-2006 à 10:58:14    

merci bcp!!!


---------------
[:bossik]
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed