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....
Javascript - Librairies d'effets pour vos images VoirAu gré de vos explorations du web, vous avez vu de superbes effets de présentation des images. Et ça vous plairaît bien de pouvoir proposer les mêmes à vos visiteurs. Voici quelques solutions en Javascript couplées à des CSS. Elles sont plus...
[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] Modifier le chemin de Mes documents, Mes images, etc. Voir1 - Mes documents, mes images, ma musique, etc. 2 - Autres répertoires 2.1 Avec le logiciel TweakUI (Sous XP seulement) 2.2 À la main 1 - Mes documents, mes images, ma musique, etc. Sous XP, pour changer l'adresse de "Mes documents" : ...

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
Collection CommentÇaMarche.net