Onmouseover Faster

[Piticu]

I've got a problem:(...I make a page...only for training.....but i've got some problem with the HOVER...i have to wait some time and after,the HOVER is work.Can help me someone to make it faster?pls..here is the page http://testepiticu.x10hosting.com/Piticu19/site2/index1.php and the code for the submenu center

<td valign="top" id="left_menu">			<table border="0">							<br />				<tr>					<td style="border:0" align="center">					<b><i><h2 style="color:#FFDEAD;text-decoration:underline overline">CATEGORIES:</h2></b></i>						<a href="" onmouseover='animal.src="submenu/animal2.png"' onmouseout='animal.src="submenu/animal.png"'><img src="submenu/animal.png" name="animal" border="0"></a><br />						<a href="" onmouseover='car.src="submenu/car2.png"' onmouseout='car.src="submenu/car.png"'><img src="submenu/car.png" name="car" border="0"></a><br />						<a  href="" onmouseover='cartoon.src="submenu/cartoon2.png"' onmouseout='cartoon.src="submenu/cartoon.png"'><img src="submenu/cartoon.png" name="cartoon" border="0"></a><br />						<a href="" onmouseover='celebrity.src="submenu/celebrity2.png"' onmouseout='celebrity.src="submenu/celebrity.png"'><img src="submenu/celebrity.png" name="celebrity" border="0"></a><br />						<a href="" onmouseover='digital.src="submenu/digital2.png"' onmouseout='digital.src="submenu/digital.png"'><img src="submenu/digital.png" name="digital"border="0"></a><br />						<a href="" onmouseover='fantasy.src="submenu/fantasy2.png"' onmouseout='fantasy.src="submenu/fantasy.png"'><img src="submenu/fantasy.png" name="fantasy"border="0"></a><br />						<a href="" onmouseover='fine.src="submenu/fine2.png"' onmouseout='fine.src="submenu/fine.png"'><img src="submenu/fine.png" name="fine"border="0"></a><br />						<a href="" onmouseover='holiday.src="submenu/holiday2.png"' onmouseout='holiday.src="submenu/holiday.png"'><img src="submenu/holiday.png" name="holiday" border="0"></a><br />						<a href="" onmouseover='nature.src="submenu/nature2.png"' onmouseout='nature.src="submenu/nature.png"'><img src="submenu/nature.png" name="nature"border="0"></a><br />						<a href="" onmouseover='movie.src="submenu/movie2.png"' onmouseout='movie.src="submenu/movie.png"'><img src="submenu/movie.png" name="movie"border="0"></a><br />						<a href="" onmouseover='space.src="submenu/space2.png"' onmouseout='space.src="submenu/space.png"'><img src="submenu/space.png" name="space"border="0"></a><br />					</td>				<tr>			</table>		</td>

and here is for the submenu left:

<td valign="top" id="content">			<table border="0" width="700px" class="one" align="center">						<br />				<tr align="center">					<td colspan=3 align="center" style="border:0">						<b class="one" style="color:#FFDEAD"><u><i>Top Quality Free Wallpaper for your Desktop</i></u></b><br />						<b style="color:#FFDEAD">Click on images to see the whole selection of wallpapers in each category<b><br /><br />					</td>				</tr>				<tr valign="middle" align="center">					<td style="border:0;color:#FFDEAD">					<b>Animals:</b><br />						<a href="animals.htm" onmouseover='animals.src="images/animals1.jpg"' onmouseout='animals.src="images/animals.jpg"'><img src="images/animals.jpg" 						name="animals"></a>					</td>					<td style="border:0;color:#FFDEAD">					<b>Cars:</b><br />					<a href="cars.htm" onmouseover='cars.src="images/cars1.jpg"' onmouseout='cars.src="images/cars.jpg"'><img src="images/cars.jpg" 					name="cars"></a>					</td>					<td style="border:0;color:#FFDEAD">					<b>Cartoons:</b><br />						<a href="cartoons.htm" onmouseover='cartoons.src="images/cartoons1.jpg"' onmouseout='cartoons.src="images/cartoons.jpg"'><img src="images/cartoons.jpg" name="cartoons"></a>					</td>				</tr>				<tr valign="middle" align="center">					<td style="border:0;color:#FFDEAD">					<b>Celebrities:</b><br />					<a href="celebrity.htm" onmouseover='celebs.src="images/celebs1.jpg"' onmouseout='celebs.src="images/celebs.jpg"'><img src="images/celebs.jpg" name="celebs"></a>					</td>									<td style="border:0;color:#FFDEAD">					<b>Digital Art & 3D:</b><br />						<a href="digital.htm" onmouseover='digit.src="images/digital1.jpg"' onmouseout='digit.src="images/digital.jpg"'><img src="images/digital.jpg" name="digit"></a>					</td>					<td style="border:0;color:#FFDEAD">					<b>Fantasy Art:</b><br />						<a href="fantasy.htm" onmouseover='fantas.src="images/fantasy1.jpg"' onmouseout='fantas.src="images/fantasy.jpg"'><img src="images/fantasy.jpg" name="fantas"></a>					</td>				</tr>				<tr valign="middle" align="center">					<td style="border:0;color:#FFDEAD">					<b>Fine Art:</b><br />						<a href="art.htm" onmouseover='art.src="images/art1.jpg"' onmouseout='art.src="images/art.jpg"'><img src="images/art.jpg" name="art"></a>					</td>					<td style="border:0;color:#FFDEAD">					<b>Holidays:</b><br />						<a href="holidays.htm" onmouseover='holi.src="images/holidays1.jpg"' onmouseout='holi.src="images/holidays.jpg"'><img src="images/holidays.jpg" name="holi"></a>					</td>					<td style="border:0;color:#FFDEAD">					<b>Nature:</b><br />						<a href="nature.htm" onmouseover='natur.src="images/nature1.jpg"' onmouseout='natur.src="images/nature.jpg"'><img src="images/nature.jpg" name="natur"></a>					</td>				</tr>			</table>		</td>

I'm sorry if i make some mistakes on the post....

[jmc92]

Well im on a mobile device at the moment and for what it is I think it works fairly quickTry validating your page with the w3validator and using the html tidy and that might improve the speed a little bitBut the main reason for slow mouseover is the quality of your images

[jeffman]

rollover images need to be preloaded in some fashion. That way they already exist in memory when you need them. If not preloaded, the user must wait for them to download. Preloading can be done with sprites, CSS, or JavaScript. Most authors use JavaScript. You can Google that. Sprites are a good idea when the images are pretty small. You can Google that too.You should also read about modern JavaScript. Using names and dot syntax to get a reference to a page element is a very old way of doing things. There's an excellent chance that only Explorer will be able to make it work. Give page elements id's instead. Learn to use document.getElementById() to get a reference to a page element.I could go on, but that's enough for now.

[dsonesuk]

tables, onmouseover, onmouseout, swapping img tags, that's frightening...nevermindtypical javascript preload script <script type="text/javascript">/*<![CDATA[*//*---->*/function MM_preloadImages() { //v3.0var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();var i,j=d.MM_p.length,a=MM_preloadImages.arguments;for(i=0; i<a.length; i++)if (a.indexOf('#')!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}}function initpreload() {MM_preloadImages('image1.jpg','image2.jpg','image3.jpg');}window.onload=initpreload;/*--*//*]]>*/</script>

[Piticu]

thx for help....1 month ago i've started to learn about HTML,CSS......and i'm not very good:)