Изображение Onclick изменить изображение javascript

Просто быстрый вопрос. Я использую javascript для галереи, это работает так: у меня большие изображения (солнцезащитные очки), и у меня есть под ним цвета (простое изображение с круглым кружком), когда я нажимаю на цвет, который изменяет изображение солнцезащитных очков на другой цвет. Я нашел способ в javascript (и он работает).Изображение Onclick изменить изображение 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>

Так что я должен сделать это на каждой картинке и солнцезащитные очки, это будет очень длинный код. Правильно ли это? Или есть более простой способ сделать это? Спасибо за помощь/предложения.

источник

2016-04-08 Tibor Ambrus

Возможно, вы захотите узнать о [массивах] (http://eloquentjavascript.net/04_data.html) и [циклах] (http://eloquentjavascript.net/02_program_structure.html#h_FaGGgUI+MM). –

Вы можете поместить все первые изображения в заданную папку и их соответствующую замену в другую с тем же именем. Таким образом, вы будете иметь дело с каждым изображением с тем же кодом, передавая свой элемент clicked как ссылку –

Я постараюсь сделать это и сделать некоторые исследования. Но если я оставлю это таким образом, и у меня будет такой же код, как у моего html, это будет проблемой? –

Вы пробовали что-то вроде этого?

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>

источник

2016-04-08 07:27:19

Ваш вопрос не ясен. Добавьте код HTML этих элементов.

Но если вы правильно поняли - вы можете установить массив цветов и изображений. E.G .:

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

И после этого вы можете использовать его в одной функции для изменения изображения.

источник

2016-04-08 07:28:38 Cloudswalker

Изображение Onclick изменить изображение javascript

ответ

Смежные вопросы