HTMLCodes

Site hosted by Angelfire.com: Build your free website today!

AGREE BEFORE ENTER

ASK NAME ON ENTER

BOLD SCROLLER

BOUNCING TEXT

MOUSE CROSSHAIRS

FADING BACKGROUND

DISSOLVING TEXT

FADING SCROLLER

IN YOUR FACE MESSAGE

MESSAGE ON EXIT

SCROLLING TEXT

MOUSE BANNER GRABBER

COMET MOUSE TRAILER

RIGHT CLICK BLOCK

MESSAGE ON ENTER

PULSATING TEXT

ROLLER COASTER TEXT

SHOCK WAVE TEXT

TEST MOUSE TRAILER

WAVY SCROLLER

COLORED SCROLL BAR

BASIC LINK

EMAIL LINK

MOUSEOVER LINK

REDIRECT LINKK

TEXT IN STATUS BAR

REGULAR TEXT AREA

TEXT AREA W/ COLOR

TEXT AREA ALLOWING HTML

BACKGROUND SOUND

HTML Codes

/*
Cross browser marquee script- 
� Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

//Specify the marquee's width (in pixels)
var marqueewidth=330
//Specify the marquee's height (in pixels, pertains only to NS)
var marqueeheight=20
//Specify the marquee's scroll speed (larger is faster)
var speed=6
//Specify the marquee contents
var marqueecontents='<strong>Thank you for visiting Dynamic Drive. If you find this script useful, please consider linking to us by click here. Enjoy your stay!</strong>'

if (document.all)
document.write('<marquee scrollAmount='+speed+' style="width:'+marqueewidth+'">'+marqueecontents+'</marquee>')

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
setTimeout("window.onresize=regenerate",450)
intializemarquee()
}
}

function intializemarquee(){
document.cmarquee01.document.cmarquee02.document.write('<nobr>'+marqueecontents+'</nobr>')
document.cmarquee01.document.cmarquee02.document.close()
thelength=document.cmarquee01.document.cmarquee02.document.width
scrollit()
}

function scrollit(){
if (document.cmarquee01.document.cmarquee02.left>=thelength*(-1)){
document.cmarquee01.document.cmarquee02.left-=speed
setTimeout("scrollit()",100)
}
else{
document.cmarquee01.document.cmarquee02.left=marqueewidth
scrollit()
}
}

window.onload=regenerate2
</script>

<!-- TWO STEPS TO INSTALL AGREE BEFORE ENTRY:

1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<HEAD>

<!-- Begin

agree = 0;  // 0 means 'no', 1 means 'yes'

//  End -->
</script>
</HEAD>

<center>
<form name=enableform>
You can only enter your name if you agree to the terms. (just a demo)

<input type=radio name='enable' value='agree' onClick="agree=1; document.enableform.box.focus();">I agree
<input type=radio name='enable' value='disagree' onClick="agree=0; document.enableform.box.value='';">I disagree

Please enter your name:

<center>
Free JavaScripts provided
by The JavaScript Source
</center>

/*
Document crosshair Script- 
By Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more free DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

if (document.all&&!window.print){
//if the user is using IE 4 (but NOT IE 5. We used dynamic expressions in IE 5 to replace the below code)
leftright.style.width=document.body.clientWidth-2
topdown.style.height=document.body.clientHeight-2
}
else if (document.layers){
document.leftright.clip.width=window.innerWidth
document.leftright.clip.height=1
document.topdown.clip.width=1
document.topdown.clip.height=window.innerHeight
}

function followmouse1(){
//move cross engine for IE 4+
leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
topdown.style.pixelTop=document.body.scrollTop
if (event.clientX<document.body.clientWidth-2)
topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
else
topdown.style.pixelLeft=document.body.clientWidth-2
}

function followmouse2(e){
//move cross engine for NS 4+
document.leftright.top=e.y+1
document.topdown.top=pageYOffset
document.topdown.left=e.x+1
}

if (document.all)
document.onmousemove=followmouse1
else if (document.layers){
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=followmouse2
}

//entire code below simply refreshes the page when a surfer reloads the page, to reposition the crosshair. Irrelevant in IE 5
function regenerate(){
window.location.reload()
}
function regenerate2(){
setTimeout("window.onresize=regenerate",400)
}
if ((document.all&&!window.print)||document.layers)
//if the user is using IE 4 or NS 4, both NOT IE 5+
window.onload=regenerate2

//-->
</script>

/*
Nudging text by Matthias (matthiasdeschagt@hotmail.com)
Modified by Dynamic Drive to function in NS6
For this script and more, visit http://www.dynamicdrive.com
*/

