Is there something similar to HTML tag <map> in Java

[Radek Gajdos]

Hello everybody after a while. My question is, is there something similar to HTML tag <map> in Java, because i want to work with images and i need to create an image-map with clickable areas, something similar to example below
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map>
I was trying to find answer by myself, but i fail, so i'm asking you for your advises. Thanks a lot.

[Campbell Ritchie]

I am not sure what you are looking for. What does the <map> tag mean?
Do you want to be able to click on the area where Saturn is and get some sort of Saturnine action?
Maybe you can have the image layered over some buttons, but it can be awkward to maintain the layout. If the image is opaque, the buttons would be hidden.

I shall move you to our GUIs forum, which looks like where we usually discuss such questions.

[Rob Camick]

Create a List of Shape objects. Shapes can be circle, rectangle, polygons etc. Then when you click on your image you iterate through each Shape in the List and use the contains(...) method to determine which Shape was clicked.

[Radek Gajdos]

Hello, i'm trying to solve this problem for about 3 days now, and all what i was able to write and find is this short piece of code and some links like: link and link2. Please tell me, am i doing it well right now and what can i do more, because i'm stuck right now i don't know what to do next.

import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Polygon;
import java.awt.Shape;
import java.awt.geom.Ellipse2D;
import java.awt.geom.Rectangle2D;
import java.util.ArrayList;
import java.util.List;

import javax.swing.JFrame;
import javax.swing.JPanel;


public class ListOfShapes extends JFrame {
	
	List<Shape> shapes = new ArrayList<Shape>();
	
    int xPolygon[] = {150,150,200};
    int yPolygon[] = {50,100,100};
    Polygon polygon = new Polygon(xPolygon, yPolygon, xPolygon.length);
    
	Rectangle2D r2d = new Rectangle2D.Float(10f, 10f, 130f, 130f);
    
    Ellipse2D.Double e2d = new Ellipse2D.Double(150,150,50,50);
	
	public ListOfShapes() {
		
		shapes.add(polygon);
		shapes.add(r2d);
		shapes.add(e2d);
		
		class Surface extends JPanel {
			public void paint(Graphics g) {
				  Graphics2D g2d = (Graphics2D) g;
		
				  g2d.draw(r2d);
				  g2d.draw(e2d);
				  g2d.draw(polygon);
				  
			}
		}
		
		add(new Surface());
		
	}

	public static void main(String[] args) {
	
		ListOfShapes frame = new ListOfShapes();
		frame.setTitle("ListOfShapes");
		frame.setSize(300, 300);
		frame.setLocationRelativeTo(null); // Center the frame
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frame.setVisible(true);

	}

}

[Rob Camick]

1. Custom painting is done by overriding paintComponent(), not paint().
2. Invoke super.paintComponent at the beginning to make sure the background is repainted first.
3. The painting code should iterate through the List to paint each Shape. If you have 50 shapes you don't want to hard coded the painting of each shape.

Take a look at the DrawOnComponent example from Custom Painting Approaches. It will show you the basics of doing the painting from objects in a List. The example is more complicated than yours because the List is populated dynamically, but the concept is the same once the Shapes have been added to the list.

Once you get the basic painting done, then you will need to add the MouseListener to the panel so you can add code to check when the user clicks on a Shape.

[Radek Gajdos]

1. I'm overriding paintComponent().
2. I'm invoking super.paintComponents().
3. I iterate through my list to paint each Shape.
4. I have added MouseListener to my panel, or at least i think i did this, but it's not working.
Here is my changed code when i try to drawString when i click on rectangle, i don't know how to add conditions to check if you click on ellipse and polygon.

import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Polygon;
import java.awt.Shape;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.geom.Ellipse2D;
import java.awt.geom.Rectangle2D;
import java.util.ArrayList;
import java.util.List;

import javax.swing.JFrame;
import javax.swing.JPanel;


public class ListOfShapes extends JFrame {
	
	List<Shape> shapes = new ArrayList<Shape>();
	
    int xPolygon[] = {150,150,200};
    int yPolygon[] = {50,100,100};
    Polygon polygon = new Polygon(xPolygon, yPolygon, xPolygon.length);
    
	Rectangle2D r2d = new Rectangle2D.Double(10d,10d,130d,130d);
    
    Ellipse2D e2d = new Ellipse2D.Double(150d,150d,50d,50d);
    
