xperfect-Tons-of-HTML

html help
Need MORE help?

link effects>> text effects>>> scrollbars>>> image effects>>> page transitions>>> title bars>>> status bars>>> boxes>>> borders>>> cool codes>>> marquee codes>>> colour codes>>> credit/note

link effects

ITALIC

DOTTED UNLINE & OVERLINE

DOTTED BOX

GLOWING

LINE THROUGH

SPACED OUT

UPSIDE DOWN

GETS RID OF BLUE UNDERLINE

BLUR

CAPITALS

LOWERCASE

FADED

LINES ON THE SIDES

CHANGES FONT

INCREASE IN SIZE

BACKGROUND COLOUR

PICTURE BACKGROUND

SOLID BOX

COLOUR CHANGES

BACKWARDS

LINE OVER AND UNDER

text effects

SMALL FONTS CODE BOLD

ITALIC

STRIKE THROUGH

UNDERLINE

VERTICAL TEXT

UPHILL

RAINBOW TEXT

/*
RAINBOW TEXT Script by Matt Hedgecoe (c) 2002
Featured on JavaScript Kit
For this script, visit http://www.javascriptkit.com
*/

// ********** MAKE YOUR CHANGES HERE

var text="Rainbow Text *" // YOUR TEXT
var speed=80 // SPEED OF FADE

// ********** LEAVE THE NEXT BIT ALONE!

if (document.all||document.getElementById){
document.write('<span id="highlight">' + text + '</span>')
var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
}
else
document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
</span></span></span></span></span></script>
</font></b>

BACKGROUND COLOUR

DROP SHADOW

FLICKERING TEXT

TYPEWRITER

GLOW(ALWAYS)

BLUR AND SHADOW

TEXT LIKE THIS

FLAMING TEXT

scrollbars

NORMAL

1 COLOUR

BLINKING

RAINBOW CHANGING

LEFT SCROLLBAR

CHANGES WHEN HOVERED

//onMouseover Scrollbar effect- by Svetlin Staev (svetlins@yahoo.com)
//Submitted to Dynamic Drive
//Visit http://www.dynamicdrive.com for this script

/*---------------[IE 5.5 Scrollbars colorer]--------------------*/
function scrollBar(line,face,theme)
	{
		if (!line||!face)
			{
				line=null;
				face=null;
				switch(theme) // Predefined themes
					{
						case "blue":
							var line="#78AAFF";
							var face="#EBF5FF";
							break;
						case "orange":
							var line="#FBBB37";
							var face="#FFF9DF";
							break;
						case "red":
							var line="#FF7979";
							var face="#FFE3DD";
							break;
						case "green":
							var line="#00C600";
							var face="#D1EED0";
							break;
						case "neo":
							var line="#BC7E41";
							var face="#EFE0D1";
							break;
					}
			}

with(document.body.style)
					{
						scrollbarDarkShadowColor=line;
						scrollbar3dLightColor=line;
						scrollbarArrowColor="black";
						scrollbarBaseColor=face;
						scrollbarFaceColor=face;
						scrollbarHighlightColor=face;
						scrollbarShadowColor=face;
						scrollbarTrackColor="#F3F3F3";
					}
			}

/*------------------[Pointer coordinates catcher]---------------*/
function colorBar(){
		var w = document.body.clientWidth;
		var h = document.body.clientHeight;
		var x = event.clientX;
		var y = event.clientY;
		if(x>w||y-3>h) scrollBar('#000080','#BFDFFF'); // Your colors
		else scrollBar(null,null,"orange"); // A predefined theme
	}

if (document.all){
scrollBar(null,null,"blue");
document.onmousemove=colorBar;
}

function offscreen(){
scrollBar(null,null,"green");
}

document.onmouseout=offscreen;
//-- >
</script>

image effects

IMAGE WITH BORDER

BLACK/WHITE IMAGE

INVERT COLOURS

