IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Changement d'image périodique


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    67
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2004
    Messages : 67
    Par défaut Changement d'image périodique
    Bonjour,

    J'ai intégré sur ma page un petit code javascript pour changer une image affichée toute les 10 secondes par une autre. voir l'extrait de code ci-dessous (le début de la page). ça marche mais problème, fréquemment et sur firefox notamment, la page tressaute au changement d'image et c'est très désagréable pour mes utilisateurs ... je sais pas ce qui se passe exactement, je vois pourquoi le navigateur rechargerait la page ? avez vous une idée ? Merci d'avance

    J'ai déjà essayé de mettre le run_img_loop dans le script au lieu du onload dans le tag body mais ça change rien.

    (il y a un javascript de gestion de bulle et un style aussi au début de la page)

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    <html>
     
    <head>
     
    <script type="text/javascript">
     
    function chg_img() {
      if (image==1) {
        document.getElementById("img_loop").innerHTML="<img border='5' src='medaillon.jpg' title='medaillon' id='1'>"; image=2;
      } else if (image==2) {
        document.getElementById("img_loop").innerHTML="<img border='5' src='medaillon_a.jpg' title='medaillon_a' id='2'>"; image=3;
      } else if (image==3) {
        document.getElementById("img_loop").innerHTML="<img border='5' src='medaillon_b.jpg' title='medaillon_b' id='3'>"; image=4;
      } else if (image==4) {
        document.getElementById("img_loop").innerHTML="<img border='5' src='medaillon_c.jpg' title='medaillon_c' id='4'>"; image=5;
      } else if (image==5) {
        document.getElementById("img_loop").innerHTML="<img border='5' src='medaillon_d.jpg' title='medaillon_d' id='5'>"; image=6;    
      } else if (image==6) {
        document.getElementById("img_loop").innerHTML="<img border='5' src='medaillon_e.jpg' title='medaillon_e' id='6'>"; image=7;
      } else if (image==7) {
        document.getElementById("img_loop").innerHTML="<img border='5' src='medaillon_f.jpg' title='medaillon_f' id='7'>"; image=8;
      } else {
        document.getElementById("img_loop").innerHTML="<img border='5' src='medaillon_g.jpg' title='medaillon_g' id='8'>"; image=1;
      }
    }
     
    function run_img_loop() {
      image=1;
      timer=setInterval("chg_img()",10000);
    }
     
    run_img_loop();
     
    </script>
     
    <script LANGUAGE="javascript"> 
    <!-- 
     
    function ouvrepopup(filename) { 
       window.open(filename, "Magic", "toolbar=no, location=no, directories=no, status=yes, scrollbars=yes, resizable=no, copyhistory=no, width=610, height=490, left=200, top=140"); 
    } 
     
    function GetId(id) {
       return document.getElementById(id);
    }
     
    var i=false; // La variable i nous dit si la bulle est visible ou non
     
    function move(e) {
      if(i) {  // Si la bulle est visible, on calcul en temps reel sa position ideale
        if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
          GetId("curseur").style.left=e.pageX + 5+"px";
          GetId("curseur").style.top=e.pageY + 10+"px";
        } 
        else { // Modif proposéepar TeDeum, merci à lui
          if(document.documentElement.clientWidth>0) {
            GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
            GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
          } 
          else {
            GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
            GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
          }
        }
      }
    }
     
    function montre(text) {
      if(i==false) {
        GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
        GetId("curseur").innerHTML = text; // on copie notre texte dans l'élément html
        i=true;
      }
    }
     
    function cache() {
      if(i==true) {
        GetId("curseur").style.visibility="hidden"; // Si la bulle est visible on la cache
        i=false;
      }
    }
     
    document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à  jour la position de la bulle.
     
    //--> 
    </script>
     
    <style type="text/css" media="all">
    .infobulle{
    	position: absolute;	
    	visibility : hidden;
    	border: 1px solid Black;
    	padding: 10px;
    	font-family: Verdana, Arial;
    	font-size: 10px;
    	background-color: #FFFFCC;
    }
    </style>
     
    </head>
     
    <body bgcolor="#FFFFCC">
     
    <div id="curseur" class="infobulle"></div>
     
    <table width="90%" height="100%" border=0>
      <tr>
        <td valign="top">
        <center>
        <!--<img border="5" src="medaillon.jpg"><br>-->
        <div id="img_loop"><img border="5" src="medaillon.jpg" title='medaillon' id="1"></div>

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    A la place des lignes :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById("img_loop").innerHTML="<img border='5' src='medaillon.jpg' title='medaillon' id='1'>";
    essaye plutôt :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById("img_loop").getElementsByTagName('img')[0].src='medaillon.jpg';
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    67
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2004
    Messages : 67
    Par défaut
    c'était une bonne idée que j'ai testé : malheureusement pour un raison que j'ignore ça aggrave le problème on dirait. je crois ie c'est firefox qui loose car IE a l'air de mieux se comporter. merci pour ton aide en tous cas !

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par Jeff.p18 Voir le message
    c'était une bonne idée que j'ai testé : malheureusement pour un raison que j'ignore ça aggrave le problème on dirait. je crois ie c'est firefox qui loose car IE a l'air de mieux se comporter. merci pour ton aide en tous cas !
    "A l'air" effectivement... dans la mesure où un id doit commencer soit par un underscore ('_') soit par une lettre, c'est peut-être ça qui pose problème et du coup IE semble mieux se comporter car il respecte moins les standards
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    un préchargement des images aiderait peut être aussi ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    67
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2004
    Messages : 67
    Par défaut
    concrètement je tste quoi alors ?
    merci les gars

Discussions similaires

  1. Réponses: 8
    Dernier message: 19/01/2006, 10h57
  2. Changement d'image suivent le passage du curseur!
    Par ghyosmik dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 03/01/2006, 17h22
  3. [FLASH 8] Realiser un changement d'image
    Par Gemelos dans le forum Flash
    Réponses: 3
    Dernier message: 21/11/2005, 13h48
  4. Changement d'image si l'originale absente
    Par MitchDap dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 16/03/2005, 09h06
  5. changement d'image par radio boutton
    Par ph_anrys dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 14/03/2005, 16h27

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo