How do I create a delay on mouseover?

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:

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()

Or, since you’re using jQuery, the jQuery function 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:
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”);
$(“.infoPanel li a.current img”).show();

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

Thank you again for your help. Really appreciate it.