UPSIDE DOWN

TRANSPARENT/TRANSLUCENT

MARQUEE

COLOUR ON MOUSEOVER

FADE TO COLOUR ON MOUSEOVER

PUT THIS CODE IN A DIFFERENT HTML BOX(IT'S STILL THE FADE TO COLOUR CODE

/*
Gradual-Highlight Image Script II- 
By J. Mark Birenbaum (birenbau@ugrad.cs.ualberta.ca)
Permission granted to Dynamicdrive.com to feature script in archive
For full source to script, visit http://dynamicdrive.com
*/

nereidFadeObjects = new Object();
nereidFadeTimers = new Object();

/* object - image to be faded (actual object, not name);
 * destop - destination transparency level (ie 80, for mostly solid)
 * rate   - time in milliseconds between trasparency changes (best under 100)
 * delta  - amount of change each time (ie 5, for 5% change in transparency)
 */

function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){  //do this so I can take a string too
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
    }
        
    clearTimeout(nereidFadeTimers[object.sourceIndex]);
    
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;

if (object.filters.alpha.opacity != destOp){
        nereidFadeObjects[object.sourceIndex]=object;
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}

</script>

THUMBNAIL IMAGES

RESIZING A PICTURE

DRAGABLE

LIGHT FOLLOWS IMAGE

<style>
<!--

#myimage{
filter:light
}

-->
</style>

//Image spotlight effect- By Erik F (die_schlampe@hotmail.com)
//Code enhancements by Dynamicdrive.com
//Visit http://www.dynamicdrive.com for this script

s = 50;  // the size of the spotlight
vp = 10;  // the visibility percent of the picture
startx = 0;  // the top position of your sportlight into the image (on start)
starty = 0;  // the left position of your spotlight into the image (on start)

//////////////////////////////////////////////////////////////////
//		No need to edit below this line			//
//////////////////////////////////////////////////////////////////

var IE = document.all?true:false

function moveL()
{
xv = tempX; 
yv = tempY; 
myimage.filters.light.MoveLight(1, xv, yv, s, true); 
}

if (IE&&myimage.filters)
document.all.myimage.onmousemove = getMouseXY; 
var tempX = 0
var tempY = 0

function getMouseXY(e) {
tempX = event.offsetX
tempY = event.offsetY

if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}
  if (t)
  {  
   moveL(); 
  }

return true
}

var xv = startx; 
var yv = starty; 
var t= true; 
if (IE&&myimage.filters){
myimage.style.cursor="hand";  myimage.filters.light.addAmbient(255, 255, 255, vp)
myimage.filters.light.addPoint(startx, starty, s, 255, 255, 255, 255)
}

</script>

ONE IMAGE TO ANOTHER

var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
    pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}

function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
    {
    rollOverArr[pageImageName].outImg = new Image;
    rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
    }
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}

function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</script>

page transitions

SMOOTH

STAR

CIRCLE OUT

ZIG ZAG

BARN

PIXELATE

SPIRAL

RADIAL

IRIS

BOX OUT

CHECKERBOARD DOWN

STRECTH AND PUSH

HORIZONTAL BLINDS

DISSOLVE

title bars

ANIMATED

BOUNCE BACK/FORTH

TYPING

var message="Ur Text Here"     //specifys the title
var message=message+"          " //gives a pause at the end, 1 space=1 speed unit,  here I used 10 spaces@150 each = 1.5seconds. 
i="0" 		         //declares the variable and sets it to start at 0
var temptitle=""                 //declares the variable and sets it to have no value yet.
var speed="150"                  //the delay in milliseconds between letters

function titler(){
if (!document.all&&!document.getElementById)
return
document.title=temptitle+message.charAt(i)  //sets the initial title
temptitle=temptitle+message.charAt(i)       //increases the title by one letter
i++					    //increments the counter
if(i==message.length) 		    //determines the end of the message
{
i="0" 				    //resets the counter at the end of the message
temptitle="" 			    //resets the title to a blank value
}
setTimeout("titler()", speed) 		   //Restarts. Remove line for no-repeat.
}

