2

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>

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!

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

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

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

user1494241
  • 25
  • 1
  • 4

1 Answers1

3

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;

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

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>

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

 <img style="cursor:pointer" ... />
Cliff Ribaudo
  • 8,932
  • 2
  • 55
  • 78