POPUP

cs_simvc Messages postés 3 Date d'inscription mercredi 29 décembre 2004 Statut Membre Dernière intervention 25 février 2011 - 25 févr. 2011 à 13:57
007Julien Messages postés 276 Date d'inscription mercredi 22 septembre 2010 Statut Membre Dernière intervention 8 janvier 2014 - 27 févr. 2011 à 22:48
Bonjour,

Le code suivant me permet de voir quand la situation change sur mon Input 3,

mais je dois chaque fois activer cette page via son parent.

Comment faire en sorte que quand l'Input 3 change de valeur, je puisse avoir un pop up?

Merci,

<html>
<head>
<meta http-equiv="refresh" content="15">
<title>Avidiom Inputs</title>
</head>

<SCRIPT TYPE="text/javascript">
function ChangeImage(str){
if(str=='On')str='';
else str='';
return(str);
}

function ChangeText(str){
var re=/Off/;
str=str.replace(re,"Power Off");
re2=/On/;
str=str.replace(re2,"Power On");
return(str);
}

document.writeln(
''+
' ----
'+
' Input 1 %41, '+
' Input 2 %42, '+
' Input 3 '+ChangeText('%43').bold()+', '+
' Input 4 %44, '+
' '+
' ----
'+
' Input 5 %45, '+
' Input 6 %46, '+
' Input 7 %47, '+
' Input 8 %48, '+
' '+
' ----
'+
' Input 9 %49, '+
' Input 10 %50, '+
' Input 11 %51, '+
' Input 12 %52, '+
' '+
' ----
'+
' Input 13 %53, '+
' Input 14 %54, '+
' Input 15 %55, '+
' Input 16 %56, '+
' '+
'
'+ChangeImage('%43'));
</SCRIPT>
<form action="inputs.cgi" method="get">

</form>

</html>

Simvc

1 réponse

007Julien Messages postés 276 Date d'inscription mercredi 22 septembre 2010 Statut Membre Dernière intervention 8 janvier 2014 4
27 févr. 2011 à 22:48
Telle qu'elles sont placées les fonctions changeText et changeImage ne sont appelées qu'une fois au chargement de la page lors de l'exécution du document.writeln !

Ensuite pour changer une image, il n'est pas nécessaire de modifier tout le code d'affichage mais seulement le nom et chemin du fichier correspondant src. Il convient toutefois de se méfier (voir l'alert(i.src) pour constater que le navigateur peut afficher un chemin relatif ou complet) et de faire un test si la chaine "Green.jpg" est contenue dans ce chemin.

Enfin les développeurs préfèrent les boucles à des écritures longues et laborieuses...

Voici, un script mettant en oeuvre ces principes. Pour la suite, il faudrait d'abord comprendre l'utilité de toutes ces cases et codes (%41 et suivants...) pour conseiller utilement.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Untitled</title>
<style type="text/css">
body{font:12px/18px "Garamond";}
#pge{display:block;width:600px;margin 0 auto;}
</style>
</head>



[javascript:changeImage() Changer l'image]



<script type="text/javascript">
// contruire le tableau dynamiquement
var tab='';
for (i=0;i<16;i++){
if (i%4==0) tab+='----
'; // Si i est divisible par 4 nouvelle ligne
tab+='Case n°'+i+' , ';
if (i%4==3) tab+=''; // Si le reste vaut 3 fin de ligne
}
tab+='
';
alert(tab); // pour voir le code produit avant de l'insérer dans la page
document.getElementById('pge').innerHTML=tab;
function changeImage(){ // bascule sur Red.jpg et Green.jpg
var i=document.getElementById('imgVar'); // récupére l'objet image du DOM
alert(i.src)
if (/Green\.jpg/.test(i.src)) {i.src="Red.jpg";i.alt="image rouge";}
else {i.src="Green.jpg";i.alt="image verte";}
}
</script>

</html>
0
Rejoignez-nous