Member Avatar for jasonw749

hi guys, first time posting here. so i have this menu for a game i am making and the image that i have for the menu background has text and things already loaded onto it.

what would be the best way to have the text clickable? would it be to delete the text and re add it or is there a way to add some sort of action listener that can deal with this in the form that it is currently in. thanks :)

  • 2 Contributors
  • 4 Replies
  • 198 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by jasonw749

Dani AI

Generated

The menu artwork that described (text baked into a PNG) is best handled by treating the image as visual-only and mapping interactive regions separately. Building on ’s coordinate idea, two practical, maintainable approaches are recommended: overlay invisible controls for simple rectangular hotspots, or use a color‑mask (hotspot) image for precise irregular shapes. Store hotspot definitions in a small JSON file so artists can adjust regions without changing code.

Overlay invisible controls (quick, accessible — good for keyboard focus and testing). Make the background a component and place transparent JButtons at the correct bounds; listeners behave like normal buttons.

JLabel bg = new JLabel(new ImageIcon("menu.png"));
bg.setLayout(null);
JButton play = new JButton();
play.setOpaque(false);
play.setContentAreaFilled(false);
play.setBorderPainted(false);
play.setBounds(120, 80, 200, 40); // match art
play.addActionListener(e -> openPlayMenu());
bg.add(play);
frame.setContentPane(bg);

Color‑mask hotspot (best for irregular shapes). Create a second PNG where each clickable region is a unique solid color. On click, convert the component coordinates to the mask’s pixel coordinates, read the pixel color, and dispatch the mapped action. This avoids polygon math and is easy to maintain.

BufferedImage mask = ImageIO.read(new File("menu_mask.png"));
Map<Integer,Runnable> actions = new HashMap<>();
actions.put(0xFF0000, () -> openOptions()); // red region
panel.addMouseListener(new MouseAdapter() {
  public void mouseClicked(MouseEvent e) {
    int mx = (int)(e.getX() * (mask.getWidth()/(double)panel.getWidth()));
    int my = (int)(e.getY() * (mask.getHeight()/(double)panel.getHeight()));
    int rgb = mask.getRGB(mx,my) & 0xFFFFFF;
    Runnable r = actions.get(rgb);
    if (r != null) r.run();
  }
});

For web projects, HTML image maps or canvas hit-testing give similar choices:

<img src="menu.png" usemap="#menu">
<map name="menu">
  <area shape="rect" coords="120,80,320,120" href="options.html">
</map>

Notes: always convert clicks to the image’s native pixel coordinates (handle scaling and high‑DPI), clamp bounds to avoid OOB, and keep hotspot data external so the art can be edited without code changes.

Recommended Answers

All 4 Replies

Member Avatar for NormR1

have the text clickable

What does "clickable" mean? Do you want an event when the text is clicked on?
Is the text part of an image, not a String you are adding to a component?

Where and what is the text and what kind of component is the text in?

Member Avatar for jasonw749

sorry i didnt explain properly. the text is part of a png file and i want another menu page to open up when certain parts of the image are clicked

Member Avatar for NormR1

You could use a mouseListener on the component holding the image and get the x,y location of the mouse click and compare it to the location of the text on the image. Use a photo editor to map out the rectangles around the parts you want to be able to click on.

Member Avatar for jasonw749

thanks :) i will do that. im really glad i stumbled among this forum, really fast replys. thanks again

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.