0

非表示の img を切り取るために、prototype.js 関数を使用しています。トリミングするJavaScript関数は「crop」です。ボディオンロードで画像をトリミングします。"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>

//* トリミングする画像は次のとおりです。

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

そこの class="thumb" は、「text text text」で小さなボックスを作成します。今、何が起こっているかというと、クラス「thumb」が div="crop" の後ろに「text text」のボックスをホバーします。

class=thumb を配置する必要性をスキップするために多くのことを試みましたが、実際には div id="crop" はこのようには機能しません。

つまり、 div id="crop" はそこに書かれている通りにトリミングする機能を既に実行しているので、そのままで良いと思います

トリミング機能を確認します。

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

結局のところ、私が本当に聞きたいのは、「テキスト テキスト テキスト」ボックスをすべての 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;
}
4

1 に答える 1

0

私はあなたのコードをjsFiddleに移植しました。これが解決策を持っているものです。

画像がないため、切り抜きが適切に機能しているかどうかを判断するのは難しいですが<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-22T04:52:43.270 に答える