Question

我真的希望你们中的一位JS大师可以解释这个问题。

目前，我正在开发一个网页，其中包含第一列中包含5个文本行的小表。第二栏中的图像。

客户要求提供以下信息：

打开页面，“默认图片”应显示
滚动文字，“临时图片”应显示
滚动文字，“默认图片”应显示
点击文字，该临时图片应成为“默认图片” 图像“

我能够实现目标＃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>

提前谢谢大家。

Javascript Rollover图像链接

0 个答案: