Member Avatar for Nuuk

I am creating a site for our local carnival club. I have created some buttons (images) for navigating between pages but when I place two of these buttons near each other, clicking on one can activate the other.

I've more of less solved the problem by placing the buttons a bit further apart but I wondered why it happens, and what is the proper solution.

Also if you look on this page

&bcarnivalpix.html

and scroll to the bottom, place your cursor over the button, you will see an area of the screen come up in blue. It is obviously related to the image link for the button but why? :icon_confused:

I suspect that this is to do with the other problem of these image links when they are in close proximity. I know with image maps that you define the active area of an image as a link, but should we do that with single image links too?

  • 3 Contributors
  • 5 Replies
  • 104 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by macneato

Dani AI

Generated

The symptoms in this thread (clickable areas overlapping and a blue rectangle appearing) come down to how browsers determine an element's hit area and how that area is drawn when focused. reported the behavior and and pointed toward layout/CSS as the place to look. The checklist and options below help you diagnose and fix it in a robust, accessible way.

Quick diagnosis

  • Use the browser inspector (DevTools) to view the anchor element and its computed box model so you can see the true clickable rectangle. Learn to open DevTools and inspect elements here: Chrome DevTools.
  • Temporarily style anchors to visualise the hit box (outline/background) so you can see overlaps:
/* temporary debug only */
a { outline:2px solid rgba(0,0,255,0.25); background:rgba(0,0,255,0.05); }

Practical fixes (pick one to suit the design)

  • Use the anchor as the styled control (background-image on the anchor, with explicit width/height). That gives precise control of the clickable area and scales better than arbitrary image padding.
  • Make the image itself a block-level element (e.g., img { display: block; }) or make the anchor display:inline-block and set exact dimensions so surrounding layout doesn’t expand the hit area.
  • For irregular shapes, prefer SVG links or CSS clip-path over classic image maps for easier scaling and responsiveness: clip-path.

About the blue rectangle

  • That is the browser’s focus/active indicator for interactive elements. Don’t remove it wholesale—use :focus-visible to style a clear, accessible focus state instead: :focus-visible.

Advanced: pointer-events can block clicks on underlying elements, but use it carefully (and test keyboard navigation): pointer-events.

These steps let you see exactly which element is receiving clicks, fix layout causes, and keep interactions accessible.

Recommended Answers

All 5 Replies

Member Avatar for macneato

I'll tell you why, its cause you positioning your images absolutely and your image height 110px. I would recommend trimming the image and just leaving the button itself (remove the background) doing so will solve your issue.

Or rather. Wrap the images in divs and add the link to the div

Member Avatar for Nuuk

I suspect that this is to do with the other problem of these image links when they are in close proximity. I know with image maps that you define the active area of an image as a link, but should we do that with single image links too?

Thanks macneato - I assumed that the software that made the buttons just saved them the correct size. I have removed the backgrounds and they now work fine. :)

Member Avatar for rajendra.parmar

you have to use navigation for that,

you create CSS for the same and use it

I am creating a site for our local carnival club. I have created some buttons (images) for navigating between pages but when I place two of these buttons near each other, clicking on one can activate the other.

I've more of less solved the problem by placing the buttons a bit further apart but I wondered why it happens, and what is the proper solution.

Also if you look on this page

&bcarnivalpix.html

and scroll to the bottom, place your cursor over the button, you will see an area of the screen come up in blue. It is obviously related to the image link for the button but why? :icon_confused:

I suspect that this is to do with the other problem of these image links when they are in close proximity. I know with image maps that you define the active area of an image as a link, but should we do that with single image links too?

Member Avatar for Nuuk

you have to use navigation for that,

you create CSS for the same and use it

What is navigation rajendra?

Member Avatar for macneato

I'd ask the same question.

Then you create CSS for the same and use it.

Guessing he's jumping on the "solved threads wagon"

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.