Member Avatar for Jon BH

Hi
I'm trying to locate some java that will allow a preview images, and float large display on roll over.
The setup will be a list of customers and a small thumbnail.
On rollover a large image centre screen on top with a text description below.
Mouse out will clear the large image.
I'm sure there's something on here, just not sure what it will be called to find it.

  • 2 Contributors
  • 2 Replies
  • 132 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by Jon BH

Dani AI

Generated

A quick clarification before implementation: many people say "Java" when they mean a browser effect. Since said he has no Java skills, the easiest and most future‑proof solution for a web page is a small JavaScript + CSS overlay that shows a single centered preview element (positioned relative to the viewport so it stays centered while the page scrolls). If this really is a desktop Java (Swing) app, was right that you need mouse events and custom painting — see the Swing notes below.

A practical web workflow that matches the behavior you described:

  • Keep one overlay element appended to the document body and style it as fixed/centered with a caption area and a short fade transition. This avoids creating/destroying DOM for every hover.
  • Put high‑resolution preview URLs in a data- attribute on each thumbnail and use event delegation on the containing list to handle enter/leave. Preload the preview image before showing it to avoid flicker.
  • Use a short hide delay (100–250 ms) and cancel that timeout if the user moves to another thumbnail — this makes moving smoothly from one preview to another feel seamless.
  • Provide keyboard and touch fallbacks: open on focus or on click/tap and include a visible close button and ESC handler for keyboard users.

Minimal example (behavior only):

/* single overlay element, delegated handlers */
const overlay = document.createElement('div');
overlay.id = 'previewOverlay';
document.body.appendChild(overlay);

const container = document.getElementById('clientList');
let hideTimer;

container.addEventListener('mouseover', e => {
  const thumb = e.target.closest('.thumb');
  if (!thumb) return;
  clearTimeout(hideTimer);
  const img = new Image();
  img.onload = () => {
    overlay.innerHTML = '<img src="'+img.src+'" alt=""><div>'+ (thumb.dataset.caption||'') +'</div>';
    overlay.classList.add('visible');
  };
  img.src = thumb.dataset.full;
});

container.addEventListener('mouseout', () => {
  hideTimer = setTimeout(()=>overlay.classList.remove('visible'), 150);
});

Swing notes and troubleshooting:

  • For a Swing app, add the preview to the frame's glass pane or layered pane (not inside the scrolling area) so it stays visually centered while users scroll content. Load images on a background thread (SwingWorker) and cache them. Use a Swing Timer to debounce hide events and update UI on the EDT.
  • Avoid sending huge originals to the client: generate appropriately sized preview files server‑side or use responsive images (srcset) so mobile users and slow connections don’t suffer.
  • Accessibility: expose the preview as a dialog to screen readers, ensure keyboard focus opens/closes it, and provide descriptive alt text or captions.

Recommended Answers

All 2 Replies

Member Avatar for bguild

You can draw images with java.awt.Graphics.drawImage.

You can draw text several different ways, such as: java.awt.Graphics.drawString, java.awt.font.TextLayout, javax.swing.JLabel, javax.swing.JTextArea, and javax.swing.JTextPane. Each one works differently so you should investigate them all to find the one you prefer.

You can use a java.awt.event.MouseListener or java.awt.event.MouseAdapter to react to rollovers.

That seems to be all you need.

Member Avatar for Jon BH

I'm not sure that was quite what I was getting at. I've no Java capability and not found any mouse over presentations on forums that do just what I want. I've seen what I want on one or two business websites in the past but can't immediately locate one.
The list of clients which will grow and could get (off the page) long, but I need to keep it compact and tidy and the image always central (float down I suppose as the page is scrolled) to the display even when the viewer may have scrolled right down the list and off the initial starting view point.
I could simply have a new page for each client but then the viewer would be hitting the back button repetitively. All very clunky and tiresome.
All I need is the mouse over to put up one or several centre screen images per client then disappear on mouse out so they can move seamlessly from one view to another.
Code for this or pointing me somewhere I can see and download it would be appreciated.
My thanks

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.