window.onload=titler </script>

ARROWS

//Arrow Head title- By Dynamic Drive
//Based on status bar script by Jason Rex (wonil4@hotmail.com,  http://www.syred.net)
//Visit http://www.dynamicdrive.com for full source code

//change title text to your own
    var titletext="MY WEBISTE NAME"     var thetext=""     var started=false     var step=0     var times=1 
    function welcometext()
    {
      times--
      if (times==0 )
      {
        if (started==false)         {
          started = true; 
          document.title = titletext; 
          setTimeout("anim()", 1); 
        }
        thetext = titletext; 
      }
    }

function showstatustext(txt)
    {
      thetext = txt; 
      setTimeout("welcometext()", 4000)
      times++
    }

function anim()
    {
      step++
      if (step==7 ) {step=1 }
      if (step==1 ) {document.title='>==='+thetext+'===<'}
      if (step==2 ) {document.title='=>=='+thetext+'==<='}
      if (step==3 ) {document.title='>=>='+thetext+'=<=<'}
      if (step==4 ) {document.title='=>=>'+thetext+'<=<='}
      if (step==5 ) {document.title='==>='+thetext+'=<=='}
      if (step==6 ) {document.title='===>'+thetext+'<==='}
      setTimeout("anim()", 200); 
    }

if (document.title)
window.onload=onload=welcometext </script>

status bars

BOUNCING

SCROLLING MARQUEE

STILL MESSAGE

TYPING

SHOOTING

< script type="text/javascript" >
//Created by Status Bar Message Generator 
// http://rainbow.arch.scriptmania.com/tools/status_bar/
function sb14_makeArray(n){
	this.length = n;
	return this.length;
}

sb14_messages = new sb14_makeArray(3);
sb14_messages[0] = "Ur Text Here";
sb14_messages[1] = "More Text";
sb14_messages[2] = "Add some more";
sb14_rptType = 'infinite';
sb14_rptNbr = 5;
sb14_speed = 70;
sb14_distance = 50;
sb14_delay = 1000;
var sb14_letter = 0;
var sb14_counter=1;
var sb14_currMsg = 0;
var sb14_orgSpaces = sb14_distance;
var sb14_nbrSpaces = sb14_orgSpaces;
var sb14_shootTimer = null;
function sb14_shootStatus(){
	var sp=sb14_speed;
	var tmp=sb14_messages[sb14_currMsg].substring(0,sb14_letter);
	for (var i=0; i<sb14_nbrSpaces; i++)
		tmp += " ";
	tmp+=sb14_messages[sb14_currMsg].charAt(sb14_letter);
	for (var i=0; i < sb14_orgSpaces-sb14_nbrSpaces; i++)
		tmp+=" ";
	tmp += "=o";
	window.status=tmp;
	sb14_nbrSpaces--;
	if (sb14_nbrSpaces == 0){
		sb14_letter++;
		sb14_orgSpaces -= 1;
		sb14_nbrSpaces=sb14_orgSpaces;
		if (sb14_letter > sb14_messages[sb14_currMsg].length){
			if (sb14_currMsg == sb14_messages.length-1){
				if ((sb14_rptType == 'finite') && (sb14_counter==sb14_rptNbr)){
					clearTimeout(sb14_shootTimer);
					return;
				}
				sb14_counter++;
				sb14_currMsg=0;
			}
			else{
				sb14_currMsg++;
			}
			sb14_letter=0;
			sb14_nbrSpaces = sb14_orgSpaces = sb14_distance;
			sp=sb14_delay;
		}
	}
	sb14_shootTimer = setTimeout("sb14_shootStatus()",sp);
}
sb14_shootStatus();
< /script >

STAR BOUNCE

