0

我正在建立一个网站，上面有一张女孩的照片，旁边有一副眼镜，你可以在她脸上试戴。现在我有它，所以当你翻转组中的一个眼镜时，它们会突出显示，但我还希望当你单击它时，一副眼镜会显示在单独的 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 中的图像仅在第一个 div 中单击图像/翻转时显示？

4

1 回答 1

0

我会补充

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

到顶部的脚本标签，然后

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

在“faceGlasses”图像旁边的“眼镜”div中（你需要将它放在另一个div的顶部，绝对或相对）

最后，将您的“掌舵”img 更改为

<img class="frame" src="images/helmStatic.jpg" id="helm" border="0" width="71" height="40" onmouseover="rollOver()" onmouseout="rollOut()" onclick="clickedGlasses('images/helmOverlay.png')" />
于 2013-05-28T22:42:05.560 回答