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.
I think this works!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>
Just reply here and I'll fix the problem.
:lol:
----------
Fixed some errors.
Converted to Javascript.
