Question

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

Answer 1

我会添加

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')" />

在DIV中翻转一个图像以使另一个图像显示在单独的DIV中

1 个答案: