Image Onclick画像を変更する

Question

ただの質問です。私はギャラリーのjavascriptを使用しています、それはそのようなものです：大きな画像（サングラス）があり、その下に色があります（シンプルな色の円画像）。私はそのようなjavascriptの方法を見つけました（それは働いています）。

<script type="text/javascript"> 
 
    
 
    function change() { 
 
     var image = document.getElementById('iks8600A'); 
 
     image.src = ('assets/szemuveg/iks8600B.jpg'); 
 
     document.getElementById('link').href = 'assets/szemuveg/iks8600B.jpg'; 
 
    } 
 
    </script> 
 
    <script type="text/javascript"> 
 
    
 
    function back() { 
 
     var image = document.getElementById('iks8600A'); 
 
     image.src = ('assets/szemuveg/iks8600A.jpg'); 
 
     document.getElementById('link').href = 'assets/szemuveg/iks8600A.jpg' 
 
    } 
 
    </script> 
 
    <script type="text/javascript"> 
 
    
 
    function change2() { 
 
     var image = document.getElementById('S8621A'); 
 
     image.src = ('assets/szemuveg/s8621A.png'); 
 
    } 
 
    </script>

だから私は、すべてのサングラスの絵でそれをしなければならない、それは非常に長いコードになります。それは正しい方法ですか？それとも簡単な方法がありますか？ 助けていただきありがとうございます。

Answer 1

あなたはこれを試しましたか？

var imgUrls = { 
    red : "path/to/redImg.jpg", 
    blue : "path/to/blueImg.jpg", 
    green : "path/to/greenImg.jpg", 
    black : "path/to/blackImg.jpg" 
}; 

function switchGlassesColor (color) { 
    document.getElementById('iks8600A').src = imgUrls[color]; 
    document.getElementById('link').href = imgUrls[color]; 
} 

対応HTML：

<img id="iks8600A" alt="Sunglasses... Deal with it!"></img> 
<img onclick="switchGlassesImage('red')" alt="RED SUNGLASSES, Omagad!"></img> 
<img onclick="switchGlassesImage('blue')" alt="Blue singlasses, with a swag diesel effect"></img> 

Answer 2

あなたの質問は明らかではありません。これらの要素のHTMLコードを追加してください。

私はあなたを正しく理解していれば、色とイメージの配列を設定できます。 E.G .:

imagesArray = [{color: 'red', image: 'assets/szemuveg/iks8600A.jpg'}, 
       {color: 'blue', image: 'assets/szemuveg/iks8600B.jpg'}]; 

その後、単一の機能で画像を変更することができます。