Question

I have a few “a href” image links and hovers on a website for navigation (http://www.byrdnick.com, in the non-mobile version of the site). It seems that these image links confuses iOS browsers. When you tap the image link once, it changes to the hover image. When you tap the hover image, nothing happens. When you tap the hover image a second time, you are finally redirected to the link.

Is there any way I can make these image links work or am I going to have to try a whole new method like a map or something?

Thanks in advance to all you gurus who help guys like me out!

Answer 1

This is because of all the strange stuff your psd2css.js javascript does to tweak your divs and links.

I never used this tool, but it seems that your Web page was generated using an tool called psd2cssonline? This tool seems to add some obscure treatments behind the scenes to all your <a href> links. This is easy to see in the psd2css.js file, once the document is loaded, the script adds some magic to all your <img> hover functions.

I didn’t study the whole javascript added by this tool, but I’m pretty sure that it is the reason of the problems. This tools does not seem to be compatible with touch-screen devices or somehow does mess with touch events in a mobile environment where “hover” are non-sense (you can’t “hover” an item on a touch-screen!), and will probably need to be updated to be able to manage mobile versions of the web sites it generates.

Meanwhile, you may try to disable this script (and everything else that may be generated by this tool to automatically add behavior to your links) when your website is accessed on mobile, to avoid messing with the “hover” events in such cases and simply keep the standard behavior that you have without any similar script.