<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>change image with another image</h2> <button class="btn btn-success btn-lg" id="mybtn">Click</button> <br><br> <div class='productImageWrap' id='img_area'> <img src="https://i.pinimg.com/736x/27/52/c4/2752c45b7c3bfa90192171439f3a3ee0--monkey-primates.jpg" width='150px' /> </div> </div> </div>

jQuery(document).ready(function($) { $('#mybtn').click(function() { $("#img_area img").attr("src", "https://i.pinimg.com/236x/bf/42/85/bf42855d50f2a491e26344c1b9683527.jpg"); }); $("#img_area img").mouseover(function () { $(this).attr("src", "https://i.pinimg.com/236x/bf/42/85/bf42855d50f2a491e26344c1b9683527.jpg"); $("h2").text("orangutan"); }).mouseout(function () { $(this).attr("src", "https://i.pinimg.com/736x/27/52/c4/2752c45b7c3bfa90192171439f3a3ee0--monkey-primates.jpg"); $("h2").text("monkey"); }); });