Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2744 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [ajax] survol d'image et

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[ajax] survol d'image et

n°1965452
jerrry
Posté le 12-02-2010 à 14:32:07  profilanswer
 

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. }
  7. // images are loaded asynchronously with no delay
  8. function preloading(url)
  9. {
  10. var xhr=createXHR(); 
  11. xhr.onreadystatechange=function()
  12. {
  13.  if(xhr.readyState == 4)
  14.  {
  15.   var content = xhr.responseText;
  16.   var i = new Image();
  17.   i.src = content;
  18.  }
  19. };
  20. xhr.open("GET", url , true);
  21. xhr.send(null);
  22. function enlarge(element)
  23. {     
  24.        //ici  
  25. var name = element.src;
  26. name = localFilename(name);
  27. name = name.slice(9); 
  28. name = "./img/" + name; 
  29. // building a string to display the image
  30. var str = "<img src='" + name + "' >";
  31. document.getElementById("bigview" ).innerHTML = str;
  32. }


 
 

mood
Publicité
Posté le 12-02-2010 à 14:32:07  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [ajax] survol d'image et

 

Sujets relatifs
[AJAX] Pb de rafraichissement de calquesLes sessions et l'ajax
[AJAX] Ne fonctionne pas sous IE ...Problème pour afficher une image en PHP
Transformer une matrice en image sous MATLABRécupérer une largeur d'image ?
[annulé/résolu]soucis onMouseOver et onMouseOut sur lien + imageRecuperer header d'une image rapidement
afficher plusieur image dans un sprite en as3Robot web en perl et ajax
Plus de sujets relatifs à : [ajax] survol d'image et


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR