0

I have an imagemap with several mapped areas. I want on mouseover to overlay my imagemap (essentially my backgroundimage) with previously loaden images. The overlaying images have exactly the size of my backgroundimage and need to fadeIn when the mouse enters the mapped areas, and fadeOut when the mouse leaves. I want to accomplish this with pure jQuery, no CSS (with overlaying the images previously, display:none and than fading one into each other, etc. - I am aware that there are such solutions, as proposed here e.g. JQuery mouseover image overlay). There should be a way to paste an image over an existing one, without hiding it in a div tag or something, shouldnt there?

If code is needed, I can provide. But I rather want a hint and figure it out myself - thus I learn more :)

Community
  • 1
  • 1
Maccaroni
  • 19
  • 7
  • set the img src= to the new image? – dhc Oct 16 '14 at 21:57
  • @dhc Nope, that will leave me with a white flash when the new image is shown. – Maccaroni Oct 16 '14 at 21:59
  • use a canvas element and blit in the new image? (you may have to manage image maps yourself, though). Is there a reason you don't want a hidden div you can fade in? – dhc Oct 16 '14 at 22:17
  • @dhc i was just interested weather that will work just with jQuery. I want to keep it as simple as possible since it needs to go into Joomla 2.5.9 and the more extra stuff is used, the more complicated it seems to implement it. I might go with the hidden divs... I was just curious weather that would work with pure jQuery. – Maccaroni Oct 17 '14 at 14:43
  • Do you still get the white flash if you pre-load the image src? (http://stackoverflow.com/questions/901677/the-definitive-best-way-to-preload-images-using-javascript-jquery) – dhc Oct 17 '14 at 15:58
  • @dhc I am preloading the images, yes. And yes, I get the white flash because I am replacing one image with the other. – Maccaroni Oct 17 '14 at 16:21

0 Answers0