HI there, I wonder if you can help me. I am doing a bit of javascript/jquery testing here and there and I have come up with the following http://antobbo.webspace.virginmedia.com/test/test.htm. Now first thing, you will notice when you land on the page that for less than a second you will see a big yellow div appearing and disappearing. This is the first issue. I have a div more_info that I hide away through jquery:

HTML Code:
...
<div id = "more_info" class = "more_info">

						<p>info on Item 1</p>
						<p>info on Item 2</p>
						<p>info on Item 3</p>
						<p>info on Item 4</p>
						<p>info on Item 5</p>
						<p>info on Item 6</p>
						<p>info on Item 7</p>
						<p>info on Item 8</p>
						<p>info on Item 9</p>
					</div>
...
Code:
...
.more_info
	{
		border:1px solid red;
		width:400px;
		height:400px;
		position:absolute;
		left:900px;
		top:300px;
		/*display:none;*/
		background-color:yellow;
	}
...
and the script:
Code:
...
function no_script(){
var info_div = document.getElementById('more_info');
info_div.style.display = "none";


$("#navigation li a").hover(
	function(){
	$(".more_info").css("display","block");
	}, function(){
	$(".more_info").css("display","none");
	}
	);

}
...
The function in the external script is called from the body tag in the html. Is this the reason why the div appears briefly when the page loads? How do I get around this and make sure that the div is hid straight away without flashing on my screen for a sec?

Second issue: when I get the first one fixed, what I would like to do is to ideally hover on the first item in the right-hand side list (under "select a design") and get the yellow div up with just the corresponding paragraph: so first list item gets "info on Item 1", second list item gets "info on Item 2" etc... Now, what's the best way to achieve this? I presume I need to first hide all the paragraphs, then send them as parameters to the function and then show them again. So assuming each paragraph has a para id so that paragraph 1 is para1 etch would the following be correct
HTML Code:
<div id = "navigation">
		<ul>
			<li><a href = "#" onHover = "no_script("para1")">gdkjgkdf</a></li>
			<li><a href = "#" onHover = "no_script("para2")">flkjgsldfgs</a></li>
			...
I am just trying to get a feeling for the best way to build or modify the attached script
thanks