1

我真的希望你们中的一位 JS 大师能够阐明这个问题。

目前我正在开发一个在第一列中有 5 个文本行的小表格的网页。以及第二列中的图像。

客户要求以下内容：

  1. 打开页面，“默认图片”应该会显示
  2. 滚动文本，“临时图像”应显示
  3. 滚出文本，“默认图像”应该显示
  4. 单击文本，该临时图像应成为“默认图像”

我能够实现目标#1、#2 和#3。然而，为了能够实现#4，客户端的旧代码只是制作了相同的页面，每个页面都有不同的“默认图像”。并分配每个链接指向该页面。

是否可以在不重复页面的情况下实现目标 4？也许，可能有一个javascript代码刷新页面，并根据点击的链接（文本）更改默认图像？

我还有什么意义吗？抱歉，我几乎没用过论坛。我不确定我是否在这里使用了正确的礼仪。

这是我正在使用的代码：

<script type="text/javascript">
function changeIt(imageName,objName)
{
var obj = document.getElementById(objName);
var imgTag = "<img src=' "+imageName+" ' border='0' height='207' width='400'/>";
obj.innerHTML = imgTag;
return;
}
</script>
<table cellpadding="6" cellspacing="6">
        <tbody>
            <tr>
                <td width="33%" valign="top" nowrap><span style="font-size: 12pt;"> <a id="one" href="#"
                OnMouseOver="changeIt('/images/stories/article/compressor_experience.jpg','image1');"
                onClick="changeIt('/images/stories/article/compressor_experience.jpg','image1');" 
                OnMouseOut="changeIt('/images/stories/article/composite_experience.jpg','image1');" 
                style="text-decoration: none;"><strong>Compressor Stations</strong></a></span></td>
                <td valign="top" nowrap><strong>4,000,000 hp</strong> </td><td rowspan="5" valign="top">&nbsp;</td>
                <td rowspan="5" valign="top">
                    <div id="image1"><img src="images/stories/article/composite_experience.jpg" alt="one" border="0" height="207" width="400" /></div></td>
            </tr>
            <tr>
                <td width="33%" valign="top" nowrap style="border-top:1px solid #bbb;"><span style="font-size: 12pt;"><a id="two" href="#" 
                OnMouseOver="changeIt('/images/stories/article/export_experience.jpg','image1');" 
                onClick="changeIt('/images/stories/article/export_experience.jpg','image1');" 
                OnMouseOut="changeIt('/images/stories/article/composite_experience.jpg','image1');" 
                style="text-decoration: none;"><strong>Export, Storage, and<br />Loading Systems</strong></a></span> </td>
                <td valign="top" nowrap style="border-top:1px solid #bbb;"><strong>1,000,000,000 bbls</strong> </td>
            </tr>
            <tr>
                <td width="33%" valign="top" nowrap style="border-top:1px solid #bbb;"><span style="font-size: 12pt;"><a id="three" href="#" 
                OnMouseOver="changeIt('/images/stories/article/pipeline_experience.jpg','image1');"  
                onClick="changeIt('/images/stories/article/pipeline_experience.jpg','image1');" 
                OnMouseOut="changeIt('/images/stories/article/composite_experience.jpg','image1');" 
                style="text-decoration: none;"><strong>Pipeline Systems</strong></a></span> </td>
                <td valign="top" nowrap style="border-top:1px solid #bbb;"><strong>100,000 miles</strong> </td>
            </tr>
            <tr>
                <td width="33%" valign="top" nowrap style="border-top:1px solid #bbb;"><span style="font-size: 12pt;"><a id="four" href="#" 
                OnMouseOver="changeIt('/images/stories/article/production_experience.jpg','image1');"
                OnMouseOut="changeIt('/images/stories/article/composite_experience.jpg','image1');"                 
                onClick="changeIt('/images/stories/article/production_experience.jpg','image1');" 
                style="text-decoration: none;"><strong>Production and<br />Processing Facilities</strong></a></span> </td>
                <td valign="top" nowrap style="border-top:1px solid #bbb;"><strong>2,000,000 bpd</strong> </td>
            </tr>
            <tr>
                <td width="33%" valign="top" nowrap style="border-top:1px solid #bbb;"><span style="font-size: 12pt;"><a id="five" href="#" 
                OnMouseOver="changeIt('/images/stories/article/pump_experience.jpg','image1');"  
                onClick="changeIt('/images/stories/article/pump_experience.jpg','image1');"
                OnMouseOut="changeIt('/images/stories/article/composite_experience.jpg','image1');" 
                style="text-decoration: none;"><strong>Pump Stations</strong></a></span> </td>
                <td valign="top" nowrap style="border-top:1px solid #bbb;"><strong>300,000 hp</strong> </td>
            </tr>
        </tbody>
    </table>

谢谢大家。

4

0 回答 0