Techpatterns.com Javascript Class Switcher

Put your mouse over any bar below to see the class switcher in action. You can change the options below.

test 1

test 2

test 3

test 4

test 5

test 6

Click here to alternate single class element rollover and all class elements rollover
The current setting is for single elements to change

Return to class switcher page

Code:

Note 1: the javascript here should be pulled off the page and delivered as a library file in order to have a valid XHTML 1.0 strict page

Note 2: The 'all' feature will only work on MSIE 6 or greater, the 'single' feature works in MSIE 5 or greater. Both version work in Opera and Firefox.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Javascript class switcher :: Sample page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
var classname = 'one';// this will test the class values, it holds the current value, and should correspond to the off state class 
var classname1 = 'one';// static value, change this to your class 1 name
var classname2 = 'two';// static value, change this to your class 2 name
var feature = 'single';// sets if only hover element or all changes :: options: 'single' or 'all'

// gets all the elements of that have class classname and returns them as an array
function getElementsByClassName(needle) 
{
	var my_array = document.getElementsByTagName("*");
	var retvalue = new Array();
	var i;
	var j;

	for (i=0,j=0;i<my_array.length;i++) 
	{
		var c = " " + my_array[i].className + " ";
		if (c.indexOf(" " + needle + " ") != -1) retvalue[j++] = my_array[i];
	}
	return retvalue;
}

// if feature is set to all, this will switch all of the class items
// loops through the classname array and switches them to their opposite values
function toggle()
{
	var divs = getElementsByClassName(classname)
	for(i=0; i <divs.length;i++)
	{
		if(divs[i].className == classname1)
		{
			divs[i].className = classname2;
			classname = classname2;
		}
		else
		{
			divs[i].className = classname1;
			classname = classname1;
		} 
	}
}

// for onmouseover
function rollon(e) 
{
	var srcId, srcElement, targetElement; 
	if (window.event) e = window.event; 
	srcElement = ( e.srcElement ) ? e.srcElement : e.target; 

	if ( srcElement.className == classname1 ) 
	{
		if ( feature == 'all' )
		{
			toggle();
		}
		else if ( feature == 'single' )
		{
			srcElement.className = classname2;
			classname = classname2;
		}
	}
}
// for mouseoff
function rolloff(e) 
{
	var srcId, srcElement, targetElement; 
	if (window.event) e = window.event; 
	srcElement = ( e.srcElement ) ? e.srcElement : e.target; 

	if ( srcElement.className == classname2 ) 
	{
		if ( feature == 'all' )
		{
			toggle();
		}
		else if ( feature == 'single' )
		{
			srcElement.className = classname1;
			classname = classname1;
		}
	}
}

function switch_feature()
{
	feature = ( feature == 'single' ) ? 'all' : 'single';
	document.getElementById("info").innerHTML = feature;
}

// assign rollon() to handle onMouseOver events
document.onmouseover = rollon;

// assign rolloff() to handle onMouseOut events
document.onmouseout = rolloff;
</script>
<style type="text/css">
body, html {background:#000;color:#fff;}
a,a:visited{color:#0EFDDE;}
div {
	margin:1em;
}
.one,.two{color:white;font-weight:bold;padding:3px;}
.one {
	background:red;
}
.two {
	background:green;
}
#info {color:yellow;font-weight:bold;}
</style>
</head>
	
<body>
<div class="one">test 1</div>
<div class="one"">test 2</div>
<div class="one">test 3</div>
<div class="one">test 4</div>
<div class="one">test 5</div>

<div class="three">test 6</div>
<div><a href="#" onclick="switch_feature();">Click here</a> to alternate single class element rollover and all class elements rollover<br />
The current setting is for <span id="info">single</span> elements to change</div>
<div>Return to <a href="/forums/about534.html">class switcher page</a></div>
</body>

</html>