//configure message
message="Welcome to Dynamic Drive!"
//animate text in NS6? (0 will turn it off)
ns6switch=1

function jump1a(){
nfinal=(document.getElementById)? document.getElementById("n0") : document.all.n0
nfinal.style.left=-num2;
if(num2 != 9){
num2=num2+3;
setTimeout("jump1a()",50)
}
else{
jump1b()
}
}

function jump1b(){
nfinal.style.left=-num2;
if(num2 != 0){num2=num2-3;
setTimeout("jump1b()",50)
}
else{
jump2()
}
}

//This script created by Steve Bomer (steveb03@yahoo.com)
//Modified by Dynamic Drive for NS6, additional features
//Visit Dynamicdrive.com to get it!

//Change the message below
var themessage="Welcome to Dynamic Drive!"
var fontsize=10
//Below determines how long the message will appear before disappearing. 3000=3 seconds
var appearfor=3000

function position_at_top(){
if (document.layers)
document.test.top=pageYOffset
else if (document.all){
test.innerHTML='<div align=center>'+themessage+'</div>'
setTimeout("test.style.top=document.body.scrollTop+10;test.style.left=document.body.scrollLeft+10",100)
}
else if (document.getElementById){
document.getElementById("test").innerHTML='<div align=center>'+themessage+'</div>'
document.getElementById("test").style.top=pageYOffset
}
}

function expand(){
if (document.layers){
document.test.document.write('<div align=center style="font-size:'+fontsize+'px">'+themessage+'</div>')
document.test.document.close()
}
else if (document.all)
test.style.fontSize=fontsize+'px'
else if (document.getElementById)
document.getElementById("test").style.fontSize=fontsize+'px'
fontsize+=5
if (fontsize>90){
if (document.layers)
setTimeout("document.test.visibility='hide'",appearfor)
else if (document.all)
setTimeout("test.style.visibility='hidden'",appearfor)
else if (document.getElementById)
setTimeout("document.getElementById('test').style.visibility='hidden'",appearfor)
return
}
else
setTimeout("expand()",50)
}

</script>

<head>

.textstyle    {
    position:absolute;
    left:-2000px;
width:400px;
font-family:Arial;
font-size:20pt;
font-weight:bold;
text-align:center;
    color:FFFFFF;
filter:glow(color=red,strength=2);
}

.coverstyle    {
    position:absolute;
    left:-2000px;
}
</style>
<script LANGUAGE="JavaScript1.2">

/*
Dissolving text effect script - By Peter Gehrig (http://www.24fun.ch/)
Permission given to Dynamicdrive.com to feature script in it's archive.
For full source code, installation instructions, and 1000's more DHTML scripts,
visit http://dynamicdrive.com
*/

var message = new Array()
message[0]="Welcome to Dynamic Drive"
message[1]="The #1 DHTML site on the net"
message[2]="Here you\'ll find free DHTML scripts and components"
message[3]="All of which utilize the latest in DHTML\/ JavaScript technology"
message[4]="Enjoy your stay here"
message[5]="And have a wonderful Christmas Holiday!"

var i_message=0

// The trick of this script is a simple gif-image
// consisting of two colors: black and white dots.
// The black dots are transparent.
// By wipeing this gif-image back and forth over the
// textmessages you get an attractive dissolving effect.
// This image is called slidefader.gif.

// Configure the left and top margin of the text (pixels).
var covertop=565
var coverleft=150

// Configure the size of the wipeing gif-image. 
// If you change the size you should create a new image too.
// The coverheight also represents the height of the textzone.
var coverwidth=1200
var coverheight=96

var texttop=covertop
var textleft=coverleft
//configure width of text effect
//be sure to change the corresponding width attribute above in the <style> tag to match
var textwidth=400
var textheight=coverheight

var cliptop=0
var clipright=textwidth
var clipbottom=coverheight
var clipleft=0

var clippoints

// Configure the speeds of the wipeing effect
var step=40
var pause=50

var timer

function init() {
if (document.all) {
    document.all.text.style.posTop=texttop
document.all.text.style.posLeft=textleft
document.all.cover.style.posTop=covertop
document.all.cover.style.posLeft=coverleft
clipleft=0
fadeout()
}
}

