I'm trying to achieve the same thing on mobile view only. I have setup to hide certain images on mobile and certain images on desktop. Should I first cancel out the hide/view code and update the images using the code on mobile versions and then reactivate my hide/view code in CSS?
Here is my image map for the first image in the view on mobile:
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="section 2 mobile.png" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="Get Truth Talks Card Deck" title="Get Truth Talks Card Deck" href="https://www.paypal.com/instantcommerce/checkout/XEJC62YKRBXMY" coords="889,1387,162,1137" shape="rect">
</map>
For access my page is https://truth-talks.squarespace.com/ and its password protected
PW: truthtalks