我需要为my website右侧的图像找到一个很好的替代方案。如您所见，它是带有鼠标悬停事件的图像映射。我需要在移动设备上复制相同的效果，但显然在移动设备上我无法使用onmouseover事件。
如果你在手机上查看它是有效的，但你需要保持图片“触摸”才能看到效果。
<div class="clock">
<img class="img-responsive" id="Image-Maps-Com-image-maps-2015-10-01-031428" src="http://zag-test.nowcommu.myhostpoint.ch/website/base.png" border="0" width="434" height="420" orgWidth="434" orgHeight="420" usemap="#image-maps-2015-10-01-031428" alt="" />
<map name="image-maps-2015-10-01-031428" id="ImageMapsCom-image-maps-2015-10-01-031428">
<area shape="rect" coords="432,418,434,420" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_60334" />
<area alt="" title="" href="" shape="poly" coords="18,295,124,405,167,310,125,258" style="outline:none;" target="_self" onclick="http://zag-test.nowcommu.myhostpoint.ch/website/1.png" onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/1.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/base.png';" />
<area alt="" title="" href="" shape="poly" coords="21,136,19,286,111,245,120,180" style="outline:none;" target="_self" onclick="http://zag-test.nowcommu.myhostpoint.ch/website/2.png" onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/2.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/base.png';" />
<area alt="" title="" href="" shape="poly" coords="23,124,135,20,179,124,128,170" style="outline:none;" target="_self" onclick="http://zag-test.nowcommu.myhostpoint.ch/website/3.png" onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/3.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/base.png';" />
<area alt="" title="" href="" shape="poly" coords="144,17,298,19,256,123,183,123" style="outline:none;" target="_self" onclick="http://zag-test.nowcommu.myhostpoint.ch/website/4.png" onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/4.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/base.png';" />
<area alt="" title="" href="" shape="poly" coords="306,23,413,136,310,178,261,128" style="outline:none;" target="_self" onclick="http://zag-test.nowcommu.myhostpoint.ch/website/5.png" onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/5.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/base.png';" />
<area alt="" title="" href="" shape="poly" coords="414,299,416,142,310,182,312,253" style="outline:none;" target="_self" onclick="http://zag-test.nowcommu.myhostpoint.ch/website6.png" onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/6.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/base.png';" />
<area alt="" title="" href="" shape="poly" coords="296,413,413,305,309,258,255,307" style="outline:none;" target="_self" onclick="http://zag-test.nowcommu.myhostpoint.ch/website/7.png" onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/7.png';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2015-10-01-031428').src= 'http://zag-test.nowcommu.myhostpoint.ch/website/base.png';" />
</map>
<p style=" margin-top: 20px; color: #000;" align="left">Ablauf eines Störfalls in einer Käserei –<br>Wir sind “in Time”.</p>
</div>