    boolean r2dClicked;
	
	public ListOfShapes() {
		
		shapes.add(polygon);
		shapes.add(r2d);
		shapes.add(e2d);
		
		class Surface extends JPanel implements MouseListener {
			
			public void paintComponent(Graphics g) {
				super.paintComponents(g);
				
				  Graphics2D g2d = (Graphics2D) g;
				  
				  for (int i = 0; i < shapes.size(); i++)
					  g2d.draw(shapes.get(i));
				  
				  // If the click was in the rectangle show this message
				  if (r2dClicked) 
					  g.drawString("You clicked in the Rectangle",20,120);
				  // else this one
				  else 
					  g.drawString("You clicked outside of the rectangle",20,120);
			}

			@Override
			public void mouseClicked(MouseEvent me) {
				// TODO Auto-generated method stub
				  // Save the coordinates of the click lke this.
				  int xpos = me.getX();
				  int ypos = me.getY();

				  // Check if the click was inside the rectangle area.
				  if (xpos > r2d.getX() && xpos < r2d.getX()+r2d.getWidth() &&
						  ypos >r2d.getY() && ypos < r2d.getY()+r2d.getHeight())  
					  r2dClicked = true;
				  // if it was not then rect1Clicked is false;
				  else 
					  r2dClicked = false;
				  //show the results of the click
				  repaint();
			}

			@Override
			public void mouseEntered(MouseEvent e) {
				// TODO Auto-generated method stub
				
			}

			@Override
			public void mouseExited(MouseEvent e) {
				// TODO Auto-generated method stub
				
			}

			@Override
			public void mousePressed(MouseEvent e) {
				// TODO Auto-generated method stub
				
			}

			@Override
			public void mouseReleased(MouseEvent e) {
				// TODO Auto-generated method stub
				
			}
			
			 
		}
		
		add(new Surface());
		
	}

	public static void main(String[] args) {
	
		ListOfShapes frame = new ListOfShapes();
		frame.setTitle("ListOfShapes");
		frame.setSize(300, 300);
		frame.setLocationRelativeTo(null); // Center the frame
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frame.setVisible(true);

	}

}

I hope for your advices once again. Greetings.

[Ulf Dittmer]

1. I'm overriding paintComponent().
2. I'm invoking super.paintComponents().

I'm not an expert on Swing painting by any means, but these two together sound wrong to me.

[Paul Clapham]

And besides that, in general you have to be careful about what your X and Y values are relative to. Sometimes they are relative to the component, sometimes relative to the screen, and sometime they're relative to nothing on the display. In this example I'm pretty sure your mouse click's X and Y aren't relative to the same origin as your Rectangle's X and Y. I suggest you do some debugging to see what values you're getting for those things when you run the code.

[Rob Camick]

You didn't add the MouseListener to the panel.

[Campbell Ritchie]

Radek Gajdos wrote:1. I'm overriding paintComponent().
2. I'm invoking super.paintComponents(). . . .

Use paintComponent not paintComponents for both. And give paintComponent protected access, not public.

[Radek Gajdos]

Hello everybody, i've made some crucial changes in my code with some success, but it still doesn't work fluently, because sometimes i need to click many times to get the right output, or click on the surface and then on a shape the get the right output. I paste my code below. And as usual i hope for your suggestions.

import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Polygon;
import java.awt.Shape;
import java.awt.event.MouseEvent;
import java.awt.geom.Ellipse2D;
import java.awt.geom.Rectangle2D;
import java.util.ArrayList;
import java.util.List;

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import javax.swing.event.MouseInputAdapter;


public class ListOfShapes {
	
	public static void main(String[] args)
	{
		SwingUtilities.invokeLater(new Runnable() {
			public void run() {
				createAndShowGUI();
			}
		});
	}
	
	private static void createAndShowGUI()
	{
		DrawingArea drawingArea = new DrawingArea();

		JFrame frame = new JFrame("Clickable areas");
		frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
		frame.getContentPane().add(drawingArea);
		frame.setSize(250, 300);
		frame.setLocationRelativeTo( null );
		frame.setVisible(true);
	}
	
	static class DrawingArea extends JPanel
	{
		
		List<Shape> shapes = new ArrayList<Shape>();
		
