I have customised this javascript slideshow based on prototype which works perfectly:

Code:
<script type="text/javascript">
// this array consists of the id attributes of the divs we wish to alternate between
			var divs_to_fade = new Array('slideshow1', 'slideshow2', 'slideshow3', 'slideshow4', 'slideshow5', 'slideshow6');
		
			// the starting index in the above array.  It should be set to the value of the div which doesn't have the CSS Display property set to "none"
			var i = 0;
			
			// the number of milliseconds between swaps.  Default is five seconds.
			var wait = 5000;

			// the function that performs the fade
			function swapFade() {
				Effect.Fade(divs_to_fade[i], { duration:1, from:1.0, to:0.0 });
				i++;
				if (i == 6) i = 1;
				
				Effect.Appear(divs_to_fade[i], { duration:1, from:0.0, to:1.0 });
			}
				
			function swapNavy() {	
			
	if (i == 1) {Element.addClassName.delay(0.4,'navy', 'a') && Element.removeClassName.delay(0.2,'navy', 'e'); }
	if (i == 2) {Element.addClassName.delay(0.4,'navy', 'b') && Element.removeClassName.delay(0.2,'navy', 'a'); }
	if (i == 3) {Element.removeClassName.delay(0.2,'navy', 'b') && Element.addClassName.delay(0.4,'navy', 'c'); }
	if (i == 4) {Element.removeClassName.delay(0.2,'navy', 'c') && Element.addClassName.delay(0.4,'navy', 'd'); }
	if (i == 5) {Element.removeClassName.delay(0.2,'navy', 'd') && Element.addClassName.delay(0.4,'navy', 'e'); }
			}

			// the onload event handler that starts the fading.
			function startPage() {
				setInterval('swapFade()',wait);
				setInterval('swapNavy()',wait);	
			}

</script>
</head>

<body onload="startPage()">
The function swapNavy changes the css of the menu bar (an arrow beneath) to show which category the image in the slideshow is illustrating.

What i'm trying to do now is to make this function swapNavy stop if there's a mouseover on the menu and continue on mouseout so that there never are 2 arrows appearing at the same time in the menu.

I tried this:

Code:
function swapNavy() {	if (!Event.observe('navy',"mouseover")) {
			
	if (i == 1) {Element.addClassName.delay(0.4,'navy', 'a') && Element.removeClassName.delay(0.2,'navy', 'e'); }
	if (i == 2) {Element.addClassName.delay(0.4,'navy', 'b') && Element.removeClassName.delay(0.2,'navy', 'a'); }
	if (i == 3) {Element.removeClassName.delay(0.2,'navy', 'b') && Element.addClassName.delay(0.4,'navy', 'c'); }
	if (i == 4) {Element.removeClassName.delay(0.2,'navy', 'c') && Element.addClassName.delay(0.4,'navy', 'd'); }
	if (i == 5) {Element.removeClassName.delay(0.2,'navy', 'd') && Element.addClassName.delay(0.4,'navy', 'e'); }}
	
			}
but its not working. What should i do?
Thanks