0

少し問題があります。クリックすると表示される非表示の div のシステムをセットアップしました。

合計があります：

  • 6 フレーム : 右下の編集可能なテキスト メニュー (ノートル コレクション)
  • 各色 7 色 : フレーム内の色の小さな四角で変更可能
  • 2 つの異なる角度 (色の小さな四角形をクリックすると、表示角度が変わります)
  • 製図用の写真 14 枚 (左下の正方形フォーマット)

読み込む画像が 100 枚以上あります (!)。

最適化しても (フレームごとに 80kb、写真撮影ごとに 200kb、テクニカル ドローイング用に 60kb の画像)、20 MB の ADSL 接続ですべての画像を表示するのに約 4 ～ 5 秒の遅延があります。すべての非表示の div のコンテンツ全体をロードします...ただし、div:block のみをロードする必要があります (したがって、コレクション ページをクリックすると 2 つの div のみが読み込まれます)。div:hidden は、div:block に変わるときにロードされます...

何が起こるかの視覚的な部分: http://i.stack.imgur.com/XgDs7.png

HTML の一部を次に示します。

<div id="passionnee-couleurs">
<a onclick='collectionDiv("passionnee-beige-2");'><img src="../images/collection/ico/couleur-beige-vue.png"></a>
<a onclick='collectionDiv("passionnee-bleue");'><img src="../images/collection/ico/couleur-bleue.png"></a>
<a onclick='collectionDiv("passionnee-ecaille");'><img src="../images/collection/ico/couleur-ecaille.png"></a>
<a onclick='collectionDiv("passionnee-ecaille2");'><img src="../images/collection/ico/couleur-ecaille2.png"></a>
<a onclick='collectionDiv("passionnee-grise");'><img src="../images/collection/ico/couleur-grise.png"></a>
</div>

div を表示するためのリンク (合計 6 つ):

<a onclick="collectionDiv('premiere-beige');cotationsDiv('premiere-cotations');">PREMIÈRE</a>
<a onclick="collectionDiv('passionnee-beige');cotationsDiv('passionnee-cotations');">PASSIONNÉE</a>

JS部分：

    

function collectionDiv(id)
         {
             document.getElementById('passionnee-beige').style.display = "none";
             document.getElementById('passionnee-beige-2').style.display = "none";
             document.getElementById('passionnee-bleue').style.display = "none";
             document.getElementById('passionnee-bleue-2').style.display = "none";
             document.getElementById('passionnee-ecaille').style.display = "none";
             document.getElementById('passionnee-ecaille-2').style.display = "none";
             document.getElementById('passionnee-ecaille2').style.display = "none";
             document.getElementById('passionnee-ecaille2-2').style.display = "none";
             document.getElementById('passionnee-grise').style.display = "none";
             document.getElementById(id).style.display = "block";
         }

CSS の一部:

    /* PASSIONNEE */
    #passionnee-beige {
        position:absolute;
        width:994px;
        height:532px;
        margin:auto;
        display:block;
        background-image:url(../images/collection/montures/passionnee-beige.jpg);
}
     
    #passionnee-beige-2 {
        position:absolute;
        width:994px;
        height:532px;
        margin:auto;
        display:none;
        background-image:url(../images/collection/montures/passionnee-beige-2.jpg);
}
     
    #passionnee-bleue {
        position:absolute;
        width:994px;
        height:532px;
        margin:auto;
        display:none;
        background-image:url(../images/collection/montures/passionnee-bleue.jpg);
}

わからないことがあれば遠慮なく聞いてください。

ご協力ありがとうございました！

皆さん、今晩は！

編集: http://jsfiddle.net/dktdesign/2B3Rw/12/

4

1 に答える 1

0

最終的な目標は、2 つの div を同時に変更するための 1 つのテキスト (合計 6) リンク (フレーム + 製図) です。そして、これらの 2 つの div には、これらの同じ div にコンテンツをロードするための小さなボタンがあります (ねじれていますか?)。ここで全ページを見ることができます： http://dktdesign.com/les-ptites-pupilles/site/fr/collection.html

于 2013-11-15T07:00:22.703 に答える