	    int xPolygon[] = {150,150,200};
	    int yPolygon[] = {50,100,100};
	    Polygon polygon = new Polygon(xPolygon, yPolygon, xPolygon.length);
	    
		Rectangle2D r2d = new Rectangle2D.Double(10d,10d,130d,130d);
	    
	    Ellipse2D e2d = new Ellipse2D.Double(150d,150d,50d,50d);
	    
	    boolean r2dClicked, e2dClicked, polygonClicked;
		
		public DrawingArea()
		{
			shapes.add(polygon);
			shapes.add(r2d);
			shapes.add(e2d);

			MyMouseListener ml = new MyMouseListener();
			addMouseListener(ml);
			addMouseMotionListener(ml);
		}
	
		protected void paintComponent(Graphics g) {
			super.paintComponent(g);
			
			  Graphics2D g2d = (Graphics2D) g;
			  
			  for (int i = 0; i < shapes.size(); i++)
				  g2d.draw(shapes.get(i));
			  
			  if (r2dClicked) 
				  g.drawString("You clicked in the Rectangle", 20, 230);
			  else if (e2dClicked)
				  g.drawString("You clicked in the Ellipse", 20, 230);
			  else if (polygonClicked)
				  g.drawString("You clicked in the Polygon", 20, 230);
			  else
				  g.drawString("You clicked outside of the shapes", 20, 230);
		}
		
		class MyMouseListener extends MouseInputAdapter
		{
			public void mouseClicked(MouseEvent e) {

				if ((e.getButton() == 1) && polygon.contains(e.getX(), e.getY()) ) 
					polygonClicked = true;
				else if ((e.getButton() == 1) && r2d.contains(e.getX(), e.getY()) )
					r2dClicked = true;
				else if ((e.getButton() == 1) && e2d.contains(e.getX(), e.getY()) )
					e2dClicked = true;
				else {
					polygonClicked = false;
					r2dClicked = false;
					e2dClicked = false;
				}
					  
				  repaint();
			}
		}
	}
}

[Rob Camick]

For a simple solution:

In the MouseListener, instead of setting a bunch of Boolean variables, just set the text of a String variable. Then in the paintComponent() method you simply paint the text in the String. Or even easier just add JLabel to the panel at the desired location and then in the MouseListener you just set the text of the label and it will repaint itself automatically.

For a better solution:

It is never a good idea to have a bunch of if/else statements. What happens when you have 20 or 30 Shapes to paint and click on? The code obviously becomes a mess.

Instead create a custom object that has two properties: 1) the Shape and 2) a click message. Then you store this custom object in the List. The paintComponent() method will access the object and then get the Shape to paint. In your MouseListener you can now just iterate through the List, get the Shape, use the contains() method and then set the message as suggested above when appropriate. Now whether you have 3 or 100 Shapes the code is the same.

For an example of this approach of creating a custom Object check out the DrawOnComponent example from Custom Painting Approaches. The ColoredRectangle custom object stores the Rectangle and the Color of the rectangle, so it is very similar to something you might do.

[Radek Gajdos]

Hi. Thank you for your advices, special greetings for Rob Camick for his instructions and dedication, but i have one more question. In MouseListener, when i add else statement loop strats to act as it was in it only ellipse shape, whitout else statement loop act as i want. Anyone? Code lies below.

import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Polygon;
import java.awt.Shape;
import java.awt.event.MouseEvent;
import java.awt.geom.Ellipse2D;
import java.awt.geom.Rectangle2D;
import java.util.ArrayList;
import java.util.List;

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import javax.swing.event.MouseInputAdapter;


public class ListOfShapes {
	
	public static void main(String[] args)
	{
		SwingUtilities.invokeLater(new Runnable() {
			public void run() {
				createAndShowGUI();
			}
		});
	}
	
	private static void createAndShowGUI()
	{
		DrawingArea drawingArea = new DrawingArea();

		JFrame frame = new JFrame("Clickable areas");
		frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
		frame.getContentPane().add(drawingArea);
		frame.setSize(250, 300);
		frame.setLocationRelativeTo( null );
		frame.setVisible(true);
	}
	
	static class DrawingArea extends JPanel
	{
		
		List<ClickableShape> shapes = new ArrayList<ClickableShape>();
		
	    int xPolygon[] = {150,150,200};
	    int yPolygon[] = {50,100,100};
	    Shape polygon = new Polygon(xPolygon, yPolygon, xPolygon.length);
	    ClickableShape cp = new ClickableShape(polygon, "You clicked in Polygon");
	    
