Recreating clickable image map

  • Hello

    I have the html source code, inclusive of co-ordinates, for a clickable image map. On copying the relevant image to my WordPress media library, I am able to use the source code to present the image on one of my WordPress site pages. However, while the image can be viewed on WordPress, the relevant titles within the image are not clickable. I am wondering if this is because the image has been automatically resized and therefore the co-ordinates (which point to the clickable parts) are mismatched to the relevant image as presented. In the event that this explains the problem, is there a way of avoiding the resizing problem so that I can continue to use the source code to allow the image to have clickable titles in keeping with the original image?

    Thanks in advance!

Viewing 2 replies - 1 through 2 (of 2 total)

  • Yes, the coordinates are hard-coded to a specific size of the image.
    I see two problems.
    1. You would need to use CSS to make sure the image does not change size (which makes it difficult for various window sizes). Typical theme CSS is img {max-width: 100%; height: auto;} so that images adjust to the window width. CSS overrides HTML attributes, so even if you put width and height on the image, it gets overridden. You need a more specific rule for the one image so it has both width and height that don’t change.

    2. Remove the wp-image-* class on the image which triggers the core sources and sizes attributes being added (for responsive images). Basically, if it’s in the Media Library and you add the image to a post, WordPress adds the wp-image-* class so it can get the info to add the attributes. If you put the image on your server directly (not through WP), then no attributes will be added (although some themes add their own).

    There is a plugin called Draw Attention that might help you.

    Thread Starter margmacd

    (@margmacd)

    Thank you very much for your kind and informative reply, Joy. I can raise a query regarding Draw Attention functionality in the event that this could help.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Recreating clickable image map’ is closed to new replies.