Hello, I'm currently working on a website that has an image slider with image maps embedded in each image. Everything works perfectly on desktop, but when it comes to mobile versions, things start to get messy. I was wondering if there is any way to dynamically create a new image map specifically for mobile devices or perhaps disable the image map altogether on smaller screens.
Below you can find the HTML code I've been using. I've attempted to use display:none within the @media queries of the CSS, but unfortunately, it didn't yield the desired results. Additionally, I also tried implementing Matt Stow's responsive image map plugin without success.
<div class="rslides_container">
<ul class="rslides" id="slider">
<li><img src="images/1.png" usemap="#map1"/>
<map name="map1">
<area shape="rect" coords="10,49,454,323" href="" title="" />
<area shape="rect" coords="509,48,960,322" href="" title=""/>
<area shape="rect" coords="298, 335, 433, 359" href="" title=""/>
<area shape="rect" coords="803, 333, 938, 356" href="" title=""/>
</map>
</li>
<li><img src="images/2.png" usemap="#map1"/>
<map name="map1">
<area shape="rect" coords="10,49,454,323" href="" title="" />
<area shape="rect" coords="509,48,960,322" href="" title=""/>
<area shape="rect" coords="298, 335, 433, 359" href="" title=""/>
<area shape="rect" coords="803, 333, 938, 356" href="" title=""/>
</map>
</li>
<li><img src="images/3.png" usemap="#map1"/>
<map name="map1">
<area shape="rect" coords="10,49,454,323" href="" title="" />
<area shape="rect" coords="509,48,960,322" href="" title=""/>
<area shape="rect" coords="298, 335, 433, 359" href="" title=""/>
<area shape="rect" coords="803, 333, 938, 356" href="" title=""/>
</map>
</li>
</ul>
</div>
Here is my current CSS:
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.rslides {
margin: 0 auto;
}
.rslides_container {
position: relative;
}