007Julien
Messages postés276Date d'inscriptionmercredi 22 septembre 2010StatutMembreDernière intervention 8 janvier 20144 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>