Home › Forums › Archived Forums › Not Theme Related › *Hot Link* Image Not Responsive on Mobile Device
- This topic has 6 replies, 4 voices, and was last updated 7 years, 1 month ago by
graydog.
-
AuthorPosts
-
May 3, 2015 at 15:12 UTC - Views: 6 #17710
graydog
ParticipantMy question involves this site:
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 AnneMay 3, 2015 at 16:05 UTC - Views: 4 #21806Weaver
KeymasterHot 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.
May 3, 2015 at 16:12 UTC #21807scrambler
ModeratorThis 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
May 7, 2015 at 01:04 UTC #21808Gillian
ModeratorI use the Responsive Image Maps plugin for my image maps – works great and no setup required, just install and activate.
May 7, 2015 at 15:00 UTC #21809May 7, 2015 at 23:11 UTC #21810Gillian
ModeratorMay 22, 2015 at 19:17 UTC - Views: 1 #21811graydog
ParticipantYea! The Responsive Image Maps plugin worked great. It worked on my smart phone and my 8″ Samsung tablet. whew. Thanks so much!
-
AuthorPosts
- The forum ‘ Not Theme Related’ is closed to new topics and replies.