Cambiando avatar dinámicamente

En un sistema de usuarios podemos permitir la alternativa de que el dueño de la cuenta seleccione un avatar del servidor y que éste, se visualice a medida que vayamos cambiando entre las alternativas para que posteriormente pueda ser actualizado su perfil. Con DHTML y PHP podemos conseguir eso.

Los paso que podemos seguir son:
1- crear un directorio con las imágenes en nuestro servidor.
2- listar archivos del directorio filtrando formatos de imagen (PHP).
3- almacenar los nombres de los archivos en array (PHP).
4- llenar el elemento select con los nombres de las imágenes (PHP).
5- cambiar la imagen dinámicamente (DHTML)
- etc..

---

Esta es la función que use para conseguir los pasos 2 y 3.

// devuelve un array con las imagenes de un directorio dado
function ListImg()
{ 
   if ($handle = opendir(dirname(__FILE__).'/imagenes'))
   {
      while (false !== ($file = readdir($handle))) 
      {
         $ListFormat = array('jpg','gif','png','jpeg'); 
         $Format = explode('.',$file); 
         if (in_array(strtolower(end($Format)),$ListFormat))
            $FileList[]=$file;
      }
      closedir($handle);
   }
   sort($FileList);
   return $FileList;
}

La llamamos almacenando los datos retornados en un array:

$NewList = ListImg();

Esta sencila función es la que se encarga del cambio de imagen dinámicamente:

<script language="javascript" type="text/javascript">
function AssignImg()
{
   //  obtenemos la referencia a los elementos requeridos
   var img = document.getElementById('img');
   var sel = document.getElementById('selImg');

   // cambiamos la imagen
   img.src = 'imagenes/' + sel.value;
}
</script>

Al cargar la página mostramos la primera imagen de la lista:

<img id='img' src="<?php echo 'imagenes/',$NewList[0]; ?>" />

y acá llenamos el elemento select con la lista de imágenes del directorio especificado:

<select id='selImg' onchange='AssignImg();'>
<?php
   foreach ($NewList as $sImg)
      echo "<option value='$sImg'>$sImg</option>";
?>
</select>