次のCSS divマスクをイメージスライダに配置しました。CSSの下のスライダにアクセスできる100%幅のバックグラウンドマスク
<div class="contentMaskWrapper" >
<div class="contentMaskLeft"></div>
<div class="contentMaskRight"></div>
</div>
<div id="slider">
slider content
</div>
.contentMaskWrapper{
width:100%;
overflow:hidden;
position:absolute;
z-index:3;
height:564px;
}
.contentMaskLeft{
background:url(../images/mask.png) repeat;
height:564px;
width:100%;
position:absolute;
left:50%;
margin-left:425px;
z-index:999;
}
.contentMaskRight{
background:url(../images/mask.png) repeat;
height:564px;
width:100%;
position:absolute;
right:50%;
margin-right:425px;
z-index:999;
}
#slider{
width:850px;
height:564px;
margin:0 auto 20px;
position:relative;
clear:both;
overflow:hidden;
width:100%; }
視覚的に正しく表示されているマスクは、イメージスライダの両側にあります。スライダにはリンクがあり、このリンクはFF、Safari、Chrome(MacまたはPC)ではなくIE(7+)でのみ動作します。
希望はこれが理にかなっています。詳細が必要な場合はお知らせください。助けをお待ちしています。 ありがとう、 Jamie