Construx

This works on a desktop web browser.  It doesn't work on iOS safari.

I attached a copy of it as I have not posted it yet.

link.html

If I take the link out of the two DIV statements (row and column) the link works.

I have links behind DIV statements that won't work on iOS.  I have been researching this problem and others have solved it by fixing the images from overflowing or z-index.  No picture goes over another and z-index just made the picture disappear.  Any help would be appreciated!

<style>
.column {
    float: left;
    width: 20%;
    padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
    content: "";
    clear: both;
    display: table;

}
</style>

<div class="row">
  <div class="column">
	<a href="https://www.google.com">
	<img src="Graphics/imdb.png" alt="IMDB"/></a>
  </div>
</div>

What process does everyone use to create an image map for touch on mobile phones?  Or does anyone know any good resources for this?

I'm using a script to resize the image map to the size of the phone.  Unsure if the code I'm using the resize is working.  This is what I have:

<script src="jquery.min.js"></script>

<script src="jquery.rwdImageMaps.min.js"></script>
<style>

    $(document).ready(function(e) {
        $('img[usemap]').rwdImageMaps();
    
        $('area').on('click', function() {
            alert($(this).attr('alt') + ' clicked');
        });
    });

@media only screen and (max-width:620px) {
  /* For mobile phones: */
      .menu, .main, .right {
        width:100%;
      }
}

</style>
</head>

<div><img src="editbay_mobile.jpg" style="width:100%;" usemap=“#avid”>
    <map name=“avid”>
        <area shape=“rect” coords=“150,290,510,290,150,390,510,390” href=“www.google.com”  />
        <area shape=“rect” coords=“150,410,550,410,150,510,550,510” href=“www.google.com”  />
    </map>
</div>