*Hot Link* Image Not Responsive on Mobile Device

[graydog]

My question involves this site:

http://www.farmersjanewine.com

The problem is on the HOME page — the clickable links to the left and right of the logo don’t work when viewed on a mobile device (cell phone) . . . . UNLESS you go to *Full* mode.  I’ve left a *Full* icon on in case anyone wants to view it that way, but I want to eventually take off the icon.

I was asked to take their existing HTML site and reproduce it in WordPress. In order to get the clickable menu items on each side of the logo:

• I started with the background image (you can see it is the image with the red at each of the four corners)
• Opened it in Photoshop
• Added the appropriate link text
• Made clickable “hot links” on the image
• inserted the image in to my WordPress page

As I mentioned, the links work fine in FULL screen on a mobile device and work fine on a regular monitor.

The original web designer used the same background, but made a table over the image and inserted the text as images (.png) over the red squares and made the text links to the appropriate pages.

Does anyone know why MY links are working in mobile version?

Thanks in advance!    —    Mary Anne

[Weaver]

Hot links are not responsive, and are really obsolete in these days of smart phones. A good way to see what is going on on your site is to open it in a desktop.

Move the mouse left and right over those hot-link menus. Notice where the “finger” cursor changes back and forth from the standard pointer arrow. Then resize the screen narrower. Now do the same. The hot spots change. Eventually the screen gets so small that they don’t respond at all.

You might be able to use @media rules to get around this, but a better approach might be to use a 3 widget header widget area with the menus on the left and right, and the logo in the center.

[scrambler]

This is a pure HTML issue, and does not have anything to do with the theme.

Your map is using fixed coordinates, so it cannot be responsive. When the image scales down, the coordinates will no longer correspond to the right position.

The page below discusses the issue and offers a few solutions, like a plugin for responsive image maps, or using links with %positioning

[Gillian]

I use the Responsive Image Maps plugin for my image maps – works great and no setup required, just install and activate.

[Weaver]

@Gillian – thanks for that report. I didn’t know such a plugin existed.

[Gillian]

@weaver – I didn’t either 🙂  Someone (don’t remember who) mentioned it on this Forum recently and I tried it out on this page and it works great.

[graydog]

Yea!   The Responsive Image Maps plugin worked great.  It worked on my smart phone and my 8″ Samsung tablet.  whew.  Thanks so much!

[Author]

Posts