		Shape r2d = new Rectangle2D.Double(10d,10d,130d,130d);
		ClickableShape cr2d = new ClickableShape(r2d, "You clicked in Rectangle");
	    
	    Shape e2d = new Ellipse2D.Double(150d,150d,50d,50d);
	    ClickableShape ce2d = new ClickableShape(e2d, "You clicked in Ellipse");
	    
	    String message = "Click on the area";
		
		public DrawingArea()
		{
			shapes.add(cp);
			shapes.add(cr2d);
			shapes.add(ce2d);

			MyMouseListener ml = new MyMouseListener();
			addMouseListener(ml);

		}
	
		protected void paintComponent(Graphics g) {
			super.paintComponent(g);
			
			  Graphics2D g2d = (Graphics2D) g;
			  
			  for (int i = 0; i < shapes.size(); i++){
				  g2d.draw(shapes.get(i).getShape());
			  }
			  g.drawString(message, 20, 230);
		}
		
		class MyMouseListener extends MouseInputAdapter
		{
			public void mouseClicked(MouseEvent e) {

				for (int i = 0; i < shapes.size(); i++) {
					if ((e.getButton() == 1) && shapes.get(i).getShape().contains(e.getX(), e.getY()))
						message = shapes.get(i).getMessage();
//					else
//						message = "You clicked outside of Shapes";
				}
					  
				  repaint();
			}
		}
		
		class ClickableShape {
			
			private Shape shape;
			private String message;
			
			public ClickableShape(Shape shape, String message) {
				this.shape = shape;
				this.message = message;
			}

			public String getMessage() {
				return message;
			}
			
			public Shape getShape() {
				return shape;
			}
			
		}
	}
}

[Rob Camick]

You need to set the default message before you enter the loop (so you don't need an else statement).

Also, when you do find a match you can break out of the loop since there is no need to check the remaining shapes.

[Radek Gajdos]

I've set the default message before i enter the loop and it works fine, but i really don't know how to break out of the loop when i find a match, so if somebody provide a code i will be obliged. I post code where i set the default message.

		class MyMouseListener extends MouseInputAdapter
		{
			public void mouseClicked(MouseEvent e) {
				
				message = "You clicked outside of Shapes";
				
				for (int i = 0; i < shapes.size(); i++) {
					if ((e.getButton() == 1) && shapes.get(i).getShape().contains(e.getX(), e.getY())) 
						message = shapes.get(i).getMessage();
				}
					  
				repaint();
			}
		}

[Rob Camick]

Use the "break" statement. Read your Java text book if you have never used it before.

Or you can read through the Control Flow part of the Java tutorial.

[Radek Gajdos]

Nice guess, it was my first time using break statement, but i made it, or at least i think i did. If there is still some comments about my code i eager for hear them, if not i think the topic is closed, because i receive an answer, thanks a lot. Below, as always, my changed code.

		class MyMouseListener extends MouseInputAdapter
		{
			public void mouseClicked(MouseEvent e) {
				
				message = "You clicked outside of Shapes";
				boolean foundIt = false;
				int i;
				
				for (i = 0; i < shapes.size(); i++) {
//					System.out.println(shapes.get(i).getMessage());
					if ((e.getButton() == 1) && shapes.get(i).getShape().contains(e.getX(), e.getY())) { 
						foundIt = true;
						break;
					}
				}
				if (foundIt)
					message = shapes.get(i).getMessage();
					  
				repaint();
			}
		}

[Rob Camick]

Not sure why you changed the code? All you needed to do was add the break statement.

There is no need for the "foundIt" variable. Just set the message when you find a match. Don't create unnecessary variables.

[Radek Gajdos]

Sorry, mea culpa, i think it's because i'm still learning new things.

		class MyMouseListener extends MouseInputAdapter
		{
			public void mouseClicked(MouseEvent e) {
				
				message = "You clicked outside of Shapes";
								
				for (int i = 0; i < shapes.size(); i++) {
//					System.out.println(shapes.get(i).getMessage());
					if ((e.getButton() == 1) && shapes.get(i).getShape().contains(e.getX(), e.getY())) { 
						message = shapes.get(i).getMessage();
						break;
					}
				}
					  
				repaint();
			}
		}