For some reason, I just got an urge to make a tutorial.

So I did.

:lol:

The art of splash screens is very simple.

So we start out making a picture,preferably 250 x 250, if you need a simple but fast-loading image, make a smaller one, or you could as well use a small colour pallete.

Now create the passive image. Save it as *.png,*.gif or *.jpeg(I prefer one of those).
Note: The following step is not mandatory!
You now need to do a hover image that's based on the passive one.

Code:
<html>
<head>
<title>Untitled</title>
<style>
.splash {
margin-left: auto;
margin-right: auto;
text-align: center; /* center the image in some browsers */
}
</style>
<script type="text/javascript">
<!--

function newImage(arg) {
	if (document.images) {
 *rslt = new Image();
 *rslt.src = arg;
 *return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
 *for (var i=0; i<changeImages.arguments.length; i+=2) {
 *	document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
 *}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
 *passive/image/path/here= newImage("passive/image/path/here");
 *preloadFlag = true;
	}
}

// -->
</script>
</head>
<body>
<div class="splash">
<img name="splash_screen" src="passive/image/path/here" width="300" height="300" border="0" alt="" usemap="#splash_screen_Map" /></div>
<map name="splash_screen_Map">

<area shape="rect" alt="" coords="0,0,300,300" href="home.php"
	onmouseover="changeImages('splash_screen', 'hover/path/here'); return true;"
	onmouseout="changeImages('splash_screen', 'passive/image/path/here'); return true;"
	onmousedown="changeImages('splash_screen', 'hover/image/path/here'); return true;"
	onmouseup="changeImages('splash_screen', 'hover/image/path/here'); return true;">
</map>
</body>
</html>
I think this works!

Just reply here and I'll fix the problem.

:lol:
----------
Fixed some errors.
Converted to Javascript.