<html>
  <head>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.js"></script>  
 <link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
  </head>
  <body>
    <header></header>
    <section>
      <article>
        <main class = "ejmAttr">
  <div class="obj1">
    <button>Imagen 1</button>
    <button>Imagen 2</button>
    <button>Imagen 3</button>
    <button>Imagen 4</button>

    
  </div>
  <div class="obj2">
    <img src="">
  </div>
</main>
      </article>
    </section>
    <footer></footer>
  </body>
</html>
 main[class$="Attr"]{
                  background: brown;
                  margin: 0em 2em;
                  width: 90%;
                  height: 90vh;
                  border: 5px solid  black;
                  display: grid;
                  grid-template-columns: 40% 1fr;

}

  main[class$="Attr"] > div[class*="1"]{
                    background: black;
                    margin:   5px;
                    padding:  5px 15px ;
                    color:  white;
                    text-align: center;
                    display: flex;
                    flex-flow: column wrap;
                    justify-content:space-around;
   
    
  
}
 main[class$="Attr"] > div[class*="2"]{
                       background: darkgrey;
                       margin:5px;
                       padding:5px;
                       border: 4px solid aqua;
  
}
main[class$="Attr"] > div[class*="1"]> button{
  width:85%;
  height:15%;
  font-weight:blod;
  font-family: 'Anton', sans-serif;
  font-size: 1em;

}
.obj2{
  overflow-y: auto;

  display:flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
.obj2 img{
  border: 8px solid black;
  height: 65vh;
  width: 50vw;
  margin: 1% 1%;
}
.obj1 button:hover{
  color: brown;
  transition: .3s;
}
var foto = [
"https://2.bp.blogspot.com/-iVlnzUPAhGQ/WwnTLA-eQPI/AAAAAAAACp8/LYqJFgtWTBwNF66Mfr7kLpIEpYw26vjrQCPcBGAYYCw/s640/Ensalada%2Bde%2Bnaranja.jpg",
"https://3.bp.blogspot.com/-b7zCgaIZ614/WwHlONuisiI/AAAAAAAACiQ/0sPDIgjtUP42L288Tjpx0mlg5VcWcCL5gCPcBGAYYCw/s640/queso%2Bpara%2Brallar.jpeg",
 "https://2.bp.blogspot.com/-TPZGdAF4YPI/Wvx6ipd8VKI/AAAAAAAACYk/acVd7cg0CyAQMt4sKSra6HBb_sFMJrwyQCLcBGAs/s640/salchichas%2Bal%2Bvino%2Bblanco.jpeg",
 "https://2.bp.blogspot.com/-iyzZZzL_ASI/Wvx9s1oG-zI/AAAAAAAACY0/9jU_jFmCCz0N-GmBtQ6XxjXBMeBRjXIuQCLcBGAs/s640/guiso%2Blonganizas%2Bcon%2Bvino%2Bblanco.jpeg"
 ];


$(".obj1 button:eq(0)").click(function(){
 $(".obj2 img").attr("src",foto[0]);
});

$(".obj1 button:eq(1)").click(function(){
 $(".obj2 img").attr("src",foto[1]);
});

$(".obj1 button:eq(2)").click(function(){
 $(".obj2 img").attr("src",foto[2]);
});

$(".obj1 button:eq(3)").click(function(){
 $(".obj2 img").attr("src",foto[3]);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.