boxes

THESE BOXES

TRY THIS CODETEXT HERE

THAT BOX(ABOVE IS EXAMPLE)
BORDERED TEXT BOX
TRANSPARENT/TRANSLUCENT BOX

BOX WITH SCROLLBAR

borders

1 COLOUR

4 COLOUR

3D

cool codes

DROP-DOWN-MENU

</select>

SMALL FONT IN GUESTBOOK

<STYLE type="text/css">
/*OMG!*/
}
a:link, .footernav.link, a.footernav:link, a.footernav:active {
/* STANDARD LINKS */
color: #000000;
font:normal 7px small fonts;
text-transform: uppercase;
text-decoration: none;
padding: 0px;
border:0px solid #000000;
background-color: BACKGROUND COLOUR OF LINK;
}
a:visited, a.footernav:visited, {
/* VISITED LINKS */
color: #000000;
font:normal 7px small fonts;
text-decoration: none;
text-transform: uppercase;
padding: 0px;
border:0px solid #000000;
background-color: F38737t;
}
a:hover {
/* HOVERED LINKS */
font:normal 7px small fonts;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0px;
padding: 0px;
color: #000000;
border-bottom:0px solid #000000;
background-color: BACKGROUND COLOUR OF HOVERED LINKS;
cursor:CURSOR TYPE OF HOVERED LINKS (ETC CROSSHAIR);
}
</STYLE>
<STYLE type="text/css">
/*OMG!*/
}
.blogbody, table.footer, .standard, .leftmodulefontcolor, td, p {
/* MAIN TEXT */
font-weight: normal;
color: #COLOUR OF MESSAGE;
line-height: 7px;
font-style: normal;
font-size: 8px; 
text-transform: uppercase;
font-family: small fonts;
letter-spacing: 0px;
}
.blogbody b, .standard b, p b, strong {
/* BOLDED TEXT */
font-weight: normal;
color: #COLOUR OF MESSAGE;
line-height: 7px;
font-size: 7px; 
text-transform: uppercase;
font-family: small fonts;
letter-spacing: 0px;
}
.blogbody i, .standard i, p i, em {
/* ITALIC TEXT */
font-weight: normal;
color: #COLOUR OF TIME AND DATE;
line-height: 7px;
font-style: bold;
font-size: 7px; 
text-transform: uppercase;
font-family: small fonts;
letter-spacing: 0px;
}
</STYLE>

# ONLINE/BROWSING

FALLING HEARTS

var ns4up = (document.layers) ? 1 : 0;  // browser sniffer
  var ie4up = (document.all) ? 1 : 0;

var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 600;

if (ns4up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = document.body.clientWidth;
    doc_height = document.body.clientHeight;
  }

dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();

for (i = 0; i <layer name="\" left="\" top="\" visibility="\"><a href="\"><img src="\" border="\"></a></layer>");
      } else {
        document.write("<layer name="\" left="\" top="\" visibility="\"><img src="\" border="\"></layer>");
      }
    } else if (ie4up) {
      if (i == 0) {
        document.write("<div id="\" style="\"><a href="\"><img src="\" border="\"></a></div>");
      } else {
        document.write("<div id="\" style="\"><img src="\" border="\"></div>");
      }
    }
  }

if (ns4up) {
    snowNS();

} else if (ie4up) {
    snowIE();
  }

</script>

AD REMOVER

POP-UP-WINDOW

FIXED BACKGROUND

CLOSE POP-UP

NO SCROLLBAR

NO RIGHT CLICKS

CALCULATOR!

<BODY>

</BODY>

LANGUAGE TRANSLATOR

marquee codes

TORNADO TYPE

SECTION BY SECTION

SLOW DOWN ON HOVER(LIKE ON MY FRONT-PAGE!)

UP/DOWN

WAVEY

BOUNCY

JUMPING

DOTTY BORDER

colour codes

Color Palette

Piczo