Hi i had a php page which show thumbnail images from a database. I need to show enlarged image when mouse roll over to that thumbnail one. Pre-loading of all of that images is not possible ( it will take time to page loading ) . It must be load and show when mouse over. And disappear when mouse out.


[Sorry if the post is in incorrect position ]
Please help me
Thanks
Rajeesh

Load on mouseover especially for large images, is unacceptably slow, mouseover should appear immediately, nobody will wait.
load the thumbnails in the body, then load the large images in the background so that the appearance of immediate is maintained.

This code accomplishes it for me

<!--snip-->
<img width='320' height='240' Alt='Click for more pictures of this very interesting wreck' src='/slides/drive010a.jpg' onmouseout='src="/slides/drive010a.jpg";' onmouseover='src="/slides/drive011a.jpg";'
onclick="open('/slides.php','_parent',',,,,,,');">
<br>That house on Nuttby Mountain<br>
Always looking for new properties to renovate and restore
<!--snip-->
</body>
<script type='text/javascript'>
<!-- Begin 
image1 = new Image();
image1.src = '/slides/drive011a.jpg';
// End -->
</script>
</html>

the javascript in the code above, runs after the page is completely displayed, loads the mouseover image drive011a, and it appears immediately on mouseover of the image in the body. There can be any number of images in the javascript, and they will background load,
It should not take much modifiaction of the database query page to preload the images

This article has been dead for over six months. Start a new discussion instead.