Html Question posted in
Some basic documentation can be found here.

Html – How to Highlight/clickable Irregularly Shaped Interlocking Puzzle Pieces of an image

I am trying to highlight/make it clickable particular interlocking pieces (resembling a puzzle) upon hovering over the image. Is there a method to achieve this considering the irregular shapes of the pieces? I explored using an image map, but it seems limited to rectangular, polygonal, or circular shapes. Here’s the image I’m working with. My goal is to highlight the green, purple, and blue pieces when a user selects a specific piece, while dimming out the others.

enter image description here

Tags:

4

Answers


  1. 0

    You can position regular rectangular HTML elements and use a clip-path on them of the SVG path of the desired shape. You can use an SVG editor to create the shape and copy the path code into the clip-path.

    Login or Signup to reply.
  2. 0

    give the specific shape for the buttons i think and give some angles direction

    Login or Signup to reply.
  3. 0

    I agree with @MisterJojo’s comment:

    Why exclude the use of SVG?

    The highlighting in the image created with SVG is very simple using CSS :hover. Alternatively, with the use of JavaScript, you can detect clicks and perform operations based on them.

    // Function to handle click events
function handleClick(event) {
  // The clicked element
  const clickedElement = event.target;
  // The value of the fill attribute of the element
  const fillAttributeValue = clickedElement.getAttribute('fill');
  // Log to the console
  console.log(`You clicked on an element. (fill: ${fillAttributeValue})`);
}

// Adding onclick event listeners to elements with class .square
const squares = document.querySelectorAll('.square');
squares.forEach(function(square) {
  square.addEventListener('click', handleClick);
});
    .square:hover {
  stroke: black;
  stroke-width: 3;
}
    <svg width="160" height="160" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="40" height="40" fill="blue" class="square" />
  <rect x="60" y="10" width="40" height="40" fill="red" class="square" />
  <rect x="110" y="10" width="40" height="40" fill="green" class="square" />
</svg>

    If you create a vector version of your image, you’ll also be able to highlight irregular elements.

    Login or Signup to reply.
  4. 0

    you can work with 3 buttons that complement each other in the image

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search