[javascript] images 'visible' et 'hidden'

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