Q:

Responsive image with hover effect

I currently have an image with a hover effect that looks like this:
<img src="jb-400x500.jpg" alt="yada" width="400" height="500" onmouseover="this.src='jb-400x500-2.jpg';" onmouseout="this.src='jb-400x500.jpg';" />

This works fine, except I would like for only the second image (jb-400x500-2.jpg) to be displayed for mobile viewers. I tried using srcset to achieve this, but doing so gets rid of the mouseover effect for desktop viewers. Is there any way to make the two work together?
Thanks.

A:

If you include a srcset on a browser that supports it, the src attribute will be ignored. So your script will need to change the srcset as well as, or instead of, the src attribute. E.g.
<img src="jb-400x500.jpg" alt="yada" width="400" height="500"
  srcset="jb-400x500-2.jpg 720w,jb-400x500.jpg 1x"
  onmouseover="this.setAttribute('srcset','jb-400x500-2.jpg 720w,jb-400x500-2.jpg 1x');"
  onmouseout="this.setAttribute('srcset','jb-400x500-2.jpg 720w,jb-400x500.jpg 1x');" />

