如何在另一個div上顯示一個阻塞的對象？

我正在使用prototype.js函數來裁剪一個隱藏的img。要裁剪的javascript功能是「裁剪」。它會影響身體上的圖像。將稱爲「裁剪」的HTML div = id是「裁剪」。另外，div =「thumb」正在執行與class =「top」不同的特定懸停。如何在另一個div上顯示一個阻塞的對象？

// *首先，它是這樣的：

<div class="thumb"> 
<span class="text">text text text text text text text</span> 
<div id="crop" class="top" style="width:900px; height:250px; /"> 
</div> 
</div>

// *和這裏被croped圖像：

<img id="img" src="bond.jpg" style="display:none" />

類= 「拇指」與存在使得帶有「文本文本文本」的小方塊。現在，發生的事情是，類「拇指」徘徊在div =「crop」後面的「文本文本」框中。

我已經嘗試了很多嘗試跳過需要把class = thumb做到這一點，但實際上div id =「crop」不能這樣工作。

在換句話說，我認爲既然DIV ID =「作物」已經執行該功能裁剪它編碼的方式出現，最好是離開它這樣

現在檢查croping功能：

<script language="javascript" type="text/javascript" src="prototype.js"></script> 
<script language="javascript" type="text/javascript"> 


function crop(img_id, crop_id, x, y, width, height) { 
$(crop_id).update('<img id="' + crop_id + '_img" src="' + 
$(img_id).getAttribute('src') + '" style="display:none" />'); 

var scale_x = $(crop_id).getWidth()/width; 
var scale_y = $(crop_id).getHeight()/height; 

$(crop_id).setStyle({ 
position: 'relative', 
overflow: 'hidden' 
}); 

$(crop_id + '_img').setStyle({ 
position: 'absolute', 
display: 'block', 
left: (-x * scale_x) + 'px', 
top: (-y * scale_y) + 'px', 
width: ($(img_id).getWidth() * scale_x) + 'px', 
height: ($(img_id).getHeight() * scale_y) + 'px' 
}); 
} 
</script>

至極的

將被要求bodyload：

<body onload="crop('img', 'crop', 0, 0, 1400, 300)">

SO畢竟是我真正要問的是：如何使「文字文字文字」框出現在所有的div的前面（作物和大拇指）？

這裏使用的CSS：

.top { 
position: absolute; 
font-family: verdana, arial, helvetica, sans-serif; 
font-size: 20pt; 
font-weight: bold; 
background:#FFFFFF; 
border: 1px dashed #000000; 
height: 5%; 
width: 100%; 
} 

.thumb { 
position: relative; 
width: 910px; 
height: 250px; 
border: 2px dashed #444; 
margin: 10px; 
float: left 
} 

.text, .text-js { 
display: none; 
position: absolute; 
bottom: 0; 
left: 0; 
width: 100%; 
background: #999; 
background: rgba(0,0,0,0.3); 
text-align: center 
} 
.thumb:hover .text { 
display: block; 
}

來源

2012-08-22 user1615791

我移植代碼到的jsfiddle。 This是有解決方案的人。

很難判斷作物是否正常工作，因爲我們沒有圖像，但我相信給<span class="text">高z-index（我用過100）可以解決問題。現在，當你將鼠標懸停在div上時，文本就會出現。

CSS：

text, .text-js { 
    display: none; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background: #999; 
    background: rgba(0,0,0,0.3); 
    text-align: center; 
    z-index:100; //add this 
}

來源

2012-08-22 04:52:43 Polyov

嘿感謝您的回覆。看看你創建的小提琴; ive更新了一個secound編輯：http://jsfiddle.net/724Vm/2/（如果這個鏈接不工作，試試：「fiddlelink」+/2 /「）它現在在本地正常工作;該作物適用於本地圖像參考/ src's。在小提琴中它看起來不起作用，你能想出如何讓它在你的小提琴中工作以便分享嗎？謝謝 – user1615791

除非你要在你的文章中上傳圖片，否則我不能創建一個可以顯示的小提琴如果它在你的本地文件系統上工作，那麼很好，你有這個鏡像，但是除非你把鏡像放在線上，否則我不能幫助你，因爲我沒有權限訪問你的文件系統上的鏡像 – Polyov

是的，是關於它：必須上傳圖像到網絡主機，它的工作原理。我也嘗試了遠程imgs，但它只能通過本地imgs工作 – user1615791

如何在另一個div上顯示一個阻塞的對象？

回答

相關問題