[ajax] survol d'image et

survol d'image et [ajax] - HTML/CSS - Programmation

Marsh Posté le 12-02-2010 à 14:32:07    

bonjour, je cherche à exploiter ajax pour une galerie d'images on survole une mini image et elle s'affiche en grand dans un div spécifique <div id="bigview"> qui contient lui même une image par défaut, le souci est que je cherche également à afficher d'abord une image .gif d'attente  dans img/spinner.gif  style loader
puis quand la grande image est completement chargée on affiche celle -ci
je vous propose le code ici html et js en extrait ou vous propose de telecharger les sources ainsi que les imageshttp://www.jeremieparmentier.com/test/test-ajax.zip
 
merci de votre aide!
 
html:
<div id="sousrub1"> <img class="imagette" src="portfolio_fichiers/imagette_logo1.gif" onmouseover="javascript:enlarge(this)" alt="/img/imagette_logo1.gif" border="0"></a> </div>    
   </div><div id="content"><div id="bigview"><img src="img/repere3.gif"></div>
 
ajax.js

Code :
  1. function createXHR()
  2. {
  3.     var request = false;
  4.         try {
  5.             request = new ActiveXObject('Msxml2.XMLHTTP');
  6.         }
  7.         catch (err2) {
  8.             try {
  9.                 request = new ActiveXObject('Microsoft.XMLHTTP');
  10.             }
  11.             catch (err3) {
  12.  try {
  13.   request = new XMLHttpRequest();
  14.  }
  15.  catch (err1)
  16.  {
  17.   request = false;
  18.  }
  19.             }
  20.         }
  21.     return request;
  22. }


 
gallery.js
 

Code :
  1. function localFilename(url) // removing path
  2. {
  3. var x = url.lastIndexOf("/" );
  4. url = url.slice(x + 1);
  5. return url;
  6. }
  9. // images are loaded asynchronously with no delay
  11. function preloading(url)
  12. {
  13. var xhr=createXHR(); 
  14. xhr.onreadystatechange=function()
  15. {
  16.  if(xhr.readyState == 4)
  17.  {
  18.   var content = xhr.responseText;
  19.   var i = new Image();
  20.   i.src = content;
  21.  }
  22. };
  24. xhr.open("GET", url , true);
  25. xhr.send(null);
  26. } 
  29. function enlarge(element)
  30. {     
  31.        //ici  
  32. var name = element.src;
  33. name = localFilename(name);
  34. name = name.slice(9); 
  35. name = "./img/" + name; 
  37. // building a string to display the image
  39. var str = "<img src='" + name + "' >";
  40. document.getElementById("bigview" ).innerHTML = str;
  42. }


 
 

Reply

Marsh Posté le 12-02-2010 à 14:32:07   

Reply

Sujets relatifs:

Leave a Replay

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