Images liées à un javascript ne s'affichent pas online
Images liées à un javascript ne s'affichent pas online - HTML/CSS - Programmation
Sujets relatifs:
- Mise en veille ordinateur et destroy $_session javascript/php
- Différence php et javascript ?
- Javascript & Ajax pour les nuls
- [JAVASCRIPT] Que fait ce code ?
- Comment créer une page web qui affiche tout les images d'un fichier ?
- Javascript Detection Bouton Home Iphone quitter navigateur
- javascript : besoin de modifier une iframe crossDomain
- [RESOLU] Modification d'un code javascript
- urlencode et javascript
- JS : ne charger que les images hors display:none / hide() ?
Marsh Posté le 16-02-2013 à 14:11:50
Bonjour,
J'ai créé un site web contenant des diaporamas permettant de faire défiler des images. Ces diaporamas fonctionnent grâce à un code javascript.
Lorsque je visualise mon site en local, tout fonctionne. Lorsque je le visualise en ligne (après avoir tout chargé par FTP sur un serveur), les images du diaporama ne s'affichent pas.
J'ai recherché sur divers forums une solution, mais :
- soit je n'ai pas compris la réponse (je débute, c'est mon premier site :-) )
- soit mon cas est différent
Informations supplémentaires :
Je suis sous Firefox dernière version, Windows 7, j'édite avec Compozer, j'uploade avec Filezilla, les images sont au format .bmp
Vous pouvez visualiser une page de mon site contenant un diaporama ici :
http://learnconstellations.com/Site%20web/Etape1Constellationsessentiellesnord.html
Et enfin, voici ci-dessous les codes html et javascript utilisés, avec les passages qui me semblent concernés en couleur.
Merci d'avance pour votre aide!
HTML:
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title>Etape 1 - Constellations Essentielles Nord</title>
<script src="constellationsessentiellesnord.js">
</script>
<link rel="stylesheet" type="text/css"
href="style.css">
<link rel="stylesheet" type="text/css" href="ie6.css">
<link rel="stylesheet" type="text/css"
href="troiscolonnes.css">
</head>
<body onload="initialiserselect();">
<div id="banniere" class="banniere"><br>
<div style="text-align: center;"><big><big><big>Apprendre
les constellations<br>
</big></big></big></div>
<br>
</div>
<div id="MH">
<div class="groupe_lien_MH"> <a class="menu_MH"
href="Apprendre%20les%20constellations.html">Accueil</a>
<div class="groupe_sublien_MH">
<div class="MH_deroulant_top"></div>
<div class="sublien_MH"> <a
href="Apprendre%20les%20constellations.html">Introduction</a>
</div>
<div class="sublien_MH"> <a
href="Les%20figures%20des%20constellations.html"> <span
style="display: inline;">Figures des const.</span></a>
</div>
<div class="sublien_MH"> <a href="About%20me.html">Contact/Faire
un don</a>
</div>
<div class="MH_deroulant_bottom"></div>
</div>
</div>
<div class="groupe_lien_MH"> <a class="menu_MH"
href="Etape1Constellationsessentiellesnord.html">Etape 1</a>
<div class="groupe_sublien_MH">
<div class="MH_deroulant_top"></div>
<div class="sublien_MH"> <a
href="Etape1Constellationsessentiellesnord.html"><span
style="display: inline;">Const. essentielles</span></a>
</div>
<div class="sublien_MH"> <a
href="Etape1Constellationsfacultativesnord.html"><span
style="display: inline;">Const. "facultatives"</span></a>
</div>
<div class="MH_deroulant_bottom"></div>
</div>
</div>
<div class="groupe_lien_MH"> <a class="menu_MH"
href="Etape2Constellationsessentiellesnord.html">Etape 2</a>
<div class="groupe_sublien_MH">
<div class="MH_deroulant_top"></div>
<div class="sublien_MH"> <a
href="Etape2Constellationsessentiellesnord.html"><span
style="display: inline;">Const. essentielles</span></a>
</div>
<div class="sublien_MH"> <a
href="Etape2Constellationsfacultativesnord.html"><span
style="display: inline;">Const. "facultatives"</span></a>
</div>
<div class="MH_deroulant_bottom"></div>
</div>
</div>
<div class="groupe_lien_MH"> <a class="menu_MH"
href="Etape3.html">Etape 3</a>
<div class="groupe_sublien_MH">
<div class="MH_deroulant_top"></div>
<div class="sublien_MH"> <a href="Etape3.html"><span
style="display: inline;">Localiser les const.</span></a>
</div>
<div class="sublien_MH"> <a href="Puzzle1.html"><span
style="display: inline;">Puzzle 1</span></a>
</div>
<div class="sublien_MH"> <a href="Puzzle2.html"><span
style="display: inline;">Puzzle 2</span>
</a></div>
<div class="sublien_MH"> <a href="Puzzle3.html"><span
style="display: inline;">Puzzle 3</span>
</a></div>
<div class="sublien_MH"> <a href="Puzzle4.html"><span
style="display: inline;">Puzzle 4</span>
</a></div>
<div class="sublien_MH"> <a href="Puzzle5.html"><span
style="display: inline;">Puzzle 5</span>
</a></div>
<div class="MH_deroulant_bottom"></div>
</div>
</div>
<div class="groupe_lien_MH"> <a class="menu_MH"
href="Etape4-Derniereetape.html">Dernière étape</a>
<div class="groupe_sublien_MH">
<div class="MH_deroulant_top"></div>
<div class="sublien_MH"> <a
href="Etape4-Derniereetape.html">Entraînez-vous!</a>
</div>
<div class="sublien_MH"> <a
href="Et%20maintenant,%20lorsque%20je%20regarde%20le%20ciel.html"><span
style="display: inline;">Et ensuite?</span>
</a> </div>
<div class="MH_deroulant_bottom"></div>
</div>
</div>
</div>
<br>
<div class="gauche"><img src="photocolonne3.jpg"
style="top: 12px; left: 11px; width: 246px; height: 249px;"
title="Amas des Pléïades">
</div>
<div class="centre">
<div style="text-align: center;"><br>
</div>
<div style="text-align: center;"><big>
NOMMER LES CONSTELLATIONS</big><br>
<small>Hémisphère Nord</small><br>
</div>
<br>
<div style="text-align: left;">
Certaines constellations
sont plus facilement visibles que d'autres,
que ce soit grâce à leur forme particulière ou encore à leur
luminosité(*)
plus élevée ; c'est par celles-ci que nous allons débuter notre
apprentissage!<br>
<br>
<div class="methode">
<ol>
<li><span style="font-weight: bold;">Faites
défiler les constellations</span> du diaporama ci-dessous, en
utilisant<span style="font-style: italic;"> les flèches
bleues</span> et la <span style="font-style: italic;">liste
déroulante</span>.</li>
<br>
<li><span style="font-weight: bold;">Apprenez
ainsi à les nomme</span>r : pour cela, <span
style="font-style: italic;">masquez
leur
nom</span> grâce au bouton correspondant et utilisez si possible
le mode de <span style="font-style: italic;">tirage
aléatoire</span><span style="font-weight: bold;"> </span>(en
cliquant sur l'icône en forme de planète).</li>
</ol>
<div style="margin-left: 40px;">Vous
pourrez ensuite passer à
l'<a href="Etape1Constellationsfacultativesnord.html">étape
suivante</a>.<br>
</div>
<br>
</div>
<br>
<small>ATTENTION! Notez bien que, dans un but pédagogique, les
constellations
voisines sont pour le moment volontairement masquées.</small><br>
</div>
</div>
<div class="droite"><img
style="height: 250px; width: 260px; left: 855px; top: 12px;"
src="photocolonne4.jpg" title="NGC 7293">
</div>
<br>
<div style="text-align: center;"><big><span
style="font-weight: bold;">Diaporama
: <br>
Constellations "essentielles" de
l'hémisphère Nord</span></big><br>
<br style="font-weight: bold;">
</div>
<table onclick="nomimage();" border="0" cellpadding="0"
cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" valign="middle">
<form name="formulaire" onsubmit="return false">
<div style="text-align: center;">
<select id="listeder"
onclick="listederoulante();change();" size="1"
width="35px">
<option value="0">Choisir une constellation
</option>
<option value="1">Aigle
</option>
<option value="2">Andromède
</option>
<option value="3">Balance
</option>
<option value="4">Bouvier
</option>
<option value="5">Cancer
</option>
<option value="6">Capricorne
</option>
<option value="7">Cassiopée
</option>
<option value="8">Céphée
</option>
<option value="9">Cocher
</option>
<option value="10">Couronne boréale
</option>
<option value="11">Cygne
</option>
<option value="12">Dragon
</option>
<option value="13">Gémeaux
</option>
<option value="14">Grande ourse
</option>
<option value="15">Hercule
</option>
<option value="16">Lion
</option>
<option value="17">Lyre
</option>
<option value="18">Ophiucus
</option>
<option value="19">Orion
</option>
<option value="20">Pégase
</option>
<option value="21">Persée
</option>
<option value="22">Petite ourse
</option>
<option value="23">Sagittaire
</option>
<option value="24">Scorpion
</option>
<option value="25">Taureau
</option>
<option value="26">Verseau
</option>
<option value="27">Vierge
</option>
</select>
N° <input valign="center" value="1" size="1"
name="numero">
/ 27 images.<br>
<input onclick="affCache();affichermasquer();"
value="Masquer les noms?" id="affmasquer" type="button"><input
value="Retourner au début?" onclick="zero();nomlisteder();"
type="button">
</div>
<div style="text-align: center;">
<div style="text-align: center;"><br>
<input onclick="descendre();nomlisteder();"
src="precedente.png" name="Image précédente"
title="Constellation précédente" type="image">
<input onclick="imagealeatoire();nomlisteder();"
src="aleatoire.png" name="aléatoire="
title="Constellation aléatoire" type="image">
<input onclick="monter();nomlisteder();"
src="suivante.png" name="Image suivante"
title="Constellation suivante" type="image">
<br>
<img style="border: 0px solid ; width: 810px; height: 495px;"
alt="Aigle"
src="Photos%20%E9tape%201/constellationsessentiellesnord/visuelX/visuel%20%281%29.bmp"
name="vignette" id="imagevue"><br>
<table valign="center" height="100%"
width="100%">
</table>
<table valign="center" height="100%"
width="100%">
</table>
</div>
<span style="font-style: italic;"></span><br>
Pourquoi les constellations sont-elles ainsi nommées? Parce qu'elles
évoquent des formes familières : <a
href="Les%20figures%20des%20constellations.html">voir les
figures des constellations</a>.<span
style="font-style: italic;"></span><br>
<br>
Vous avez réussi cette étape? Félicitations, vous pouvez désormais
passer
à <a href="Etape1Constellationsfacultativesnord.html">l'étape
suivante</a>.<br>
Vous pouvez également <a
href="Etape1Constellationsessentiellessud.html">changer
d'hémisphère</a>.<br>
<div style="text-align: center;"><small><small>Notes
: (*) j'entends ici la magnitude apparente des constellations, cf. <a
href="http://fr.wikipedia.org/wiki/Magnitude_absolue">Wikipédia</a>.</small></small><br>
<p style="text-align: center;"></p>
<p style="text-align: center;"><small><small><br>
Sources
:</small></small><small><small><br>
Les images sont tirées de l'excellent logiciel <a
href="http://www.stellarium.org/fr/">Stellarium</a>,
les photos du <a href="http://apod.nasa.gov/apod/archivepix.html">site
de la Nasa</a> et du site <a
href="http://www.univers-mystere.com/astronomie-2/que-peut-on-voir-dans-le-ciel/">Univers
mystère</a>. <br>
Elles sont toutes la propriété de leurs auteurs respectifs.</small></small></p>
</div>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</body>
</html>
JAVASCRIPT :
// on initialise le compteur d'images
var compteur = 1;
// le nombre total d'images
var total_img = 27;
// i pour le tirage aléatoire
var i;
// La fonction pour faire monter le compteur
function monter() {
compteur += 1;
if ( compteur == (total_img + 1) ) {
compteur = 1;
}
document.vignette.src = "Photos%20%E9tape%201/constellationsessentiellesnord/visuelX/visuel%20(" + compteur + " ).bmp";
document.formulaire.numero.value = compteur;
}
// La fonction pour faire descendre le compteur
function descendre() {
compteur += -1;
if ( compteur < 1 ) {
compteur = total_img;
}
document.vignette.src = "Photos%20%E9tape%201/constellationsessentiellesnord/visuelX/visuel%20(" + compteur + " ).bmp";
document.formulaire.numero.value = compteur;
}
// La fonction de remise à zéro
function zero() {
document.vignette.src = "Photos%20%E9tape%201/constellationsessentiellesnord/visuelX/visuel%20(1).bmp";
compteur = 1;
document.formulaire.numero.value = compteur;
}
// La fonction de tirage aléatoire - Préciser le Nbre de photos
function imagealeatoire() {
i = Math.floor(27 * Math.random() + 1);
compteur = i;
document.vignette.src = "Photos%20%E9tape%201/constellationsessentiellesnord/visuelX/visuel%20(" + compteur + " ).bmp";
document.formulaire.numero.value = compteur;
}
function affCache() {
var div = document.getElementById('listeder');
if (div.style.display == "" )
div.style.display = "none";
else
div.style.display = "";
}
function nomimage() {
if (document.formulaire.numero.value == 1)
{document.formulaire.nomconst.value = "Aigle"; }
else if (document.formulaire.numero.value == 2)
{document.formulaire.nomconst.value = "Andromède"; }
else if (document.formulaire.numero.value == 3)
{document.formulaire.nomconst.value = "Balance"; }
else if (document.formulaire.numero.value == 4)
{document.formulaire.nomconst.value = "Bouvier"; }
else if (document.formulaire.numero.value == 5)
{document.formulaire.nomconst.value = "Cancer"; }
else if (document.formulaire.numero.value == 6)
{document.formulaire.nomconst.value = "Capricorne"; }
else if (document.formulaire.numero.value == 7)
{document.formulaire.nomconst.value = "Cassiopée"; }
else if (document.formulaire.numero.value == 8)
{document.formulaire.nomconst.value = "Céphée"; }
else if (document.formulaire.numero.value == 9)
{document.formulaire.nomconst.value = "Cocher"; }
else if (document.formulaire.numero.value == 10)
{document.formulaire.nomconst.value = "Couronne boréale"; }
else if (document.formulaire.numero.value == 11)
{document.formulaire.nomconst.value = "Cygne"; }
else if (document.formulaire.numero.value == 12)
{document.formulaire.nomconst.value = "Dragon"; }
else if (document.formulaire.numero.value == 13)
{document.formulaire.nomconst.value = "Gémeaux"; }
else if (document.formulaire.numero.value == 14)
{document.formulaire.nomconst.value = "Grande ourse"; }
else if (document.formulaire.numero.value == 15)
{document.formulaire.nomconst.value = "Hercule"; }
else if (document.formulaire.numero.value == 16)
{document.formulaire.nomconst.value = "Lion"; }
else if (document.formulaire.numero.value == 17)
{document.formulaire.nomconst.value = "Lyre"; }
else if (document.formulaire.numero.value == 18)
{document.formulaire.nomconst.value = "Ophiucus"; }
else if (document.formulaire.numero.value == 19)
{document.formulaire.nomconst.value = "Orion"; }
else if (document.formulaire.numero.value == 20)
{document.formulaire.nomconst.value = "Pégase"; }
else if (document.formulaire.numero.value == 21)
{document.formulaire.nomconst.value = "Persée"; }
else if (document.formulaire.numero.value == 22)
{document.formulaire.nomconst.value = "Petite ourse"; }
else if (document.formulaire.numero.value == 23)
{document.formulaire.nomconst.value = "Sagittaire"; }
else if (document.formulaire.numero.value == 24)
{document.formulaire.nomconst.value = "Scorpion"; }
else if (document.formulaire.numero.value == 25)
{document.formulaire.nomconst.value = "Taureau"; }
else if (document.formulaire.numero.value == 26)
{document.formulaire.nomconst.value = "Verseau"; }
else if (document.formulaire.numero.value == 27)
{document.formulaire.nomconst.value = "Vierge"; }
}
function getSelectValue(selectId)
{
var selectElmt = document.getElementById(selectId);
return selectElmt.options[selectElmt.selectedIndex].value;
}
function listederoulante() {
var selectValue = "listeder";
selectValue = getSelectValue(selectValue);
document.formulaire.vignette.src = "Photos%20%E9tape%201/constellationsessentiellesnord/visuelX/visuel%20(" + selectValue + " ).bmp";
document.formulaire.numero.value = selectValue;
compteur = document.getElementById("listeder" ).selectedIndex;
}
function nomlisteder() {
document.formulaire.listeder.value = compteur;
}
function initialiserselect()
{document.formulaire.listeder.value = 1;
}
function affichermasquer() {
if (document.formulaire.affmasquer.value =="Masquer les noms?" )
{document.formulaire.affmasquer.value ="Afficher les noms?";}
else {document.formulaire.affmasquer.value ="Masquer les noms?";}
}