rollover one image in a DIV to get another to show up in a separate DIV

Question

Im building a website where there is a photo of a girl and to the side are a group of glasses that you can try on over her face. Right now I have it so that when you rollover one of the glasses in the group they are highlighted, but I also want a pair to show up over the photo in separate DIV when you click it.

This is what i have for just the rollover:

    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>

This is the div and image I want to show up over the photo when a pair are clicked:

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

***How do i get the image in the second div to only show up when the image/rollover is clicked in the first div?

Answer 1

I would add

function clickedGlasses(glassesImage) {
    document.getElementById("glasses_overlay").src = glassesImage;
    document.getElementById("glasses_overlay").style.display = "block";
}

To your script tag at the top, and then

<img id="glasses_overlay" src="blank.png" style="display:none;">

Into your "glasses" div alongside the "faceGlasses" image (you'll need to position this over the top of the other div, either absolutely, or relatively)

And finally, change your "helm" img to

<img class="frame" src="images/helmStatic.jpg" id="helm" border="0" width="71" height="40" onmouseover="rollOver()" onmouseout="rollOut()" onclick="clickedGlasses('images/helmOverlay.png')" />