0

現在、解決され更新されています。主な問題は CSS の衝突でした。

画像を表示するテーブルを作成し、JQ でのマウス入力に基づいて中央の div で画像が変化しますが、画像をメイン セルに合わせることができないようです。

望ましい結果は、各画像が中央に表示されるため、スペースに完全に収まるはずですが、固定ピクセル サイズを使用すると、ブラウザーの互換性に問題があり、レイアウトが異なることに気付きました。パーセンテージで試してみたところ、意図したとおりに機能しないようです。

css % と固定ピクセル h/w を使用してみましたが、どちらも意図したとおりに機能しません。

間違った方法で目的の結果に近づいていますか?

すべてのアドバイス、ありがとう！

http://www.digitalterrorrecords.com/home/featureTable.php << 以下のコードの例

html

<div>
    <table> 
    <tr>

    <td>
    <? // Stacked Left BEGIN ?>
    <table class=''>

        <tr>
            <td class='smallbox'><a href='#lf_1' class="contact"><img class='small_feat' src='<? echo $ft_img_1 ;?>'></img></a></td> <!-- Artwork  1   -->
        </tr>

        <tr>
            <td class='smallbox'><a href='#lf_2' class="contact"><img class='small_feat' src='<? echo $ft_img_2 ;?>'></img></a></td> <!-- Artwork  2   -->
        </tr>

        <tr>
            <td class='smallbox'><a href='#lf_3'  class="contact"><img class='small_feat' src='<? echo $ft_img_3 ;?>'></img></a></td> <!-- Artwork  3   -->
        </tr>

        <tr>
            <td class='smallbox'><a href='#lf_4'  class="contact"><img class='small_feat' src='<? echo $ft_img_4 ;?>'></img></a></td> <!-- Artwork  4   -->
        </tr>

    </table>
    <? // Stacked Left END ?>
    </td>



    <td>
    <? // Main feature BEGIN ?>
    <table>
        <tr> 
            <td class='mainbox'>
            <div>

                        <!--
                        <div> <? // LOAD BACKGROUND ?>
                        <img src='<? echo $ft_img_bg ;?>'></img>
                        </div>
                        -->

                        <div id='lf_1' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
                        <img class='large_feat' src='<? echo $ft_fs_img_1 ;?>'></img>
                        </div>

                        <div id='lf_2' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
                        <img class='large_feat' src='<? echo $ft_fs_img_2 ;?>'></img>
                        </div>

                        <div id='lf_3' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
                        <img class='large_feat' src='<? echo $ft_fs_img_3 ;?>'></img>
                        </div>

                        <div id='lf_4' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
                        <img class='large_feat' src='<? echo $ft_fs_img_4 ;?>'></img>
                        </div>

                        <div id='lf_5' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
                        <img class='large_feat' src='<? echo $ft_fs_img_5 ;?>'></img>
                        </div>

                        <div id='lf_6' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
                        <img class='large_feat' src='<? echo $ft_fs_img_6 ;?>'></img>
                        </div>

                        <div id='lf_7' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
                        <img class='large_feat' src='<? echo $ft_fs_img_7 ;?>'></img>
                        </div>

                        <div id='lf_8' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
                        <img class='large_feat' src='<? echo $ft_fs_img_8 ;?>'></img>
                        </div>
                `</div>
            </td>
        </tr> 
    </table>
    <? // Main feature END?>
    </td> 

    <? // Stacked Right BEGIN ?>
    <td>

    <table>

        <tr>
            <td class='smallbox'><a href='#lf_5' class="contact"><img class='small_feat' src='<? echo $ft_img_5 ;?>'></img></a></td> <!-- Artwork  5   -->
        </tr>

        <tr>
            <td class='smallbox'><a href='#lf_6' class="contact"><img class='small_feat' src='<? echo $ft_img_6 ;?>'></img></a></td> <!-- Artwork  6   -->

        <tr>
            <td class='smallbox'><a href='#lf_7' class="contact"><img class='small_feat' src='<? echo $ft_img_7 ;?>'></img></a></td> <!-- Artwork  7   -->
        </tr>

        <tr>
            <td class='smallbox'><a href='#lf_8' class="contact"><img class='small_feat' src='<? echo $ft_img_8 ;?>'></img></a></td> <!-- Artwork  8   -->
        </tr>

    </table>
    </td><? // Stacked Right END?>

    </tr>
    </table>
</div>

CSS

td div {

    height: 100%;
}

.small_feat {
        width: 200px;
        height: 200px;

        border: solid 2px #ffffff;

}

.large_feat { 

        width: 800px;
    height: 800px;

}

a.selected {
    background-color:#1F75CC;
    color:white;
    z-index:100;
}

.messagepop {
    background-color:#FFFFFF;
    cursor:default;
    display:none;
    position:absolute;
    z-index:50;

}

.smallbox {
        width: 200px;
        height: 200px;
}

JQ

$.fn.slideFadeToggle = function (easing, callback) {
    return this.animate({
        opacity: 'toggle',
        width: 'toggle'
    }, "fast", easing, callback);
};

$(function () {
    function select($link) {
        $('.contact').each(function(index, l) {
            var $pane = $($(l).attr('href'));
            if ($pane.is(':visible')) {
                $pane.slideFadeToggle();
            }
        });
        $('.contact').removeClass('selected');
        $link.addClass('selected');
        $($link.attr('href')).slideFadeToggle();
    }

    function deselect($link) {
        $($link.attr('href')).slideFadeToggle(function () {
            $link.removeClass('selected');
        });
    }

    $('.contact').mouseenter(function () {
        var $link = $(this);
        if ($link.hasClass('selected')) {
            deselect($link);
        } else {
            select($link);
        }
        return false;
    });

    $('.close').live('click', function () {
        deselect();
        return false;
    });
});
4

4 に答える 4

0

これをチェックしてください。前述のとおり、position:absolute が問題でした。

.messagepop {
      background-color:#FFFFFF;
      cursor:default;
      display:none;
      position:relative;
      z-index:50;
    width:100%;

    }
于 2013-05-30T16:10:19.967 に答える