1

I have an image map and I made a media query so that the image changes at a specific width. How can I write code so that I can change the coords for the new image?

HTML

<img src="../images/journey-final-01.jpg" alt="journey" usemap="#journeymap">
    <map id="map_ID" name="journeymap">
        <area target="" alt="flag1" title="Milestone 1" href="" coords="1356,644,1482,809" shape="rect">
        <area target="" alt="flag2" title="Milestone 2" href="" coords="808,595,900,710" shape="rect">
        <area target="" alt="flag3" title="Milestone 3" href="" coords="1361,320,1431,405" shape="rect">
        <area target="" alt="flag4" title="Milestone 4" href="" coords="1124,161,1190,248" shape="rect">
        <area target="" alt="cap" title="DDA" href="" coords="1173,110,1359,5" shape="rect">
    </map>

CSS

body img{
width: 100vw;
height: 100vh;
}

@media only screen and (max-width: 600px) {
    body img {
        content: url("../images/journey-mobile-01.jpg");
    }
}
Paul T.
  • 4,703
  • 11
  • 25
  • 29
Parz
  • 13
  • 2
  • 1
    You won't be able to change the `area` element attributes using a CSS media query. You'll need to write some JS to do it. – Rory McCrossan Mar 09 '21 at 22:13
  • @RoryMcCrossan do you have any advice how to go about that? Or where I can get started to find out how to do that with JS? – Parz Mar 09 '21 at 22:26
  • Create a runnable snippet starting with this and see where you get with it $('#map_ID area').mouseover(function() { console.log($(this).attr("coords")); }); Closely Related Reusable Code: https://stackoverflow.com/questions/3379583/using-jquery-to-change-image-map-coord-values https://stackoverflow.com/questions/2567403/how-to-get-top-left-x-y-of-image-map-with-javascript-jquery https://stackoverflow.com/questions/12882869/dynamically-generate-map-area-coords-from-clicks-over-an-image-jquery-or-javasc https://stackoverflow.com/questions/7844399/responsive-image-map – react_or_angluar Mar 09 '21 at 22:32

0 Answers0