0

画像の上にテキストを配置しようとしています。div に z-index を設定しましたが、位置を絶対に設定するまで何もしません。

<script>
function SwitchActiveDiv() {
    $("#SummaryDiv").css('display', 'none');
    $("#DetailsDiv").css('display', 'inline');
}
function SwapOpenImage(img) {
    var ToImage = $(img).attr('src').substring($(img).attr('src').lastIndexOf('/'));
    ToImage = ToImage.replace('closed', 'open');

    var FromImage = $("#OpenImage").attr('src').substring($(img).attr('src').lastIndexOf('/'));
    FromImage = FromImage.replace('open', 'closed');

    var OpenImageSrc = $("#OpenImage").attr('src');
    OpenImageSrc = OpenImageSrc.substring(0, OpenImageSrc.lastIndexOf('/')) + ToImage;

    var CloseImageSrc = $(img).attr('src');
    CloseImageSrc = CloseImageSrc.substring(0, CloseImageSrc.lastIndexOf('/')) + FromImage;

    $("#OpenImage").attr('src', OpenImageSrc);
    $(img).attr('src', CloseImageSrc);
}
</script>
<div id="SummaryDiv" style="width: 100%;">
<table>
<tr>
<td style="width: 712px;">
    <img src="~/media/C2MAssets/GettingStartedIntro/change-image.jpg" alt="" onclick="javascript:SwitchActiveDiv();" />
</td>
<td style="padding-left: 3px;">
    <img src="~/media/C2MAssets/GettingStartedIntro/family-image.jpg" alt="" onclick="javascript:SwitchActiveDiv();" />
</td>
<td style="padding-left: 3px;">
    <img src="~/media/C2MAssets/GettingStartedIntro/lifestyle-image.jpg" alt="" onclick="javascript:SwitchActiveDiv();" />
</td>
<td style="padding-left: 3px;">
    <img src="~/media/C2MAssets/GettingStartedIntro/play-image.jpg" alt="" onclick="javascript:SwitchActiveDiv();" />
</td>
</tr>
</table></div>
<div id="DetailsDiv" style="width: 100%; display: none;">
<table>
<tr>
<td rowspan="3">
    <img id="OpenImage" src="~/media/C2MAssets/GettingStartedDetails/change-open.jpg" alt="" />
    <div style="z-index: 20; left: 800px; top: 330px; position: relative;">
        <p style="font-family: Helvetica Neue; font-size: 35px; font-weight: bold; color: #ffffff;">Ready for an<br/> <i>Upgrade?</i></p>
    </div>
</td>
<td cellpadding="0" cellspacing="0">
    <img id="ClosedImage1" src="~/media/C2MAssets/GettingStartedDetails/family-closed.jpg" alt="" onclick="javascript:SwapOpenImage(this);" />
</td>
</tr>
<tr>
<td>
    <img id="ClosedImage2" src="~/media/C2MAssets/GettingStartedDetails/lifestyle-closed.jpg" alt="" onclick="javascript:SwapOpenImage(this);" />
</td>
</tr>
<tr>
<td>
    <img id="ClosedImage3" src="~/media/C2MAssets/GettingStartedDetails/play-closed.jpg" alt="" onclick="javascript:SwapOpenImage(this);" />
</td>
</tr>
</table></div>

次に、位置を設定すると、うまくいきます。最初、上部の div は表示されず、jquery によって有効になります。上部の div が有効化されている場合、テキスト div はまだ表示されておらず、jquery がアクティブ化されてテキストが上にある画像を置き換えるまで表示されず、表示されるようになります。

4

1 に答える 1

1

コンテナは相対的に配置する必要があり、テキストを含む div は絶対的である必要があります。

これを試して：

HTML:

<table border="1">
    <tr>
        <td>Placeholding text</td>
        <td>Another placeholder</td>
    </tr>

    <tr>
        <td>Image next to me</td>
        <td class="img-container">
            <img src="http://lorempixel.com/400/200" />
            <span class="overlay-text">
                Text goes here
            </span>
        </td>
    </tr>
</table>

CSS:

.img-container
{
    position: relative;
}

.overlay-text
{
    font-family: Arial;
    position: absolute;
    top: 10px;
    left: 10px;
    color: black;
    text-shadow: 0 0 5px white;
    font-size: 20px;
    display: none;
}

これがフィドルです。

于 2013-09-12T20:55:47.377 に答える