Менять картинки по нажатию на нее

Question

Нашел пример как по нажатию менять картинки ,но что-то не работает ни в какую (( Что не так ?

<object id="fl-svg"  data="images/osbb_1CO.svg" type="image/svg+xml"  width="100%" height="100%" onClick="imgsrc();" ></object>

и сам скрипт

<script language="javascript">
        var i=0;
        var image=document.getElementById("fl-svg");
        // Добавьте свои картинки в массив через запятую
        var imgs=new Array('images/osbb_2CO.svg','images/osbb_1COTL.svg');
        function imgsrc() {
            i++;i%=imgs.length;
            image.data = imgs[i];
        }
    </script>

Answer 1

Вставте src своих картинок в массив и при клике функция будет проходить по массиву и менять картинку на следующую и если массив закончится начнет отображать картинки сначала. onclick в самом html не нужен.

    var i=0;
    var image=document.getElementById("fl-svg");

    var imgs = new Array('https://html5css.ru/css/img_lights.jpg',
        'https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687');

    image.addEventListener('click', imgsrc);
    function imgsrc() {
        image.src = imgs[i];
        i++;
        if(imgs[i] === undefined){
            i = 0;
        }
    }

<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" id="fl-svg"/>

Answer 2

А можешь скинуть полный HTML файл (ну или хотя бы почти полный) Нужно посмотреть, где расположен тег script Ну и другие детали могут помешать

Answer 3

Есть и еще вот такой вариант: Правда это при кликуна кнопку, увы увидел

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="image">
    <img src="Путь где находится начальная картинка" id="ImageButton1" class="clock-adaptive">
  </div>
  <button class="btn_clock" onClick="action();">Кнопка</button>
</div>

<script>

function byId(e){return document.getElementById(e);}
window.addEventListener('load', mInit, false);

function mInit() {
  var tgt = byId('ImageButton1');
  tgt.secondSource = 'Путь где находится картинка, которую нужно поменять';
}

function byId(e){return document.getElementById(e);}

function action() {
  var tgt = byId('ImageButton1');
  var tmp = tgt.src;
  tgt.src = tgt.secondSource;
  tgt.secondSource = tmp;
};

</script>
</body>
</html>

БЛОГ НА HUSL

Менять картинки по нажатию на нее

Ответы (3 шт):