CODEWITHSUNDEEP
javascripthtmlonmouseoveronmouseout
karaxuna
karaxuna

Reputation: 26940

onmouseover fails in chrome when posting or leaving page

I have onmouseover and onmouseout attributes on pictures on page. When submitting onmouseover and onmouseout cause images to fail (returns image source not found icon)

<input type="image" src="../../Content/Resources/save.png" onmouseover="mouseOverForImage('save', '../../Content/Resources/save_mouse_over.png')" 
               onmouseout = "mouseOverForImage('save', '../../Content/Resources/save.png')" id="save"
               title = "Save" />

And Javascript:

function mouseOverForImage(imgId, imgSrcs) {
        document.getElementById(imgId).src = imgSrcs;
    }

Upvotes: 3

Views: 1282

Answers (3)

Lazonaden
Lazonaden

Reputation: 141

You can try something like this

function mouseOverForImage(imgId, imgSrcs) { 

    var image = new Image(); 

    image.src = imgSrcs; 

    image.onload = function() { 
        document.getElementById(imgId).src = imgSrcs; 
    }; 

}

Upvotes: 2

NewUser
NewUser

Reputation: 287

In place of using mouseover and mouseout events try using mouseenter and mouseleave. It usually works in these types of problem.

Upvotes: 0

Oleg
Oleg

Reputation: 9359

I've made a page on jsfiddle to test your issue (note that you need to run the page in order to see the images with relative paths, that's a jsfiddle issue happening in all browsers).

Hover the [+] image button (it will turn into [?]) and click it. While the page is being loaded you can mouseover/out/over/out/over... as many times as you want and it will work: the image will change and no 404 will occur.

I am using Chrome 20.

This leads me to the following questions:

  1. What's your Chrome version and can you reproduce the issue in Safari? I recall Webkit had a bug that displayed images quite randomly...
  2. Have you posted the code exactly? Are you 100% sure that there's no missing quote, or "0" instead of "o", or some issue with letter case?
  3. When you submit the form, does your page's (or iframe's) URL change at the same time? If so - your relative paths won't work anymore and you'll get your 404. Can you test it by setting a full path to the image's src? Maybe also log the current url?
  4. Can some other code (onsubmit event?) interfere with your form? Can you post more code or create a jsfiddle that reproduces your issue?
  5. Do we/I understand your problem correctly? :)

Thanks.

Upvotes: 3

Related Questions