Javascript 如何在另一个div上显示被阻止的对象？_Javascript_Css

Javascript 如何在另一个div上显示被阻止的对象？

javascript css

Javascript 如何在另一个div上显示被阻止的对象？,javascript,css,Javascript,Css,我正在使用prototype.js函数裁剪隐藏的img。裁剪的javascriptfunction是“裁剪”。它在body onload上裁剪图像。将调用“crop”的HTML div=id是“crop”。此外，div=“thumb”正在执行与class=“top”不同的特定悬停 //*首先是这样的： <div class="thumb"> <span class="text">text text text text text text text</span>

我正在使用prototype.js函数裁剪隐藏的img。裁剪的javascriptfunction是“裁剪”。它在body onload上裁剪图像。将调用“crop”的HTML div=id是“crop”。此外，div=“thumb”正在执行与class=“top”不同的特定悬停

//*首先是这样的：

<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>

我将您的代码移植到JSFIDLE。就是那个有解决方案的人

很难判断裁剪是否正常工作，因为我们没有图像，但我相信给

一个高

z指数（我用了100）可以解决问题。现在，当您将鼠标悬停在div上时，将显示文本
CSS:
嘿，谢谢你的回复。看看你创作的小提琴；我更新了一个secound编辑：（如果这个链接不起作用，试试：“fiddlelink”+/2/”）它现在在本地正常工作；裁剪适用于本地映像ref/src。在fiddle中它似乎不起作用。你能想出如何使它在你的fiddle中工作以便共享吗？你在帖子中上传映像真是吃力不讨好，我无法创建一个可以显示映像的fiddle。如果它在你的本地文件系统中工作，那就太好了。你知道吗有图像。但是除非你把图像放在网上，否则我帮不了你，因为我无法访问你文件系统上的图像。是的，就是这样：把图像上传到网络主机，它可以工作。我也尝试过远程IMG，但它只能通过本地IMG工作。是的，就是这样：图像必须属于同一个主机目录，它可以工作。我也尝试远程img，但它只能通过“/directory/img.jpg”工作。我想它只能通过这种方式工作，因为crop函数无法获取远程文件的img.widt和img.height？
<img id="img" src="bond.jpg" style="display:none" />

<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>

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

.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;
}

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
}