Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
/*
* OO Neon Lights Text
* By JavaScript Kit (http://javascriptkit.com)
* This credit must remain for legal use
* For this script, TOS, and 100s more DHTML scripts,
* Visit http://www.dynamicdrive.com
* Modified for multiple use by jscheuer1 in
* http://www.dynamicdrive.com/forums
*/
//// No need to edit ////
function neo(id, nc, fs){
if (!document.all&&!document.getElementById)
return;
this.message=document.getElementById? document.getElementById(id).innerHTML : document.all[id].innerHTML;
this.neontextcolor=nc;
this.flashspeed=fs;
this.id=id;
this.n=0;
this.spans='';
for (var m=0;m<this.message.length;m++)
this.spans+='<span id="'+id+m+'">'+this.message.charAt(m)+'<\/span>';
with (document.getElementById? document.getElementById(id) : document.all[id])
innerHTML=this.spans;
this.beginneon();
}
neo.prototype.crossref=function(number){
return document.getElementById? document.getElementById(this.id+number) : document.all[this.id+number];
}
neo.prototype.neon=function(){
//Change all letters to base color
if (this.n==0){
for (var m=0;m<this.message.length;m++)
this.crossref(m).style.color='';
}
//cycle through and change individual letters to neon color
this.crossref(this.n).style.color=this.neontextcolor;
if (this.n<this.message.length-1)
this.n++
else{
this.n=0;
clearInterval(this.flashing);
var cacheobj=this;
setTimeout(function(){cacheobj.beginneon();},1500);
return;
}
}
neo.prototype.beginneon=function(){
var cacheobj=this;
this.flashing=setInterval(function(){cacheobj.neon();},this.flashspeed)
}
</script>
</head>
<body>
<h2>
<!-- Set span's style color property for base color -->
<span id="neon1" style="color:gray;">Welcome to Dynamic Drive!</span>
<script type="text/javascript">
//usage : new neo('span_id', 'neon_color', flash_speed);
new neo('neon1', 'yellow', 100);
</script>
</h2>
<h2>
<span id="neon2" style="color:black;">Here's another one - redder and faster!</span>
<script type="text/javascript">
new neo('neon2', 'red', 50);
</script>
</h2>
</body>
</html>
Notes: The main script goes in the head as shown and needs no editing. Short scripts in the body initialize each span by their id - that is where you set characteristic for each 'neo' instance as shown. The first one is commented to show how to do it.
Junior Coders
Need to use this script in more than one instance on one page
Posting Permissions
Reply With Quote
Bookmarks