|
|
|
|
Bonjour,
Je suis en train d'adapter une petite visionneuse d'images en Javascript.
C'est rudimentaire, mais ça fonctionne assez bien.
Je rencontre un problème avec Firefox.
Alors qu'il affichait ce que j'attendais, j'ai modifié (quoi ??? Saipu) la structure de la page (validation) et il me signale maintenant “document.descform has no properties”.
Et refuse d'afficher le contenu de “descbox” qui est dans les “desc—”.
Autrement dit, il fonctionne, fait défiler les images, mais refuse d'afficher les légendes dans le formulaire.
Comment ça “no properties” ?
Comment y remédier ?
Voilà le code de la page :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>sIMPLE sLIDE sHOW sCRIPT</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <script language="JavaScript" type="text/javascript"> <!-- // sIMPLE sLIDE sHOW with Description sCRIPT by Chetan M Soni(csoni@email.com), 8/1999. // // NOTICE: To my knowledge this script works with Netscape 3.0+ and Internet Explorer 4.0+. // By using this script you agree that I am not responsible for any type of damage it causes. // To use this script freely, you must leave this comment intact. // // If you need help using the script, email me at csoni@email.com, and I'll be happy to help. // Browser checker Browser_Name = navigator.appName; Browser_Ver = parseInt(navigator.appVersion); if((Browser_Name == "Netscape" && Browser_Ver >= 3) || (Browser_Name == "Microsoft Internet Explorer" && Browser_Ver >= 4)) Browser_Gen = ">=3rd"; else Browser_Gen = "<3rd"; if (Browser_Gen == '>=3rd') { num_of_slides = 4; // Declare the number of slides in your show slide_num = 1; // Which slide loads ups first // Description of each slide desc1 = "Le Trocadéro vu de la Tour Eiffel. Dans le lointain, la Défense."; desc2 = "Place de la Concorde et l'Obélisque."; desc3 = "Notre-Dame vue d'un square sur la rive gauche."; desc4 = "La cour du Louvre et sa Grande Pyramide."; } // These functions alter the slide_num accordingly function firstslide(){ slide_num = 1; changeslide(); } function prevslide(){ slide_num = slide_num - 1; if(slide_num < 1){ slide_num = num_of_slides; } changeslide(); } function nextslide(){ slide_num = slide_num + 1; if(slide_num > num_of_slides){ slide_num = 1 } changeslide(); } function lastslide(){ slide_num = 4; // Declare the highest number of slides in your show changeslide(); } // This function changes the slide and the description box according to the slide_num function changeslide(){ // Changes the slide eval('document.picbox.src = "Paris' + slide_num + '.jpg"'); // Changes the description box eval('document.descform.descbox.value = "Image ' + slide_num + '/' + num_of_slides + ' : ' + eval('desc' + slide_num) + '"'); } // end hiding contents --> </script> <style type="text/css"> html, body { margin: 0; padding: 0; text-align: center; background-color: #b0c4de; } #conteneur { position: relative; margin: 0 auto; width: 760px; height : 100%; text-align: left; border : 1px solid #f0ffff; background-color: #f0f8ff; } img { border : 1px solid #888; } /* img { border-width : 0; border : none; }*/ #expliq { position : absolute; left : 30px; top : 0; font-family: 'Trebuchet MS', Verdana, sans-serif; font-size : .6em; color : #777; } #lecteur { position : relative; background : url(it.png) left top no-repeat; width : 640px; height : 585px; margin : 2em auto; } #dia { position : absolute; left : 0; top : 76px; } .btn { position : absolute; top : 17px; width : 55px; height : 55px; } #descbox { position : absolute; top : 22px; left : 257px; width : 341px; height : 46px; background-color : transparent; font-family: 'Trebuchet MS', Verdana, sans-serif; font-size : .9em; color : #676; border : none; } </style> </head> <body onload="changeslide()"> <div id="conteneur"> <div id="lecteur"> <p id="expliq">Cliquez sur les boutons pour feuilleter l'album</p> <form id="descform" action="none"> <textarea id="descbox" rows=3 cols=30 onFocus="this.blur()"></textarea> <!-- wrap=virtual --> </form> <a href="javascript:firstslide()"><img src="btn_debut.png" class="btn" style="left:30px;" alt="bouton debut" /></a> <a href="javascript:prevslide()"><img src="btn_gauche.png" class="btn" style="left:80px;" alt="bouton gauche" /></a> <a href="javascript:nextslide()"><img src="btn_droite.png" class="btn" style="left:130px;" alt="bouton droite" /></a> <a href="javascript:lastslide()"><img src="btn_fin.png" class="btn" style="left:180px;" alt="bouton fin" /></a> <div id="dia"> <img id="picbox" src="Paris1.jpg" width="640" height="480" /> </div> </div> <br> </div> </body> </html>
Salut Gihef
function changeslide(){
// Changes the slide
eval('document.picbox.src = "Paris' + slide_num + '.jpg"');
// Changes the description box
eval("document.forms.descform.descbox.value = 'Image " + slide_num + "/" + num_of_slides + " : " + eval("desc" + slide_num) + "'");
}
PS : utilises les entités html plutôt que les lettres accentuées... PPS : il marche pas sous IE ton scrpt, j'ai une erreur : document.picbox a la valeur Null ou n'est pas un objet . et ce avant que j'intervienne dessus. et par contre, j'arrive pas a corriger... Forcément... ©brupala : Le méchant nounours ©Moi |
J'ai trouvé :
function changeslide(){
// Changes the slide
eval('document.picbox.src = "Paris' + slide_num + '.jpg"');
// Changes the description box
eval('document.forms.descform.descbox.value = "Image ' + slide_num + '/' + num_of_slides + ' : ' + eval('desc' + slide_num) + '"');
}
Sous IE (v7) : function changeslide(){
// Changes the slide
eval('picbox.src = "Paris' + slide_num + '.jpg"');
// Changes the description box
eval('document.forms.descform.descbox.value = "Image ' + slide_num + '/' + num_of_slides + ' : ' + eval('desc' + slide_num) + '"');
}
Forcément... ©brupala : Le méchant nounours ©Moi |
Répondre à gryzzly
|
Pourquoi veux tu l'abandonner ?
si IE alors ... sinon ... pour le probleme de "document.nom-id-img.src" A toi de voir si tu veux une "usine a gaz", ou un script léger comme celui dont il est question dans ce post ... Forcément... ©brupala : Le méchant nounours ©Moi |
Bsr
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function lireDescbox()
{
alert(document.getElementById("descbox").value);
}
function ecrireDescbox()
{
document.getElementById("descbox").value = document.getElementById("nouveau").value;
}
-->
</script>
</head>
<body>
<form id="descform">
<textarea id="descbox" rows="3" cols="30">
Ceci est un essai de texte
sur 2 lignes.
</textarea>
<br />
<input type="button" value="Lire le contenu du textarea via DOM" onclick="lireDescbox()">
<br />
<br />
Nouveau texte <input id="nouveau" type="text" value=""><br />
<input type="button" value="Ecrire le contenu du textarea via DOM" onclick="ecrireDescbox()">
</form>
</body>
</html>
Voilà maintenant à toi d'adapter le script PhP Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ... |
http://www.w3schools.com/jsref/jsref_eval.asp
|
Bonjour
eval('document.getElementById("picbox").src = "Paris' + slide_num + '.jpg"');
eval('document.getElementById("descbox").value = "Image ' + slide_num + '/'
+ num_of_slides + ' : ' + eval('desc' + slide_num) + '"');
utilisé eval partout ne sert à rien ! Et imbriquer les eval() alors là c'est chaud ! ;-) En effet tu as tout intérêt à écrire directement : document.getElementById("picbox").src = "Paris' + slide_num + '.jpg";
document.getElementById("descbox").value = "Image ' + slide_num + '/' + num_of_slides + ' : '
+ eval('desc' + slide_num)';
Que fait eval() ici ? Supposons que slide_num contienne la valeur 1 Alors eval('desc' + slide_num) devient eval('desc1') ce qui retourne le contenu de la variable desc1 et non pas la chaîne "desc1" évidemment. Bref c'est comme si tu avais écrit en dur le code JavaScript suivant : document.getElementById("descbox").value = "Image ' + slide_num + '/' + num_of_slides
+ ' : ' +desc1;
Utiliser eval ici est une bonne idée mais il serait bcp plus judicieux d'utiliser un tableau ! // Description of each slide desc1 = "Le Trocadéro vu de la Tour Eiffel. Dans le lointain, la Défense."; desc2 = "Place de la Concorde et l'Obélisque."; desc3 = "Notre-Dame vue d'un square sur la rive gauche."; desc4 = "La cour du Louvre et sa Grande Pyramide."; devient // Description of each slide desc = new Array(); desc[0] = "Le Trocadéro vu de la Tour Eiffel. Dans le lointain, la Défense."; desc[1] = "Place de la Concorde et l'Obélisque."; desc[2] = "Notre-Dame vue d'un square sur la rive gauche."; desc[3] = "La cour du Louvre et sa Grande Pyramide."; et le code : document.getElementById("descbox").value = "Image ' + slide_num + '/' + num_of_slides
+ ' : ' + desc[slide_num-1] ;
C'est propre, c'est joli et plus de fonction eval() allez hop ! ;-) Nota : j'ai mis slide_num-1 et pas slide_num car les tableaux commençent toujours à l'index 0. Ceci dit tu peux passer outre. PhP Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...
|
Et puis, l'obligation d'avoir des noms d'image sous la forme img1, img2, img3… Bof.
num_of_slides = 4; // Declare the number of slides in your show
slide_num = 1; // Which slide loads ups first
// Description of each slide
desc = new Array();
desc[1] = "Le Trocadéro vu de la Tour Eiffel.\nDans le lointain, la Défense.";
desc[2] = "Place de la Concorde et l'Obélisque.";
desc[3] = "Notre-Dame vue d'un square sur la rive gauche.";
desc[4] = "La cour du Louvre et sa Grande Pyramide.";
// Declaration of each image
chemin="../../_images/_ital/";
image = new Array();
image[1] = "downtownparis5.jpg";
image[2] = "DSCF0160_s.jpg";
image[3] = "IMG_0268.jpg";
image[4] = "ricorocks_p1010018.jpg";
// These functions alter the slide_num accordingly
function firstslide(){
slide_num = 1;
changeslide();
}
function prevslide(){
slide_num = slide_num - 1;
if(slide_num < 1){
slide_num = num_of_slides;
}
changeslide();
}
function nextslide(){
slide_num = slide_num + 1;
if(slide_num > num_of_slides){
slide_num = 1
}
changeslide();
}
function lastslide(){
slide_num = num_of_slides; // Declare the highest number of slides in your show
changeslide();
}
// This function changes the slide and the description box according to the slide_num
function changeslide(){
// Changes the slide
//eval('document.picbox.src = "Paris' + slide_num + '.jpg"');
//document.getElementById("picbox").src = 'Paris' + slide_num + '.jpg';
document.getElementById("picbox").src = chemin + image[slide_num];
// Changes the description box
//eval('document.forms.descform.descbox.value = "Image ' + slide_num + '/' + num_of_slides + ' : ' + eval('desc' + slide_num) + '"');
//document.getElementById("descbox").value = 'Image ' + slide_num + '/' + num_of_slides + ' : ' + eval('desc' + slide_num);
//document.getElementById("descbox").value = 'Image ' + slide_num + '/' + num_of_slides + ' : ' + desc[slide_num];
document.getElementById("descbox").value = 'Image ' + slide_num + '/' + num_of_slides + ' : ' + '\n' + desc[slide_num];
}
-- |
B'soir
image = new Array(); image[1] = "downtownparis5.jpg"; image[2] = "DSCF0160_s.jpg"; image[3] = "IMG_0268.jpg"; image[4] = "ricorocks_p1010018.jpg"; alert(image.length); // Affiche 5 bref ton tableau image contient 5 éléments (hé oui) et non pas 4 ! L'élément zéro est "undefined" mais il est quand même pris en compte. Il est donc plus pratique d'utiliser l'index 0. De cette façon tu peux même te passer de la variable num_of_slides L'astuce c'est de considérer que slide_num varie entre 0 et n-1 et non plus entre 1 et n Ex :
slide_num = 0; // Which slide loads ups first
// Description of each slide
desc = new Array();
desc[0] = "Le Trocadéro vu de la Tour Eiffel.\nDans le lointain, la Défense.";
desc[1] = "Place de la Concorde et l'Obélisque.";
desc[2] = "Notre-Dame vue d'un square sur la rive gauche.";
desc[3] = "La cour du Louvre et sa Grande Pyramide.";
// Declaration of each image
chemin="../../_images/_ital/";
image = new Array();
image[0] = "downtownparis5.jpg";
image[1] = "DSCF0160_s.jpg";
image[2] = "IMG_0268.jpg";
image[3] = "ricorocks_p1010018.jpg";
// These functions alter the slide_num accordingly
function firstslide(){
slide_num = 0;
changeslide();
}
function prevslide(){
slide_num = slide_num - 1;
if(slide_num < 0){
slide_num = image.length-1;
}
changeslide();
}
function nextslide(){
slide_num = slide_num + 1;
if(slide_num >= image.length){
slide_num = 0
}
changeslide();
}
function lastslide(){
slide_num = image.length; // Declare the highest number of slides in your show
changeslide();
}
// This function changes the slide and the description box according to the slide_num
function changeslide(){
// Changes the slide
document.getElementById("picbox").src = chemin + image[slide_num];
// Changes the description box
document.getElementById("descbox").value = 'Image ' + (slide_num+1) + '/' + image.length
+ ' : ' + '\n' + desc[slide_num];
}
Et si tu veux de passer des indices tu peux même écrire : desc = new Array();
desc.push( "Le Trocadéro vu de la Tour Eiffel.\nDans le lointain, la Défense.");
desc.push( "Place de la Concorde et l'Obélisque.");
desc.push("Notre-Dame vue d'un square sur la rive gauche.");
desc.push("La cour du Louvre et sa Grande Pyramide.");
Et hop plus de prise de tête avec les indices. Les indices existent bien sûr toujours. C'est juste une autre façon d'ajouter des éléments à un tableau en utilisant la méthode (ou fonction) push() de l'objet Array. Enfin tu pourrais aller encore plus loin en créant ton propre objet Slide en JavaScript : pratique si tu modifies souvent ton slide ou que tu veux le faire évoluer en intégrant des petites images de preview, des dates etc ... Mais ceci dépasse le cadre de ce post. PhP Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ... |
Apache2 has no virtualhosts Configuration file has no version number, assuming syslog-ng 2.1 format. please add @version: maj.min to the beginning of the fi Evenement javascript Javascript Javascript date Javascript document forms length Javascript document location Javascript document write Javascript document.getelementbyid mettre un lien Javascript eval(document.forms.radio) Javascript switch Javascript:if(document.getelementbyid( Rtai ‘struct proc_dir_entry’ has no member named ‘owner’ Récupérer valeur champ javascript document value Tableau javascript The following file has no video stream and cannot be converted into ipod video file Warning host has no services associated with it! Your apache server has no pgsql support built-in.
