JS グルの 1 人がこの問題に光を当ててくれることを心から願っています。
現在、列1に5行のテキストがある小さなテーブルを持つWebページに取り組んでいます。そして2列目の画像。
クライアントは次のことを求めています。
- ページを開くと、「デフォルトの画像」が表示されます
- テキストをロールオンすると、「一時画像」が表示されます
- テキストをロールオフすると、「デフォルトの画像」が表示されます
- テキストをクリックすると、その一時画像が「デフォルト画像」になります
目標 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"> </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>
よろしくお願いします。