Question

我想使用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>

提前致谢

Answer 1

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

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

请注意，两个图像的位置都是绝对的，而bigIMG的z-index：-1，因此它将被放置在其他内容的后面。

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

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

然后尝试调整css中的“顶部”和“左侧”参数以正确定位图像。您可以使用chrome的元素检查器手动键入坐标

使用HTML和普通的javascript在小图像上嵌入小图像

1 个答案: