Как сделать что бы при нажатии разных кнопок отображались разные изображения?

Question

[DimaGhost]

Добрый день! Нужна ваша помощь , как сделать что при нажатии одной кнопки отображалась одна картинка , а при нажатии другой показывалась другая картинка ?
В итоге картинки должны меняться при нажатии разных кнопок.

Над картинкой 2 кнопки "Компоновка" и "Внешний вид" при нажатии на кнопки отображается разные картинки.
В JS полный ноль, буду очень благодарен за помощь.

Answer 1

[xmoonlight]

img контейнеру даёте имя (name) и меняете src:

<img name="img" src="p1.jpg">
<input type="button" onclick="javascript:img.src='p1.jpg'">
<input type="button" onclick="javascript:img.src='p2.jpg'">

Comments

[DimaGhost]

Спасибо большое, ещё раз убеждаюсь в Вашем профессионализме!

[xmoonlight]

DimaGhost: Welcome! sitecoder.blogspot.ru/p/thank-you.html

Answer 2

[Дмитрий Ковальский]

Можно в тег кнопки через атрибуты data-(например data-imageid) хранить идентификаторы изображений, нуждающихся в показе при клике на оную. А на событие onclick по кнопке вытаскивать это значение и загружать его. Все зависит от того как и где у вас хранятся картинки и как они упорядочены.

Answer 3

[furashcka]

Как вариант (грубый)

<button id="but1">Кнопка 1</button>
    <button id="but2">Кнопка 2</button>
    <button id="but3">Кнопка 3</button>
    <br>
    <br>
    <img width="300" src="http://dreempics.com/img/picture/Jun/04/08837d979a3d1531294922001a35e406/2.jpg" alt="" id="setImg">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

(function($){

        $.fn.updateImg = function(conf){
            var defConf = {
                            elem_img    : null,
                            url_img     : null,
                          }
            
            $.extend(defConf, conf);
            
            if( defConf.elem_img != null && defConf.url_img != null ) {
                $( this ).click(function() {
                    $( defConf.elem_img ).attr( "src", defConf.url_img );
                });
            }
        }

    })(jQuery);
    
    
    $(document).ready(function() {
        $("#but1").updateImg({ 
            elem_img : "#setImg",
            url_img  : "http://oxy.org.ua/wp-content/uploads/2009/08/d185d0b8.jpg"
        });

        $("#but2").updateImg({ 
            elem_img : "#setImg",
            url_img  : "http://img0.joyreactor.cc/pics/post/full/Nyan-Cat-%D0%BE%D0%B1%D0%BE%D0%B8-%D0%BA%D1%80%D0%B0%D1%81%D0%B8%D0%B2%D1%8B%D0%B5-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-art-851091.jpeg"
        });

        $("#but3").updateImg({ 
            elem_img : "#setImg",
            url_img  : "http://www.yakako.ru/uploads/posts/2010-07/1277990808_kartinki-plamya-ognia-01.jpg"
        });
    });

elem_img - Картинка у которой будет обновлен src
url_img - путь к отображаемой картинке