manix Posted July 4, 2011 Share Posted July 4, 2011 I believe this is the right section... So I have a few images that have to change their sources on mouse over and on mouse out but for some reason they're not changing at the first time I hover over them, although a few seconds later they start working perfectly good, my question is why? You can even check them out www.manix.freehosting.bg and see what the problem is.. Thanks in advance EDIT: For non-chrome users first click "Wce pak.. produlji na swoi puck >> " on the index page Link to comment https://forums.phpfreaks.com/topic/241084-onmouseover-onmouseout-delay-on-load-or-sth/ Share on other sites More sharing options...
codefossa Posted July 5, 2011 Share Posted July 5, 2011 <img src='./image2.jpg' style='display: none;'> <img src='./image1.jpg' onmouseover='this.src="./image2.jpg"' onmouseout='this.src="./image1.jpg"'> Preload the second images to avoid them having to download them when you hover. This way they're cached for when they need to show. Link to comment https://forums.phpfreaks.com/topic/241084-onmouseover-onmouseout-delay-on-load-or-sth/#findComment-1238544 Share on other sites More sharing options...
Adam Posted July 5, 2011 Share Posted July 5, 2011 As Kira mentioned, the reason why the images don't show up instantly is because the browser hasn't download them yet. Until that 'mouseover' event occurs, the browser knows nothing about them. JavaScript 'image pre-loading' is the technique of creating an Image object (an object representation of an image tag) outside of the DOM-tree, and setting the src property so that the browser downloads it, even though it's not actually used. When the mouseover event then occurs, the browser has already (or is likely to have by that point) downloaded the image and has it cached, ready to switch with the original. These days though that's a fairly dated technique. CSS is perfectly capable of pre-loading images and even altering hover states using the :hover pseudo-class (you've probably used it before for links). In-fact there's probably more users about that will support a CSS implementation than JS now-a-days. The best way is to only use a single image (cutting out any pre-loading concerns) and manipulate the mark-up/CSS to only show part, or parts, of it at a time. Have a look about on Google for some CSS-based techniques, is my advice basically. Link to comment https://forums.phpfreaks.com/topic/241084-onmouseover-onmouseout-delay-on-load-or-sth/#findComment-1238580 Share on other sites More sharing options...
manix Posted July 5, 2011 Author Share Posted July 5, 2011 thank you so much for your replies ! Link to comment https://forums.phpfreaks.com/topic/241084-onmouseover-onmouseout-delay-on-load-or-sth/#findComment-1238585 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.