Javascript下拉列表-创建链接和文本_Javascript

Javascript下拉列表-创建链接和文本

javascript

Javascript下拉列表-创建链接和文本,javascript,Javascript,我想知道是否有人可以帮我完成一些功能的下拉列表，我正试图使当前portlet位于测试页面上，右侧有一部分称为“经销商定位器”，这是有问题的代码目前，经销商定位器工作正常，尽管我正在尝试添加额外的功能当有人从下拉列表中选择一家公司时，我希望图像有一个链接当有人从下拉列表中选择公司时，我希望相关文本更改为所需文本附件是该页面上使用的代码（如果有人有dreamweaver或类似的东西，如果你能把它放在那里，我会非常感激）无论如何，这是一个远大的希望，但任何解决方案都将不胜感激 <

我想知道是否有人可以帮我完成一些功能的下拉列表，我正试图使

当前portlet位于测试页面上，右侧有一部分称为“经销商定位器”，这是有问题的代码

目前，经销商定位器工作正常，尽管我正在尝试添加额外的功能

当有人从下拉列表中选择一家公司时，我希望图像有一个链接
当有人从下拉列表中选择公司时，我希望相关文本更改为所需文本

附件是该页面上使用的代码（如果有人有dreamweaver或类似的东西，如果你能把它放在那里，我会非常感激）

无论如何，这是一个远大的希望，但任何解决方案都将不胜感激

<img src="http://www.khl.com/other_files/khl/dealer-locatot.gif" width="300"  border="0" usemap="#Map" longdesc="http://www.khl.com/other_files/khl/dealer-locatot.gif">
<map name="Map">
    <area shape="rect" coords="8,11,127,88" href="http://www.scranet.org/" target="_blank" alt="SC&amp;RA">
</map>

<script language="JavaScript" type="text/javascript"> 
<!-- 
// if you preload images they need to be loaded before they are required 
// once in the cash they can be used as the original file name(&path) or as new Image.src ie SRC[1].src 

ImgPath='http://www.vicsjavascripts.org.uk/StdImages/'; 
ImgPreloadAry=new Array('One.gif','Two.gif','Three.gif','Four.gif'); 
SRCAry=new Array(); 

for (i=0;i<ImgPreloadAry.length;i++){ 
 SRCAry[i]=new Image(); 
 SRCAry[i].src=ImgPath+ImgPreloadAry[i]; 
} 

function Cng(sel){ 
 document.getElementById('img').src=ImgPath+sel.options[sel.selectedIndex].value; 
 document.getElementById('tbl').style.backgroundImage='url('+(ImgPath+sel.options[sel.selectedIndex].value)+')'; 
} 





//--> 
</script> 
</head> 

<body> 
<table width="300" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="149"><img src="http://www.khl.com/other_files/khl/dealer-locatot.gif" alt="" width="130" height="80" id=img></td>
        <td width="151">Related text goes here - along with link to pdf</td>
    </tr>
</table>
<p>
<table width="149" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="149" align="left" valign="top">
            <select name="Sel" size="1" onchange="Cng(this);" >
                <option value="One.gif">Company 1</option>
                <option value="Two.gif">Company 2</option>
                <option value="Three.gif">Company 3</option>
                <option value="Four.gif">Company 4</option>
        </select></td>
    </tr>
</table>
<p>


您必须首先将图像包装在锚定中，并且在每次下拉更改时，您可以更改锚定的href属性。像-
<table width="300" border="0" cellspacing="0" cellpadding="0">
   <tr>
       <td width="149">
          <a id="companyLink" href="#">
             <img id="relatedImage" src="http://www.khl.com/other_files/khl/dealer-locatot.gif" alt="" width="130" height="80" id=img>
          </a>
       </td>
       <td id="relatedText" width="151">Related text goes here - along with link to pdf</td>
   </tr>
</table>

我希望这就是您想要实现的目标。您好，谢谢您的回复，尽管我正在努力让它工作。你能把它添加到我提供的代码中吗？我正在努力让相关的文本出现在选择中。您好，实际上document.getElementById（'relatedText'）.innerHTML中有一个输入错误。我已经纠正了它，我认为这会解决问题。
var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
var linksArray = [
  { Img: 'One.gif', Link : 'http://www.companyone.com', RelatedText :'Description for company one'},
  {Img:'Two.gif', Link : 'http://www.companytwo.com', RelatedText :'Description for company two'},
  {Img:'Three.gif', Link : 'http://www.companythree.com',RelatedText : 'Description for company three'},
  {Img:'Four.gif', Link : 'http://www.companyfour.com',RelatedText : 'Description for company four'},
];

function Cng(sel){ 
   var selectedIndex = sel.selectedIndex;
   document.getElementById('companyLink').href = linksArray[selectedIndex].Link;
   document.getElementById('relatedText').innerHTML= linksArray[selectedIndex].RelatedText;
   document.getElementById('relatedImage').src = ImgPath + linksArray[selectedIndex].Img;
}