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 のスタイルを style.css のような別の 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' パラメータを調整して、画像が正しく配置されるようにします。クロムの要素インスペクターを使用して、その場で座標を手動で入力できます

于 2012-10-03T22:27:52.570 に答える