2009-05-17 31 views
0

インターネットからこのjavascriptコードを入手しました。これは、オプションドロップダウンボックスの選択から画像とキャプションを変更するスクリプトです。スクリプトは正常に動作します。私が持っている唯一の問題は、オプションボックスの値が数字だけであることです。オプションパラメータ内の値は数値ではなく単語にすることができますが、これを調整する方法はありますか?ここでは、コードです:JavaScriptオプションの選択問題

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"> 
img{ 
height:200px; 
width:250px; 
display:block; 
margin-top:10px; 
} 
#caption{ 
font-family:Verdana,tahoma,arial; 
font-size:10pt; 
text-align:center; 
display:block; 
width:250px; 
} 
</style> 
<script type="text/javascript"> 
/************************************************************ 
* Script by : Raymond Angana 
* Title: Dropdown Based Picture w/ Captions 
* First seen in AFHB2000.com 
* rangana in AHFB2000.com 
* Created June 5, 2008 
* This notice must stay intact 
/**********************************************************/ 
window.onload=function() 
{ 
    var caption=['Default Image Caption', 
       'Caption1', 
       'Caption2', 
       'Caption3', 
       'Caption4', 
       'Caption5', 
       'Caption6', 
       'Caption7', 
       'Caption8', 
       'Caption9'], // This will be your images caption 
    bp='http://h1.ripway.com/rangana/images/', //base url of your images 
    imgnum=14, //Number of your images. This should match on your comboboxes options. 
    thumb=document.getElementById('thumb'), //id of your image that will be changing 
    description=document.getElementById('caption'), //id of your caption 
    combobox=document.getElementById('selection'); // id of your combobox. 

    combobox.onchange=function() 
    { 
    thumb.src=bp+'Picture'+this.value+'.jpg'; 
    description.innerHTML=caption[this.value]; 
    } 
} 
</script> 
</head> 
<body> 
<label>Please Change the default picture: </label> 
<select id="selection"> 
<option>Change Picture</option> 
<option value="1">Image 1</option> 
<option value="2">Image 2</option> 
<option value="3">Image 3</option> 
<option value="4">Image 4</option> 
<option value="5">Image 5</option> 
<option value="6">Image 6</option> 
<option value="7">Image 7</option> 
<option value="8">Image 8</option> 
<option value="9">Image 9</option> 
</select> 
<br> 
<img src="http://h1.ripway.com/rangana/images/Picture1.png" alt="mypic" id="thumb"> 
<span id="caption">Caption for the default Image</span> 
</body> 
</html> 

任意の助けいただければ幸いオプション値のワードを持つようにしたいと思いますなぜ私はあなたがそこに言葉を持っている場合、それは希望、理由を知らない

答えて

1

value属性はテキストでもよく、数字でなくてもかまいません。上記のコードで解除されます唯一のものは、次のとおりです。

description.innerHTML=caption[this.value]; 

は、あなたはそれがために置き換えることができます。

description.innerHTML = caption[this.selectedIndex] 
+0

あなたパウロは天才です。ありがとう。出来た。 – arcadian

0

キャプションを取得することは困難です。

選択したオプションに固有のイメージを取得することが目的で、 'Picture' + idの代わりに独自のイメージ名を使用する場合は、以下のように変更します。以下のように

var appimages=[['Caption1','image1.gif'],['Caption2','image2.gif']]; 

そしてonChange機能の変化:下記のようにonLoad変更キャプションの配列(より多くのオプションと、対応する画像を追加する)で

thumb.src=bp+appimages[this.value][1]; 
description.innerHTML=appimages[this.value][0]; 

・ホープ、このことができます。

関連する問題