function fadeout() {
if (document.all.cover.style.posLeft >=(-coverwidth+textwidth+coverleft+step)) { 
clipleft+=step
clipright=clipleft+textwidth
clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
        document.all.cover.style.clip=clippoints
document.all.cover.style.posLeft-=step
timer= setTimeout("fadeout()",pause)
}
else {
clearTimeout(timer)
i_message++
if (i_message>=message.length) {i_message=0}
text.innerHTML=message[i_message] 
fadein()

}
}

function fadein() {
if (document.all.cover.style.posLeft <=coverleft) { 
clipleft-=step
clipright=clipleft+textwidth
clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
        document.all.cover.style.clip=clippoints
document.all.cover.style.posLeft+=step
timer= setTimeout("fadein()",pause)
}
else {
clearTimeout(timer)
init()
}
}

</script>
</head>

<head>

-->
</style>

/*
Dynamic Fader Script (updated: 00/08/05)
Created and submitted by Nicholas Poh (hwinmain@yahoo.com) to Dynamicdrive.com
Key modifications by Dynamic Drive for stability/ efficiency in NS
For full source code, usage terms, and 100s more scripts, visit http://dynamicdrive.com
*/

//1) Configure messages:
        var TS_message = new Array();
TS_message[0] = '<div align="left">Hello there</div>';
    TS_message[1] = '<div align="left">Wow... hope you like it!</div>';
        TS_message[2] = '<div align="left">Presented by Dynamicdrive.com</div>';

//2) Configure fader width and colors:
var TS_scrollwidth=400 //configure fader width
        var TS_colorFG = 0x000000;    // Text color
        var TS_colorBG = 0xFFFFFF; //bgColor

// uncomment any value you wanted to change
        //var TS_ymax = 50;             // How many pixel to move
        //var TS_ystep = 1;             // 1 or -1 only (Scroll direction)
        //var TS_speed = 2;             // The smaller the value the faster
        //var TS_pause = 100;             // Pause time(milisecond) between messages
        var TS_fadestep= 20;             // Steps to fade in and out

if (document.all)
document.write('<style>#containerarea{width:'+TS_scrollwidth+'}</style>')
</script>

</head>

<!-- THREE STEPS TO INSTALL MOUSE BANNER:

1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY tag your HTML document
  3.  Put the final code inside the BODY of your HTML page   -->

<HEAD>

<!-- Begin
var x, y;
var step = 10;
var flag = 0;

<SCRIPT LANGUAGE="JavaScript">

</script>

<center>
Free JavaScripts provided
by The JavaScript Source
</center>

