Image Map

Hello!

I recently set up my first WordPress blog (www.planetlydia.com), and I have a graphic that I’d like to use in my sidebar to link to my pages. I’ve been trying to make it into an image map, but I couldn’t get it to work. I finally realized it was probably due to my theme being responsive, so I installed a plugin called “Responsive Image Maps”. The image is now appearing with all the proper links, but I’m having a strange issue with the links . . .

When I click on the box that should lead to my page, it does pull up the link for that page. However, somehow the original link doesn’t get cleared out, so the second link builds on top of it. For example: I start at “www.planetlydia.com” and click on the graphic for my archives page, and the url becomes “www.planetlydia.com/www.planetlydia.com/archives/, which of course leads to a 404 Not Found. I hope that makes sense . . . you can visit my blog and see for yourself. Just click on a page, and try to navigate to a new page.

I don’t think it’s an issue with WordPress or the plugin, because I tried pasting the code into an old blogspot blog and had the same issue. It must be the code, and I feel like I must be missing something super simple. The code for the image map is listed below:

‘<img src=”https://planetlydia.com/wp-content/uploads/2014/02/PL_Pages.jpg&#8221; usemap=”#mo10958″ width=”300″ height=”520″ alt=”click map” border=”0″ />
<map id=”mo10958″ name=”mo10958″>
<area shape=”rect” alt=”About” coords=”1,395,299,432″ href=”www.planetlydia.com/about/” target=”_self” />
<area shape=”rect” alt=”Archives” coords=”1,434,299,474″ href=”www.planetlydia.com/archives/” target=”_self” />
<area shape=”rect” alt=”Etc.” coords=”1,476,299,512″ href=”www.planetlydia.com/etc/” target=”_self” />
<area shape=”rect” alt=”Home” coords=”1,1,298,394″ href=”www.planetlydia.com” target=”_self” />
<area shape=”default” nohref alt=”” />
</map>’