0

I want an image to "turn" into another image when hovering. So, basically there is an image (image1.png) on a page, and when hovering it, it should simply show another imagine (image2.png) instead of the first one. I tried using this and it works perfectly well:

<img src='Image1.png' width='100' height='100'
 onmouseover="this.src='Image2.png';" 
onmouseout="this.src='Image1.png';" />

None of the images have links, that's why I didn't use any of the "a hover" solutions.

However, now I just realised that it will only work on computers and not on smart devices since they don't really have the hover function. But since the website has quite a few smart device users, it's really important that it works for them as well.

Is there some solution to that?

My JS skills are very limited, so I haven't been able to figure it out yet.

Thanks in advance for any help!

Janne
  • 1
  • look at this: http://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers AND this too :http://www.hnldesign.nl/work/code/mouseover-hover-on-touch-devices-using-jquery/ – Archish Jun 21 '16 at 11:04

1 Answers1

0

My personal experience, its better to use CSS for these type of things and you can specify absolute path in CSS no need of links for images (../../.)

Again, you cannot have hover on mobile devices but you can change hover to touch-click. This is currently being discussed here: Changing :hover to touch/click for mobile devices

Community
  • 1
  • 1
rocktopus
  • 64
  • 1
  • 13