onmouseover not working on iPad landscape, Safari or Chrome

Question

I currently have a series of images that, when onmouseover is activated on desktop, it will display another image in its place. This is working fine for all desktop, mobile and tablet browsers - EXCEPT for landscape on iPad Safari/Chrome.

I'm mainly puzzled because it works fine in portrait, but once you change the iPad to landscape - tapping on the images has no effect. We also have a script that refreshes the pages on orientation change, but I don't think that would be causing any issues. Please correct me if I am wrong.

Here's a excerpt of our code:

<img src="/getmedia/b69c7c54-e84e-486d-b9fb-b89644b0c7fe/Claire-1.jpg?width=224&amp;height=224&amp;ext=.jpg" alt="Claire" title="Claire" class="team-member-static4" onmouseover="jQuery(this).attr('src','/getmedia/6abe9a6f-0144-470e-8dc5-3124c1446642/Claire-2.jpg?width=224&amp;height=224&amp;ext=.jpg').stop.toggle();" onmouseout="jQuery(this).attr('src','/getmedia/b69c7c54-e84e-486d-b9fb-b89644b0c7fe/Claire-1.jpg?width=224&amp;height=224&amp;ext=.jpg');">

Many thanks.

Are you sure the image has not been covered by another element? A z-index issue? Also, if you can help it, this shouldn't be used inline with the element. — evu, Oct 01 '14 at 09:43
http://stackoverflow.com/search?q=mouseover+mobile - for example http://stackoverflow.com/questions/4755505/how-to-recognize-touch-events-using-jquery-in-safari-for-ipad-is-it-possible - PS how about not using inline code. Impossible to read - and shorten the URL too — mplungjan, Oct 01 '14 at 09:43
I really don't think it's impossible to read mplungjan, but thanks for your valuable input. I didn't personally write that line of code, one of the developers did - but I'm now tasked with finding a solution. No z-index issue from what I can see evu. — Chris Kernaghan, Oct 01 '14 at 09:59

score 0 · Answer 1 · answered Oct 01 '14 at 12:29

It could look like this:

var claire = {}
$(function() {
  claire.$img = $("img[alt='Claire']");
  claire.on=claire.$img.data("on")+'?width=224&amp;height=224&amp;ext=.jpg';
  claire.off=claire.$img.attr("src");
  claire.$img.on('mouseover touchstart',function(){ 
    $(this).prop("src",claire.on) // .stop.toggle(); // why toggle?
  })
  .on('mouseout touchend',function(){ 
     $(this).prop("src",claire.off);
  });

Using

<img src="/getmedia/b69c7c54-e84e-486d-b9fb-b89644b0c7fe/Claire-1.jpg?width=224&amp;height=224&amp;ext=.jpg" 
alt="Claire" title="Claire" class="team-member-static4" 
data-on="/getmedia/b69c7c54-e84e-486d-b9fb-b89644b0c7fe/Claire-1.jpg" />

onmouseover not working on iPad landscape, Safari or Chrome

1 Answers1