How do I create a delay on mouseover?

Hello,
I would be very grateful for some help. I would like to set a function to create a delay on images that appear when you mouseover the list of names on left side of my page (see link below). I have no .js knowledge.

This is the page with the list of names on the left needing the delay effect:
http://www.pauperspublications.com/projects2.html

Any help is appreciated.

Welcome to the SP forums. I’ve moved your question to our JS forum. The possibilities of getting an answer are much higher there :wink:

Grazie mille guido2004.

Try the native javascript function settimeout() http://www.w3schools.com/js/js_timing.asp

Or, since you’re using jQuery, the jQuery function delay() http://api.jquery.com/delay/

Thank you for your help on this. Unfortunately I am a beginner with javascript code and have no idea where I should be adding this jQuery function delay. I did try. It did not work.
I think it sais to add:
$(“div.”).delay(500);
Where do I add this? COLOR=“#B22222”[/COLOR]
Would you please be kind enough to tell me where in my javascript (below) I am to paste this?

here is my javascript:
<script type=“text/javascript”>
$(document).ready(function() {

$(“.infoPanel li a img”).hide();

$(“.infoPanel li a”).eq(0).addClass(“current”);
$(“a.current”).next().show();
$(“.infoPanel li a.current img”).show();

$(“.infoLink”).mouseover(function() {
if (this.className.indexOf(“current”) == -1) {
$(“a.infoLink”).delay(500); COLOR=“#B22222”[/COLOR]
$(“a.current”).next().hide();
$(“.infoPanel li a.current img”).hide();
$(“a.current”).removeClass(“current”);
$(this).addClass(“current”);
$(“a.current”).next().show();
$(“.infoPanel li a.current img”).show();
}
});

});
</script>
Thank you again for your help. Really appreciate it.