2

我想使用 HTML 和纯 javascript 在大图像上嵌入小图像。它在 Chrome 和 Firefox 中运行。但它在 IE 8 中不起作用。我按照http://www.w3schools.com/cssref/pr_pos_z-index.asp中的建议使用了 z-index:-1 。任何人都可以帮助代码片段吗？

请找到示例代码片段，它适用于 Chrome、Safari、Firefox，但不适用于 IE8

<html>
<head>
<title>Image over Image</title>
<script type="text/javascript">
    function loadIMG(){
        var backgroundIMG = document.getElementById("bigIMG");
        var boundObject = backgroundIMG.getBoundingClientRect();

        var img = document.getElementById("smallIMG");
        img.style.top = (boundObject.top + (boundObject.height * 0.2))+"px";
        img.style.left = (boundObject.left  + (boundObject.width * 0.2))+"px";
        img.style.height = (boundObject.height * 0.6)+"px";
        img.style.width = (boundObject.width *0.6)+"px";
        img.style.position = "absolute";
        img.style.display = "inline";

    }
</script>
</head>
<body onclick="loadIMG();">
<center><h1>Image on Image</h1>
<h6>Click on the page to embed small image on big image</h6></center>
<img id="bigIMG" src="http://www.sxc.hu/pic/m/t/tu/tulsaeupho/1206951_blue_flowers_splatter_and_swirls_background_set_1.jpg">
<img id="smallIMG" src="http://i52.photobucket.com/albums/g14/1kevinm/small_unittus_sm_icon.png" style="display:none">
</body>
</html>

提前致谢

4

1 回答 1

2

首先，我将 bigIMG 和 smallIMG 的样式放在单独的 CSS 文件中，例如 style.css 包含

#bigIMG {
  z-index: -1;
  posistion:absolute;
}
#smallIMG {
  position: absolute;
  display: block;
}

请注意，两个图像都有 position:absolute 并且 bigIMG 有 z-index:-1 以便将其放置在其他内容的后面。

现在在您的 html 的 HEAD 元素中，包含您的 style.css，如下所示：

<link rel="stylesheet" type="text/css" href="styles/style.css">

然后尝试调整css中的'top'和'left'参数以正确定位图像。您可以使用 chrome 的元素检查器即时手动输入坐标

于 2012-10-03T22:27:52.570 回答