Resize image map when reduced image shown on browser

• 

  ajbraithwaite2015 · Member · Jan 27, 2015 at 4:36 am

  • Copy link
  • Add topic to favorites

  I have a Table of Contents show in a single 900×900 px image, this consists of a background picture with text highlighted on it.

  There is then an image map so that clicks over each piece of text links to the page corresponding to that text.

  This works great …. until it is displayed on a device with a lower resolution such as an iPad, tablet or phone where the web page is resized to display on the smaller screen. Now the image map doesn’t correctly overlay the image and the links don’t work.

  Since I can’t use any form of Javascript solution here does anyone have any ideas to either correct the image map to the displayed image size or find out from the client browser what resolution the site is being displayed at so that a smaller index image can be used.

  The blog I need help with is: (visible only to logged in users)

• 

  shawnajroberts · Member · Jan 30, 2015 at 12:27 am

  • Copy link

  I would suggest digging into responsive mobile queries. We have a short intro here:

  http://en.support.wordpress.com/custom-design/custom-css-media-queries/

  There are links to more resources at the bottom of the document.

• 

  ajbraithwaite2015 · Member · Jan 30, 2015 at 2:51 am

  • Copy link

  Thank you for your help Shawna. I’ll go and read that.

• 

  shawnajroberts · Member · Jan 30, 2015 at 4:50 am

  • Copy link

  Let me know if there’s something I can help with! :)

  You may also want to check out our CSS forum. A bunch of CSS gurus hang out over there:

  https://en.forums.wordpress.com/forum/css-customization