可点击网站形象不工作的iPhone和Android设备 [英] Clickable website image not working on iphone and android devices

问题描述

我用的是平台virb.com为我的网站和我具有让我的点击图片到iPhone和Android移动设备上运行的问题。某些链接有时工作，那么他们就无法工作。这会影响到网站上的两页 - 这里的网页链接和HTML code我的点击图片创建

I use the platform virb.com for my website and am having issues with getting my clickable images to work on iPhone and Android mobile devices. Some links work at times and then they don't work at all. This affects two pages on the site - here are the page links and HTML code I created for the clickable images.

http://stonewalters.com/world-keeps-turning

<div align="left"><img src="http://dl.dropbox.com/u/31856944/Virb/Splash_Title.png" target="_blank" title="World Keeps Turning - New Single" />
<div><img src="http://dl.dropbox.com/u/31856944/Virb/splash_body-2.jpg" usemap="#Map" height="391px" width="620px" /><map name="Map" id="Map">
<area shape="rect" coords="373,351,616,388" href="http://stonewalters.com/download-to-unlock" target="_blank" title="Download to unlock new music from Stone!" />
</map>
</div>

<div><img src="http://dl.dropbox.com/u/31856944/Virb/splash_share-2.png" usemap="#Map 2" height="31px" width="620px" /><map name="Map" id="Map 2">
<area shape="rect" coords="306,0,457,29" <a class="labs_facebook" href="http://api.awe.sm/url/share?channel=facebook&v=2&key=67967a8b27d8923cccd8531514f22fdac3921f86162e7c45708a0fefa509faab&tool=w80Xzb&url=http%3A%2F%2Flabs.topspin.net%2Flinkbuilder%2Fconfirm.php%3Fsessionid%3D72a01b48b5198ffc16827b270b8586b4%26fb%3D2&campaign=stonewalters-worldkeepsturning-72a01b48b5198ffc16827b270b8586b4" target="_blank" title="Share on Facebook" /></a>
<area shape="rect" coords="462,0,613,29" <a class="labs_twitter" href="http://api.awe.sm/url/share?channel=twitter&v=2&key=67967a8b27d8923cccd8531514f22fdac3921f86162e7c45708a0fefa509faab&tool=w80Xzb&url=http%3A%2F%2Flabs.topspin.net%2Flinkbuilder%2Fconfirm.php%3Fsessionid%3D72a01b48b5198ffc16827b270b8586b4%26fb%3D2&destination=http://twitter.com/share?text=Check+out+Stone%27s+latest+song+%27World+Keeps+Turning%27+and+get+a+free+download+of+it+now%21+ -%26url=AWESM_TARGET%26via=StoneWalters&campaign=stonewalters-worldkeepsturning-72a01b48b5198ffc16827b270b8586b4" target="_blank" title="Share on Twitter" /></a>
</map>
</div> 

http://stonewalters.com/download-to-unlock

<div align="center"><img src= "http://dl.dropbox.com/u/31856944/Virb/body_download-to-unlock-top-610.png" width="610px" height="252px" usemap="#Map"/></a>
<br>
<br>
</div>
<div align="center">
<script type="text/javascript" src="http://cdn.topspin.net/javascripts/topspin_core.js?aId=1336&timestamp=1341070107"></script><div class="topspin-widget topspin-widget-email-for-media"><object type="application/x-shockwave-flash" width="300" height="80" id="TSWidget153863" data="http://cdn.topspin.net/widgets/email2/swf/TSEmailMediaWidget.swf?timestamp=1341070107" bgColor="#000000">  <param value="always" name="allowScriptAccess" />  <param name="allowfullscreen" value="true" />  <param name="quality" value="high" />  <param name="movie" value="http://cdn.topspin.net/widgets/email2/swf/TSEmailMediaWidget.swf?timestamp=1341070107" />  <param name="flashvars" value="widget_id=http://cdn.topspin.net/api/v1/artist/1336/email_for_media/153863?timestamp=1341070107&amp;theme=white&amp;highlightColor=0x000000" /></object></div>
<div align="center"><img src="http://dl.dropbox.com/u/31856944/Virb/body_download-to-unlock-bottom-610.png" width="610px" height="417px" usemap="#Map 2" /></div>
<map name="Map" id="Map">
<area shape="rect" coords="138,25,474,49" href="http://www.stonewalters.com/download-to-unlock" title="Download to unlock music & join Stone's Inner Circle"/>
</map>
<map name="Map" id="Map 2">
<area shape="rect" coords="500,0,608,30" href="http://www.stonewalters.com/world-keeps-turning" title="World Keeps Turning - New Single"/>
<area shape="rect" coords="228,321,396,368" href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=SIC_WKT&cl=217252&ejc=2" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);" target="_blank" title="Join Stone's Inner Circle"/>
<area shape="rect" coords="500,386,608,416" href="http://www.stonewalters.com/world-keeps-turning" title="World Keeps Turning - New Single"/>
</map>
</div>

在PC上浏览的网站或MAC，所以我不知道是什么导致了问题时，以上code工作。任何建议/意见将不胜感激，因为我不知道自己还能做什么。谢谢！

The above code works when viewing the site on a PC or MAC so I'm not sure what's causing the issue. Any suggestions/comments would be grateful as I don't know what else to do. Thanks!

使用code正上方，如果我在这里放置code：

Using the code directly above, if I place the code here:

<map name="Map" id="Map 2" style="cursor:pointer">

在这个地图每一幅图像的COORDS无法识别。整个图像（含3 COORDS）成为一个大的可点击的形象。

The coords for each image in this map are not recognised. The entire image (containing the 3 coords) becomes one big clickable image.

推荐答案

移动Safari浏览器通过的东西，显然是可触像链接或按钮触摸事件。但是，如果你正在使用Javascript功能来触摸事件添加到其他HTML元素像＆LT; IMG＆GT; 或＆LT; D​​IV＆GT; 标签可以让Safari浏览器知道这是通过设置可触摸式的：

Mobile Safari passes touch events through for things that are obviously touchable like links or buttons. However, if you are using Javascript to add touch events to other html elements like an <img> or <div> tag you can let Safari know it's touchable by setting style:

cursor:pointer;

任一元件上或在元件上的CSS类

either on the element or in a css class on the element.

如果您可以添加CSS类到你的文件中的一个，你可以做这样的事情在头部分：

If you can add a css class to one of your files, you could do something like this in the head section:

<script>
    .mobil-click-element {
        pointer:cursor;
    }
</script>

 // Then put the class on the element you want to be clickable
 <div class="mobil-click-element">some other html</div>

如果您无法编辑，你可以直接把风格的元素，像这样的CSS

If you can't edit the css you can put the style directly on the element like so

 <img style="cursor:pointer" ... />

这篇关于可点击网站形象不工作的iPhone和Android设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！