Making a splash screen

**1337elite** · 02-28-2006, 11:23 AM

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:

&#60;html&#62;
&#60;head&#62;
&#60;title&#62;Untitled&#60;/title&#62;
&#60;style&#62;
.splash {
margin-left&#58; auto;
margin-right&#58; auto;
text-align&#58; center; /* center the image in some browsers */
}
&#60;/style&#62;
&#60;script type=&#34;text/javascript&#34;&#62;
&#60;&#33;--

function newImage&#40;arg&#41; {
	if &#40;document.images&#41; {
 *rslt = new Image&#40;&#41;;
 *rslt.src = arg;
 *return rslt;
	}
}

function changeImages&#40;&#41; {
	if &#40;document.images && &#40;preloadFlag == true&#41;&#41; {
 *for &#40;var i=0; i&#60;changeImages.arguments.length; i+=2&#41; {
 *	document&#91;changeImages.arguments&#91;i&#93;&#93;.src = changeImages.arguments&#91;i+1&#93;;
 *}
	}
}

var preloadFlag = false;
function preloadImages&#40;&#41; {
	if &#40;document.images&#41; {
 *passive/image/path/here= newImage&#40;&#34;passive/image/path/here&#34;&#41;;
 *preloadFlag = true;
	}
}

// --&#62;
&#60;/script&#62;
&#60;/head&#62;
&#60;body&#62;
&#60;div class=&#34;splash&#34;&#62;
&#60;img name=&#34;splash_screen&#34; src=&#34;passive/image/path/here&#34; width=&#34;300&#34; height=&#34;300&#34; border=&#34;0&#34; alt=&#34;&#34; usemap=&#34;#splash_screen_Map&#34; /&#62;&#60;/div&#62;
&#60;map name=&#34;splash_screen_Map&#34;&#62;

&#60;area shape=&#34;rect&#34; alt=&#34;&#34; coords=&#34;0,0,300,300&#34; href=&#34;home.php&#34;
	onmouseover=&#34;changeImages&#40;&#39;splash_screen&#39;, &#39;hover/path/here&#39;&#41;; return true;&#34;
	onmouseout=&#34;changeImages&#40;&#39;splash_screen&#39;, &#39;passive/image/path/here&#39;&#41;; return true;&#34;
	onmousedown=&#34;changeImages&#40;&#39;splash_screen&#39;, &#39;hover/image/path/here&#39;&#41;; return true;&#34;
	onmouseup=&#34;changeImages&#40;&#39;splash_screen&#39;, &#39;hover/image/path/here&#39;&#41;; return true;&#34;&#62;
&#60;/map&#62;
&#60;/body&#62;
&#60;/html&#62;

I think this works!

Just reply here and I'll fix the problem.

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

**sh4d0w** · 02-28-2006, 07:58 PM

Originally posted by 1337elite@8 Hours Ago
I think this works!

Just reply here and I'll fix the problem.

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

[snapback]158881[/snapback]

Okay, it's a good tutorial and all, but dont say "I think this works" lol. Makes it seem like you're not sure of what you're doing. Instead, put an example of what that code does. (=

That way, you're sure it works the way you have it set up.
Other than that, it's good! Alot of people might like this, if they want a splash on their site

***unit_number_43*** · 03-01-2006, 01:11 AM

The effect will work, but it's iffy. I used to use the same technique for rollovers, they always had a lot of lag in IE and sometimes didn't work at all.

***Samuel*** · 03-02-2006, 03:50 PM

Why not just use, Flash or a plain hyperlinked image?

/lost

***unit_number_43*** · 03-02-2006, 04:29 PM

Using javascript is even less accessible. Alot of people have javascript turned off and don't even realize it.

***Samuel*** · 03-02-2006, 05:04 PM

Hahah xD

**1337elite** · 03-11-2006, 08:58 AM

Example: http://elite.silgrad.com <-- My geeky Morrowind site :P

» Search Forums

» Online Users: 23,548

» Site Navigation

» Stats

Thread: Making a splash screen

Thread Tools

Search Thread

Display

Similar Threads

Screen

Color Splash..!

Splash Paint sig

Posting Permissions