0

最初に、画像の上に白い背景の div を付けて画像を覆いたいと思います。ユーザーがボタンをクリックすると、オーバーレイ div の一部が削除され、下の画像の一部が表示されます。

そのため、画像が 4 つに分割されている場合、ボタンの 1 つがクリックされると、jQuery 内のその ID に関連する特定の座標セットの z-index が削除されます。CSSスタイルを使用してそれを行う方法がわかりません。

基本的な概要は次のとおりです。

<div id="buttons">
   <ul>
       <li id="0">button0</li>
       <li id="1">button1</li>
       <li id="2">button2</li>
       <li id="3">button3</li>
   </ul>
</div>
<div id="image">
    <div id="overlay"></div>
    <div id="reveal">
        <img src="http://science.nasa.gov/media/medialibrary/2010/03/31/sn_remnant_n63a.jpg/image_thumb" height="128" width="128"/>
    </div>
</div>
<style>
    #image{
        width: 128px;
        height: 128px;
        position: relative;
    }
    #overlay{    
        width:128px;
        height:128px;
        background-color:white;
        z-index: 10;
        position: absolute;
    }
</style>
4

6 に答える 6

0

画像の (1/4) ごとに 4 つの div でオーバーレイしてみませんか?

更新: これは役に立つかもしれません。オーバーレイを作成する代わりに、画像をピクセル座標で切り取ります。

Javascript を使用して画像を分割する

于 2013-08-08T20:32:42.560 に答える