使用HTML和純javascript的大圖像嵌入小圖像

我想嵌入使用HTML和純javascript的大圖像的小圖像。它正在使用Chrome和Firefox。但它在IE 8中不起作用。我使用了z-index：-1，如http://www.w3schools.com/cssref/pr_pos_z-index.asp中所建議的那樣。任何人都可以幫助使用代碼片段嗎？使用HTML和純javascript的大圖像嵌入小圖像

請找到示例代碼片段，這是工作在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>

在此先感謝

來源

2012-10-03 Umasankar Natarajan

發佈您現在具有的代碼（在IE中不工作）。 –

在[JSFiddle]（http://jsfiddle.net/）中創建一小段代碼並在此處發佈 –

首先，我把風格bigIMG和smallIMG像含

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

注style.css中一個單獨的CSS文件，無論是圖像具有位置：絕對和bigIMG具有的z-index：-1所以，這將是放在其他內容的後面。

在HTML的HEAD元素

現在，包括你的style.css像這樣：

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

然後嘗試調整在CSS的「頂」和「左」參數正確定位圖片。您可以使用Chrome的元素檢查器來手動輸入座標

來源

2012-10-03 22:27:52 handyface

使用HTML和純javascript的大圖像嵌入小圖像

回答

相關問題