javascript - DIV 内の 1 つの画像をロールオーバーして、別の DIV に別の画像を表示する

Question

私は女の子の写真があり、その横にあなたが彼女の顔の上に試着できる眼鏡のグループがあるウェブサイトを構築しています. 現在、グループ内のメガネの1つをロールオーバーすると強調表示されるようにしていますが、クリックすると別のDIVの写真の上にペアが表示されるようにしたい.

これは私がロールオーバーのために持っているものです:

    function rollOver()
    {
        document.getElementById("helm").src ="images/helmOver.jpg";
    }

    function rollOut()
    {
        document.getElementById("helm").src ="images/helmStatic.jpg";
    }

</script>

<div id="framestyle">
<img class="frame" src="images/helmStatic.jpg" id="helm" border="0" width="71" height="40" onmouseover="rollOver()" onmouseout="rollOut()"/>
</div>

これは、ペアがクリックされたときに写真の上に表示したい div と画像です。

<div id="glasses">
<img src="images/faceGlasses.png">
</div>

***最初の div で画像/ロールオーバーがクリックされたときにのみ、2 番目の div の画像が表示されるようにするにはどうすればよいですか?