/*
Magic Wand cursor (By Kurt at kurt.grigg@virgin.net)
Modified and permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

if (document.all){
with (document){
write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">')
write('<div style="position:relative;width:1px;height:1px;background:#ffffff;font-size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px;visibility:visible"></div>')
write('<div style="position:relative;width:2px;height:2px;background:#fff000;font-size:2px;visibility:visible"></div>')
write('<div style="position:relative;width:2px;height:2px;background:#ffa000;font-size:2px;visibility:visible"></div>')
write('<div style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px;visibility:visible"></div>')
write('<div style="position:relative;width:2px;height:2px;background:#00ff00;font-size:2px;visibility:visible"></div>')
write('<div style="position:relative;width:2px;height:2px;background:#0000ff;font-size:2px;visibility:visible"></div>')
write('<div style="position:relative;width:3px;height:3px;background:#FF0000;font-size:3px;visibility:visible"></div>')
write('</div>')
}
}

var Clrs=new Array(6)
Clrs[0]='ff0000';
Clrs[1]='00ff00';
Clrs[2]='000aff';
Clrs[3]='ff00ff';
Clrs[4]='fff000';
Clrs[5]='fffff0';

if (document.layers)
{window.captureEvents(Event.MOUSEMOVE);}
var yBase = 200;
var xBase = 200;
var step;
var currStep = 0;
var Xpos = 1;
var Ypos = 1;

if (document.all)
{
  function MoveHandler(){
  Xpos = document.body.scrollLeft+event.x;
  Ypos = document.body.scrollTop+event.y;
  }
  document.onmousemove = MoveHandler;
}

else if (document.layers)
{
  function xMoveHandler(evnt){
  Xpos = evnt.pageX;
  Ypos = evnt.pageY;
  }
  window.onMouseMove = xMoveHandler;
}

function animateLogo() {
if (document.all)
{
 yBase = window.document.body.offsetHeight/4;
 xBase = window.document.body.offsetWidth/4;
}
else if (document.layers)
{
 yBase = window.innerHeight/4;
 xBase = window.innerWidth/4;
}

if (document.all)
{
 for ( i = 0 ; i < starsDiv.all.length ; i++ )
 {step=3;
  starsDiv.all[i].style.top = Ypos + yBase*Math.cos((currStep + i*4)/12)*Math.cos(0.7+currStep/200);
  starsDiv.all[i].style.left = Xpos + xBase*Math.sin((currStep + i*3)/10)*Math.sin(8.2+currStep/400);
  for (ai=0; ai < Clrs.length; ai++)
    {
     var c=Math.round(Math.random()*[ai]);
    }
    starsDiv.all[i].style.background=Clrs[c];
 }
}

else if (document.layers)
{
 for ( j = 0 ; j < 14 ; j++ ) //number of NS layers!
 {step = 4;
  var templayer="a"+j
  document.layers[templayer].top = Ypos + yBase*Math.sin((currStep + j*4)/12)*Math.cos(0.7+currStep/200);
  document.layers[templayer].left = Xpos + xBase*Math.sin((currStep + j*3)/10)*Math.sin(8.2+currStep/400);
  for (aj=0; aj < Clrs.length; aj++)
    {
     var c=Math.round(Math.random()*[aj]);
    }
    document.layers[templayer].bgColor=Clrs[c]; 
 }
}
currStep+= step;
setTimeout("animateLogo()", 10);
}
animateLogo();
// -->
</script>

/*
Shock Wave Text script- By ejl@worldmailer.com
Submitted to and featured on Dynamic Drive (www.dynamicdrive.com)
For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

var size = 25;
var speed_between_messages=1500 //in miliseconds

var tekst = new Array()
{
tekst[0] = "Shock Wave text @ Dynamicdrive.com";
tekst[1] = "Here you can type anything you want";
tekst[2] = "You can change the size";
tekst[3] = "And you can change the speed";
}
var klaar = 0;
var s = 0;
var veran =0;
var tel = 0;
function bereken(i,Lengte)
{
return (size*Math.abs( Math.sin(i/(Lengte/3.14))) );
}

}

</script>

<head>

<script>
<!--

//Pulsating Text (Chris A e-mail: KilerCris@Mail.com)
//Permission granted to Dynamic Drive to feature script in archive
//For full source and 100's more DHTML scripts, visit http://www.dynamicdrive.com

var divs = new Array();
var da = document.all;
var start;

//CONFIGUER THESE VARS!!!!!!
//speed of pulsing
var speed = 50;

function initVars(){

if (!document.all)
return

//Extend of shrink the below list all you want
//put an "addDiv(1,"2",3,4); for each div you made, 
//1)'id' of div
//2)color or glow(name or hex)(in quotes!!!)
//3)minimum strength
//4)maximum strength

addDiv(hi,"lime",2,11);
addDiv(welcome,"red",4,9);
addDiv(message,"purple",2,4);
addDiv(msg2,"orange",15,17);
addDiv(msg3,"blue",1,3);

//NO MORE EDITING!!!!!!

startGlow();
}

function addDiv(id,color,min,max)
{
var j = divs.length;
divs[j] = new Array(5);
divs[j][0] = id;
divs[j][1] = color;
divs[j][2] = min;
divs[j][3] = max;
divs[j][4] = true;
}

function startGlow()
{
if (!document.all)
return 0;

for(var i=0;i<divs.length;i++)
{
divs[i][0].style.filter = "Glow(Color=" + divs[i][1] + ", Strength=" + divs[i][2] + ")";
divs[i][0].style.width = "100%";
}

start = setInterval('update()',speed);
}

function update()
{
for (var i=0;i<divs.length;i++)
{
if (divs[i][4])
{
divs[i][0].filters.Glow.Strength++;
if (divs[i][0].filters.Glow.Strength == divs[i][3])
divs[i][4] = false;
}

if (!divs[i][4])
{
divs[i][0].filters.Glow.Strength--;
if (divs[i][0].filters.Glow.Strength == divs[i][2])
divs[i][4] = true;
}
}
}
-->
</script>

</head>

<div id="hi" style="color: lime">
Hello!
</div>

<div id="welcome" style="color: lime">
Welcome!
</div>

<div id="message" style="color: lime">
This is a pulsating message!
</div>

<div id="msg2" style="color: lime">
This is another pulsating message!
</div>

<div id="msg3" style="color: lime">
This is yet another pulsating message!
</div>

/*
Cursor Trailor Text- By Peter Gehrig (http://www.24fun.ch/)
Permission given to Dynamicdrive.com to feature script in it's archive.
For full source code, installation instructions, and 1000's more DHTML scripts,
visit http://dynamicdrive.com
*/

