title: Making image scrollable in JFrame contentpane
body: <p>I am trying to display a large image inside a JFrame's contentpane. I would like to make the image or contentpane scrollable as the image is large. I tried to do it using Jscrollpane and add it into the contentpane but it didn't work. Did some searching for solution but end up failed to find one. Can someone guide me? My code are below</p>
  
  <p>FinalEnvironment.java</p>
  
  <pre><code>package environment;
  
  import java.awt.*;
  import java.net.URL;
  
  import javax.swing.*;
  
  public class FinalEnvironment{
  
  public FinalEnvironment(){
  
      Image Eastlake;
      URL EastlakeURL = null;
  
      EastlakeURL = FinalEnvironment.class.getResource("/image1/eastlake_night.png");
      Eastlake = Toolkit.getDefaultToolkit().getImage(EastlakeURL);
  
      JFrame frame = new JFrame("UniCat World");
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      frame.setSize(800, 600);
      frame.setResizable(false);
      frame.setLocationRelativeTo(null);
  
      JMenuBar yellowMenuBar = new JMenuBar();
      Map map = new Map(800, 550, Eastlake);
      yellowMenuBar.setOpaque(true);
      yellowMenuBar.setBackground(Color.YELLOW);
      yellowMenuBar.setPreferredSize(new Dimension(800, 50));
      frame.setJMenuBar(yellowMenuBar);
      JScrollPane scroller = new JScrollPane(map);
      scroller.setAutoscrolls(true);
      scroller.setPreferredSize(new Dimension(800, 550));
      frame.getContentPane().add(scroller, BorderLayout.CENTER);
  
  
      frame.setSize(800, 600);
      frame.setVisible(true);
  }
  
  public static void main(String[] args){
      FinalEnvironment fe = new FinalEnvironment();
  }
  }
  </code></pre>
  
  <p>Here is my map.java</p>
  
  <pre><code>package environment;
  
  import java.awt.*;
  
  import javax.swing.*;
  
  
  public class Map extends JPanel{
  
      private int width;
      private int height;
      private Image img;
  
      public Map(int width, int height, Image img){
  
          this.width = width;
          this.height = height;
          this.img = img;
      }
  
      protected void  paintComponent(Graphics g)
      {
          super.paintComponents(g);
          Graphics2D g2d = (Graphics2D) g;
          g2d.drawImage(img,0,0,2624,1696,null);
      }
  
  }
  </code></pre>
  
  <p>Lastly, I would like to place Jbuttons on top of this image. Should I call a Rectangle and place it on top the image in the contentpane which then I use Point to position my buttons or should I straight away use the image or the component itself to do it? I need the button to be able to synchronize with the image when it is scrolled instead of static in the contentpane.</p>
  
  <p>Thanks</p>