1

我遇到了一些代码和旧 js 的问题。我复制了网页并更改了代码,但是在新文件中选择了相应的缩略图时,大图像下没有出现文本:http: //jsfiddle.net/dEW75/

                            <script type="text/javascript">
    function swapImage(imgID)
    {
        var itemImage   = document.getElementById('itemImage');
        var itemText    = document.getElementById('itemText');
        var itemCaption = document.getElementById('itemCaption');

        itemImage.src =              "images/finishing_touches/color_stain/textured/textured" + imgID + "_sm.jpg";

            if(imgID == 1)
            {
                itemText.innerHTML    = 'Latitude East';
                itemCaption.innerHTML = ''};

            if(imgID == 2)
            {
                itemText.innerHTML    = 'Summer Breeze';
                itemCaption.innerHTML = ''};

            if(imgID == 3)
            {
                itemText.innerHTML    = 'Winter Cherry';
                itemCaption.innerHTML = ''};

            if(imgID == 4)
            {
                itemText.innerHTML    = 'Autumn Leaves';
                itemCaption.innerHTML = ''};

            if(imgID == 5)
            {
                itemText.innerHTML    = 'Boardwalk';
                itemCaption.innerHTML = ''};

            if(imgID == 6)
            {
                itemText.innerHTML    = 'Driftwood';
                itemCaption.innerHTML = ''};

            if(imgID == 7)
            {
                itemText.innerHTML    = 'Canvas Linen';
                itemCaption.innerHTML = ''};

            if(imgID == 8)
            {
                itemText.innerHTML    = 'Linen Flaxseed';
                itemCaption.innerHTML = ''};

            if(imgID == 9)
            {
                itemText.innerHTML    = 'Silver Flannel';
                itemCaption.innerHTML = ''};

            if(imgID == 10)
            {
                itemText.innerHTML    = 'Onyx';
                itemCaption.innerHTML = ''};

                            if(imgID == 11)
            {
                itemText.innerHTML    = 'East Indian Laurel';
                itemCaption.innerHTML = ''};

                              if(imgID == 12)
            {
                itemText.innerHTML    = 'Sandalwood';
                itemCaption.innerHTML = ''};

                              if(imgID == 13)
            {
                itemText.innerHTML    = 'Nora Creek Oak';
                itemCaption.innerHTML = ''};

                                 if(imgID == 14)
            {
                itemText.innerHTML    = 'Midnight Espresso';
                itemCaption.innerHTML = ''};
                    }
    </script>
                            <h1 class="galleryTitle">Color &amp; Stain</h1>
                            <div class="subMenu">
                            <ul>
                                <li><a href="color_stain1.htm">solid color melamine</a> </li>
                                <li><a href="color_stain3.htm">wood tone melamine</a></li>
                                <li><a class="active" href="color_stain_textured_1.htm">textured melamine</a></li>
                                <li><a href="color_stain.htm">wood veneer</a></li>
                            </ul>
                            </div>
                            <div class="galleryContainer2">
                            <div class="galleryNavContainer2">
                            <div class="subtitle">
                            <p>Textured Color</p>
                            </div>
                            <div class="thumbs">
                            <div class="pageDetail1">
                            <p>page 1 of 3</p>
                            </div>
                            <div class="img">
                            <a href="javascript:swapImage(&quot;1&quot;)">
                            <img src="images/finishing_touches/color_stain/textured/textured1_th.jpg" alt="Latitude East" title="Latitude East" />
                            <span class="imgText">Latitude East</span>
                            </a>
                            </div>
                            <div class="img">
                            <a href="javascript:swapImage(&quot;11&quot;)">
                            <img src="images/finishing_touches/color_stain/textured/textured11_th.jpg" alt="Summer Breeze" title="East Indian Laurel" />
                            <span class="imgText">East Indian Laurel</span>
                            </a>
                            </div>
                            <div class="img">
                            <a href="javascript:swapImage(&quot;12&quot;)">
                            <img src="images/finishing_touches/color_stain/textured/textured12_th.jpg" alt="Sandalwood" title="Sandalwood" />
                            <span class="imgText">Sandalwood</span>
                            </a>
                            </div>
                            <div class="img">
                            <a href="javascript:swapImage(&quot;13&quot;)">
                            <img src="images/finishing_touches/color_stain/textured/textured13_th.jpg" alt="Nora Creek Oak" title="Nora Creek Oak" />
                            <span class="imgText">Nora Creek Oak</span>
                            </a>
                            </div>
                            <div class="img">
                            <a href="javascript:swapImage(&quot;14&quot;)">
                            <img src="images/finishing_touches/color_stain/textured/textured14_th.jpg" alt="Midnight Espresso" title="Midnight Espresso" />
                            <span class="imgText">Midnight Espresso</span>
                            </a>
                            </div>
                            </div>
                            <div class="page">
                            <ul style="margin: 0px auto; padding: 0px; text-align: center;">
                                <li class="previous"></li>
                                <li class="next"><a href="color_stain_textured.htm">page</a>
                                </li>
                            </ul>
                            </div>
                            </div>
                            <div class="imgContainer2">
                            <div class="img"><img alt="" id="itemImage" name="IMG1" /></div>
                            <div class="text" style="margin-top: 13px; padding: 2px 0px 0px;">
                            </div>
                            </div>
                            </div>
                            <script type="text/javascript">
<!--
    var imgID = "1";
    swapImage(imgID);
//-->
                            </script>
                            </div>
                            <p style="margin-right: 15px;">
                            <strong>PLEASE NOTE</strong>: Items in our gallery are selected to show the variety of
                            our products. If you don't see exactly what you have in mind, most likely we have it
                            or can order it for you.
                            </p>
                            <div style="float: right; text-align: right;">
                            <p>
                            <a href="index.htm">View our other galleries</a> &raquo;<br />
                            <a href="http://www.marketingresponse.com/closetos/contact.asp">Schedule a complimentary in-home design consultation</a> &raquo;<br />
                            <a href="../locations.htm">Visit our Chicago area showrooms</a> &raquo;
                            </p>
                            </div>
                            <script language="JavaScript"><!--
     ThisPage = Gallery;
     GroupChange("on",ThisPage);
    //-->
                            </script>

当在此页面上选择缩略图时,我需要文本显示在大图像下方:http: //jsfiddle.net/qVGFV/

4

1 回答 1

0

您缺少在 html 中显示文本的元素。由于它不存在,因此尝试添加文本什么也不做。使用 class="imgContainer2" 将其添加到您的 div

<p id="itemText" style="padding-bottom: 0px;"></p>
于 2013-04-02T12:11:55.740 回答