<script type="text/javascript">
function pixelAt(event)
{
        var obj =        new XMLHttpRequest();
       
        var img =        event.target; //Img => objet cliqué, donc l'image

        var x = event.layerX- img.offsetLeft; //Coordonnées de l'endroit du clic
        var y = event.layerY- img.offsetTop;
       
        //Ouvre la page pixel.php (voir plus bas)
        obj.open('GET','pixel.php?x='+x+"&y=" + y + '&img=' + img.src,true);
        obj.onreadystatechange  = function ()
        {
                if( obj.readyState      ==    4)
                        alert(obj.responseText); //Affiche le résultat obtenu à partir de pixel.php
        };
       
        obj.send(null);
       
}

</script>
<img src="avatar.jpg" id="img" onclick="pixelAt(event);"/>
<!--Au moment du clique , ça déclenche la fonction pixelAt qui va utiliser ajax pour afficher les constituants-->

if( isset( $_GET['x'],$_GET['y'],$_GET['img']) )
{
        $im     =    imagecreatefromjpeg($_GET['img']);  //Charge l'image
        $rgb = ImageColorAt($im, intval($_GET['x']), intval($_GET['y'])); //Selectionne le pixel demandé
        $r = ($rgb >> 16) & 0xFF; //Rouge (déplacement des bits dans la variable, difficile à expliquer, mais sache seulement que ça permet de sélectionner un des trois constituants
        $g = ($rgb >> 8) & 0xFF; //Vert ... idem
        $b = $rgb & 0xFF; //Bleu
        echo "$r,$g,$b"; //Affiche les constituants du pixel
        die(); //Sert à rien
}