可点击的网站图像不适用于 iphone 和 android 设备
Posted
技术标签:
【中文标题】可点击的网站图像不适用于 iphone 和 android 设备【英文标题】:Clickable website image not working on iphone and android devices 【发布时间】:2012-07-02 04:48:00 【问题描述】:我的网站使用 virb.com 平台,但在让我的可点击图像在 iPhone 和 android 移动设备上运行时遇到问题。有些链接有时会起作用,然后它们根本不起作用。这会影响网站上的两个页面 - 这是我为可点击图像创建的页面链接和 html 代码。
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" /><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" /><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" usemap="#Map"/></a>
<br>
<br>
</div>
<div align="center">
<script type="text/javascript" src="http://cdn.topspin.net/javascripts/topspin_core.js?aId=1336×tamp=1341070107"></script><div class="topspin-widget topspin-widget-email-for-media"><object type="application/x-shockwave-flash" 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&theme=white&highlightColor=0x000000" /></object></div>
<div align="center"><img src="http://dl.dropbox.com/u/31856944/Virb/body_download-to-unlock-bottom-610.png" 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 上查看网站时有效,所以我不确定是什么导致了问题。任何建议/cmets 将不胜感激,因为我不知道还能做什么。谢谢!
直接使用上面的代码,如果我把代码放在这里:
<map name="Map" id="Map 2" style="cursor:pointer">
无法识别此地图中每个图像的坐标。整张图片(包含 3 个坐标)变成一张可点击的大图。
【问题讨论】:
【参考方案1】:Mobile Safari 通过链接或按钮等明显可触摸的东西传递触摸事件。但是,如果您使用 Javascript 向其他 html 元素(如 <img>
或 <div>
标签)添加触摸事件,您可以通过设置样式让 Safari 知道它是可触摸的:
cursor:pointer;
在元素上或在元素上的 css 类中。
如果您可以将 css 类添加到您的文件之一,您可以在 head 部分执行类似的操作:
<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,你可以像这样直接把样式放在元素上
<img style="cursor:pointer" ... />
【讨论】:
谢谢克里夫。我在哪里放置您在我的 HTML 中提供的代码?我只能对 HTML 进行更改。我仍然无法让它工作。 我会把上面的答案放在我的答案中。 我仍然无法让它工作。我尝试了你提到的两种方法,我一定做错了什么。如果我要使用您将样式直接放在元素上的第二个选项 - 我发布的 html 到底在哪里放置代码?我是否将其放在图像的每个地图坐标之后? 好吧,您希望哪些特定项目不可点击。引用导致问题的 html 行。 想通了...现在只需要更新页面。再次感谢您的帮助克里夫! :)以上是关于可点击的网站图像不适用于 iphone 和 android 设备的主要内容,如果未能解决你的问题,请参考以下文章
加载用户图像适用于模拟器,但不适用于 iphone xcode 6 Swift
screenShot代码不适用于ipad,适用于iphone
Google AdMob 不适用于 iPhone 7 和 7 Plus 等大屏幕设备的 Xamarin Form iOS