Highlighted

How to use image map on website

New Here ,
Oct 11, 2020

Copy link to clipboard

Copied

I created a perfect image map with photoshop. I can't figure out how to get to the html code  to use on my website. I  use elementor and to add the map I need to insert the HTML code

Can anyone help me?

TOPICS
How to

Views

58

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to use image map on website

New Here ,
Oct 11, 2020

Copy link to clipboard

Copied

I created a perfect image map with photoshop. I can't figure out how to get to the html code  to use on my website. I  use elementor and to add the map I need to insert the HTML code

Can anyone help me?

TOPICS
How to

Views

59

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 11, 2020 0
Adobe Community Professional ,
Oct 11, 2020

Copy link to clipboard

Copied

You realize that images maps are a throwback to the late 1990s when everyone had same-sized devices and fixed-width web pages, right?  Those days are long gone. 

 

Images maps are not responsive on modern websites.  Invariably, the hotspot areas drift out of register when the map is re-scaled leading to usability issues as well as user frustration.  For this reason we no longer use old fashioned image maps.  Quite simply, it won't work for mobile and tablet devices which represent the majority of site visitors.

 

If you care to explain more about what what you're trying to do, I might have a better solution, one you can implement directly inside WordPress. 

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2020 0
New Here ,
Oct 11, 2020

Copy link to clipboard

Copied

My website, magicalduck.com is where I am trying to use an image map as a
hero. I hope to be able to use different images for different seasons
Each picture should have a link because I had some customers complain that
they could not find what was presented.
I now, thanks to you, know why my current image map does not work.
Any help to achieve my goal would be greatly appreciated

[E-mail address removed by moderator for your protection.]

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2020 0
Adobe Community Professional ,
Oct 11, 2020

Copy link to clipboard

Copied

Now that you posted your email address in a public user-to-user forum, beware of fake Adobe reps who may contact you privately. It's a scam, run away!
=============
3 Easy Ways to Identify Genuine Adobe Staff
https://tinyurl.com/10791730

 

The approach you're using currently will never work.  I suggest you look at image sliders or carousels. Most WP themes support them.  And if they don't, you can find plenty of WP plugins like this one.

https://wordpress.org/plugins/wp-carousel-free/

 

Or this premium one that supports WooCommerce products among other things.

https://shapedplugin.com/plugin/wordpress-carousel-pro/

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2020 0
New Here ,
Oct 11, 2020

Copy link to clipboard

Copied

Thank you for your help but it will not solve the problem
I still need to look for a way to link individual images over my hero.
Sliders are not made were I can link each image to its product page
Does anyone know of a responsive image map?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2020 0
Adobe Community Professional ,
Oct 11, 2020

Copy link to clipboard

Copied

Don't be silly.  Of course slider/carousel images can link to your product detail pages. Read the documentation.

 

Alternately, link the static hero image (not an image map) to your "product summary page."

 

Image maps are not responsive.  End of story.

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2020 0