var x,y
var step=20
var flag=0

// Your snappy message. Important: the space at the end of the sentence!!!
var message=" TYPE SUMTHIN HERE "
message=message.split("")

var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
	xpos[i]=-50
}

var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
	ypos[i]=-50
}

function handlerMM(e){
	x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
	y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
	flag=1
}

</script>
<script>
<!-- Beginning of JavaScript -

for (i=0;i<=message.length-1;i++) {
    document.write("<span id='span"+i+"' class='spanstyle'>")
	document.write(message[i])
    document.write("</span>")
}

if (document.layers){
	document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;

// - End of JavaScript - -->
</script>

<head>
<style type="text/css">
.scroll {font-weight:bold; font-size:36; text-align: center; font-family: Verdana, Courier, Courier New;}
</style>
</head>

// globals
var initialx, initialy, scrolltext;
var frame = 0, frame2 = 0.5;
var amplitude1 = 50, amplitude2 = 30;
var offset = 0.2, speed = 0.2, speed2 = 0.35;
var offset2 = 0.6;
var scrollspeed = 6;
var charwidth = 30;

var twopi = Math.PI * 2;
var chracters, position, numvisible, nextchar, firstchar;
var skipsteps = 1;
var delaytimer = 0;
var interval;

// function to create sine scroller
function sinescroll (x, y, value, number_of_chars)
{
    // setup globals
    scrolltext = new String(value);
    initialx = x;
    initialy = y;
    numvisible = number_of_chars;
    nextchar = numvisible;
    firstchar = 0;

// create fixed-size arrays of characters and positions
    characters = new Array(numvisible);
    position = initialx;

// write DIVs to hold characters
    for (var i = 0; i < numvisible; i++)
    {
        document.write('<DIV ID="character" STYLE="position:absolute;top:',
            initialy, ';left:-10000', //(initialx + i * charwidth),
            ';width=', charwidth, ';height=30;" >
', 
            scrolltext.charAt(i), '</DIV>');
    }
}

// animation function
function step ()
{
    // increment counters
    frame += speed;
    frame2 += speed2;

// delay timer
    if (delaytimer > 0)
    {
        delaytimer--;
    }
    else
    {
        // update position
        position -= scrollspeed;
    }

// check for 'offscreen'
    if (position < (initialx - charwidth))
    {
        while (scrolltext.charAt(nextchar) == '|')
        {
            delaytimer += 90;
            nextchar++;
        }

// set nextchar into characters array
        characters[firstchar].innerHTML = '
' + scrolltext.charAt(nextchar) + '';

// update nextchar
        nextchar++;

// check for wrap-around
        if (nextchar >= scrolltext.length)
        {
            nextchar = 0;
        }

// change position and counters by offset
        position += charwidth;
        frame += offset;
        frame2 += offset2;

// update firstchar
        firstchar++;

if (firstchar >= numvisible)
        {
            firstchar = 0;
        }
    }

// wrap-around counters
    if (frame > twopi) frame -= twopi;
    if (frame2 > twopi) frame2 -= twopi;

// set up loop variables
    var angle = frame;
    var angle2 = frame2;
    var pos = position;

// update the html
    for (var i=firstchar; i < numvisible; i++)
    {
        characters[i].style.left = pos;
        characters[i].style.top = initialy + amplitude1 * Math.sin(angle) + amplitude2 * Math.sin(angle2);
        angle += offset; 
        angle2 += offset2;
        pos += charwidth;
    }

for (var i=0; i < firstchar; i++)
    {
        characters[i].style.left = pos;
        characters[i].style.top = initialy + amplitude1 * Math.sin(angle) + amplitude2 * Math.sin(angle2);
        angle += offset; 
        angle2 += offset2;
        pos += charwidth;
    }
}

// start the animation
function start ()
{
if (!document.all)
return
    // get all of the DIV tags into an array (IE only?)
    characters = document.all.item('character');
    
    // setup timeout to call this function again
    interval = window.setInterval("step();", 20);
}

// stop the animation
function stop ()
{
if (!document.all)
return
    if (interval)
        clearInterval(interval);
}

window.onload=start
window.onunload=stop

// create the scroller
if (document.all)
sinescroll(30, 100, " **** Remember those great Amiga demos? You can recreate the endless sine-scrolling messages in JavaScript! Conversions to Netscape welcome, as are improvements - email to mark.baker@usa.net This script can cope with ** delays ** | and even longer delays - ** heloooo **||| Feel free to use it and rip it off (well you're going to anyway...) TTFN... **** ", 15);