MissKuroime
Messages postés2Date d'inscriptionsamedi 25 février 2012StatutMembreDernière intervention26 février 2012
-
25 févr. 2012 à 15:57
Utilisateur anonyme -
1 mars 2012 à 13:39
Bonjour,
Je dois faire une galerie avec Javascript en utilisant ce qu'il y a ci-dessous, j'ai essayé des tonnes choses pour créer ma fonction showImg mais sans succès (et croyez moi j'y ai passé des dizaines d'heures); sachant qu'il faut que le titre et l'image change quand je clique sur les différents boutons. Quelqu'un pourrait-il m'aider s'il vous plaît? Merci d'avance un million de fois!
cs_jperre
Messages postés268Date d'inscriptionlundi 9 janvier 2006StatutMembreDernière intervention19 janvier 20172 26 févr. 2012 à 17:35
Il faut noter un certain nombre d'erreurs dans le code de votre page HTML :
1 - l'élément <script>, lorsqu'il est placé dans l'élément comme vous venez de le faire, s'exécute une seule fois lors de l'affichage de la page HTML. Dans ce cas, du fait qu'il contient une fonction, rien ne s'exécutera. Pour qu'une fonction Javascript puisse être appelée depuis n'importe ou dans l'élément , il faut que le script soit placé dans l'élément <head> de la page HTML.
2 - Vous n'avez pas placé de balise de fermeture de l'élément <head> avant la balise d'ouverture de l'élément , mais avant la balise d'ouverture de l'élément <style>, ce qui fait que cet élément n'est pas contenu dans l'élément <head> (alors que c'est obligatoire).
3 - Vous définissez des attributs id pour les images avec des chiffres de 1 à 5 . Rappel des règles pour définir la valeur d'un attribut id :
[list]
Doit commencer par une lettre A-Z ou a-z
Peut être suivi par : des lettres (A-Za-z), des chiffres (0-9), des tirets ("-"), des underscores ("_"), des deux points (":"), ou des points (".")
Les valeurs sont sensibles à la casse (MAJUSCULE différent de minuscule)
/list
Quelques conseils pratiques :
1 - Donner à chacune des images un attribut id="img0",id="img1",id="img2",id=img3",id="img4".
Cela doit ressembler à ceci :
<li></li>
...
<li></li>
2 - Inutile de créer un élément style dans l'élément <head> pour afficher ou effacer les images, le style peut être appliqué directement avec Javascript. Comme ceci :
<head>
<script type="text/javascript">
function showImg(ind)
{
for (var n=0;n<4) {
var idimg="img"+n;
if (idimg==ind) {
document.getElementById(idimg).style.dysplay="block";
document.getElementById("legend").innerHTML="Kiwi "+(n+1);
}
else {
document.getElementById(idimg).style.dysplay="none";
}
}
}
</script>
</head>
3 - Le menu devient :
<li>Image 1</li>
...
<li>Image 5</li>
4 - Le titre devient :
5 - On force l'affichage de la première image à l'ouverture de la page HTML comme ceci :
...
Tout cela devrait fonctionner correctement maintenant.
Bon courage!...