Rechercher : dans
Par :

[javascript] images 'visible' et 'hidden'

Dernière réponse le 20 oct 2005 à 15:58:20 Geronimo, le 20 oct 2005 à 15:32:26 
 Signaler ce message aux modérateurs

Bonjour,

Dans un site ecrit en HTML, j'affiche trois images :

<img src="..." name="riri">
<img src="..." name="fifi">
<img src="..." name="loulou">


Dans mon script, je definis deux groupes d'images, sous forme d'array de String :

var groupe1 = ["riri","fifi"]
var groupe2 = ["riri","loulou"]


j'ai cree deux fonctions qui modifie l'attribut 'visibility' de mes trois images pour afficher ou non les images.

affiche1 () affiche les images du groupe1
affiche2 () affiche les images du groupe2


Pour l'instant, je parcours toutes mes images et je teste si le nom de l'image se trouve dans un groupe et je modifie l'attribut 'visibility' en consequence :

functiun affiche1()
{
      var i;
      for (i=1;i<=3;i++)
      {
                var image = document.images[i];
                var image_name = document.images[i].name;
                if (isIn(image_name,groupe1))
                {
                         image.style.visibility='visible';
                   }
                   else image.style.visibility='hidden';
      }
}
function isIn(str,array)
{
        var bool = false;
        var j;
        var n= array.length;
         for (j=0;j<n;j++) bool = (bool | str==array[j]);
                return bool;
 }


Problemes :
1. c'est pas super
2. je risque d'affecter d'autres images de ma page

Avez-vous une solution ?

Par exemple, acceder a une image par son nom en String :
du genre

document.images.groupe1[i].visibility


Merci d'avance pour vos conseils et votre aide

Meilleures réponses pour « [javascript] images 'visible' et 'hidden' » dans :
Différence entre display:none et visibility:hidden Voir Les deux attributs CSS display:none et visibility:hidden permettent tous deux de masquer l'affichage d'un élément en CSS dans le navigateur. Néanmoins, il existe une subtile nuance : visibility: hidden rend le bloc concerné invisible....
[Vista] Créer une image complète du système VoirIntroduction Sauvegarde Restauration Informations complémentaires Introduction Les éditions Professionnelles et intégrales de Vista ont la possibilité de créer une image complète (ou partielle) de vos partitions. C'est très utile dans...
[Windows] Affichage de l'aperçu des images en miniatures VoirSi jamais Microsoft Windows n'affiche plus les images en miniatures, il suffit de suivre la procédure ci-dessous : Faire un clic droit sur une image, puis, dans le menu choisir "Ouvrir avec". Cliquez sur "Choisir le programme" et choisissez "Aperçu...
Windows 7 : Découper une image dans une capture d'écran VoirAvant tout faire une capture d'écran : Appuyer sur la touche Ctrl + PrtSc SysRq. Cette touche (PrtSc SysRq) est souvent à côté de la touche Pause. Puis allez dans Paint (menu Démarrer -< Tous les programmes -< Accessoires -< Paint). Une fois...
Télécharger DriveImage XML VoirDriveImage XML est un programme permettant de faire des images du système (partitions et lecteurs logiques) à des fins de sauvegarde, à la manière de Norton Ghost. Ce programme permet : De créer des images des lecteurs logiques et des...
Javascript - Introduction au langage Javascript VoirQu'est-ce que le Javascript? Le Javascript est un langage de script incorporé dans un document HTML. Historiquement il s'agit même du premier langage de script pour le Web. Ce langage est un langage de programmation qui permet d'apporter des...

1

GallyNet, le 20 oct 2005 à 15:38:55

Tu peut utilisé la fonction document.getElementsByName() qui te renvoie un tableau avec tout les éléments qui ont le nom passé en paramètre.
Ou tu utilise la fonction document.getElementById() qui te renvoie éléments qui possede l'id passé ne paramètre. Il faut que t'est image possede l'attribut id est qu'il soit unique :

<img src="..." id="riri" />

Répondre à GallyNet

2

StreM, le 20 oct 2005 à 15:51:29

Attention, suivant les navigateurs, il me semble que tu n'obtiendra pas le résultat escompté :
Il faut déclarer l'attribut style avant de pouvoir le changer :
<img id="photo" style="display: block;">
Alors le
document.getElementById('photo').style.display = "none";
fonctionnera.
Ou alors utilise la fonction "setAttribute".
Bon courage !

Moins le blanc est intelligent, plus le noir lui parait bête

Répondre à StreM

3

 Geronimo, le 20 oct 2005 à 15:58:20

Merci a vous deux.

la fonction getElementsByName est celle qu'il me fallait.

l'attribut 'visibility' est initialisee lors de la creation de l'image. merci pour la precision.

Encore merci

Répondre à Geronimo