Jump to content

Onmouseover Faster


Piticu
 Share

Recommended Posts

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....

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...