Grab "span"'s "rel=xxx" value?

[ultranerds]

Hi,

First of all - I am full aware of jQuery for this kinda stuff, but I need to do it in pure javascript (due to the fact we only use jQuery on a small handful of pages, and can't afford to put a large file on the whole site - as its already quite busy). I wrote the following code:

var start_color = "#ffe6aa";
var end_color   = "#e7eff8";
var interval        = 1200;
 
if (!navigator.appName.match("Internet Explorer")) {
	// convert into RGB for Firefox/Chorme etc...	
	start_color = "rgb(" + hexToR(start_color) + ", " + hexToG(start_color) + ", " + hexToB(start_color) + ")";
	end_color 	= "rgb(" + hexToR(end_color) + ", " + hexToG(end_color) + ", " + hexToB(end_color) + ")";
} 
 
var the_array = new Array();
 
window.onload = function ()
{
	the_array = getElementsByClassName(document,'flashingtext');
	for (i = 0; i < the_array.length; i++) {
		setInterval('flashtext(' + i + ')', interval );
	}
} 
function flashtext(the_element) {
 
	if (the_array[the_element].rel) {
		var the_values = the_array[the_element].rel.split(","); // start_color,end_color,interval
		if (the_values[0]) { start_color = "#" +the_values[0]  } 
		if (the_values[1]) { end_color = "#" +the_values[1]  }
		if (the_values[2] > 0) { interval = the_values[2] }
 
		// convert into RGB for Firefox/Chorme etc...	
		if (!navigator.appName.match("Internet Explorer")) {
			if (the_values[0]) { start_color = "rgb(" + hexToR(the_values[0]) + ", " + hexToG(the_values[0]) + ", " + hexToB(the_values[0]) + ")";  } 
			if (the_values[1]) { end_color 	= "rgb(" + hexToR(the_values[1]) + ", " + hexToG(the_values[1]) + ", " + hexToB(the_values[1]) + ")";  }			
		} 		
		//alert("STart color: " + start_color + " and end: " + end_color + " and interval: " + interval);		
	}
 
	if (the_array[the_element].style['backgroundColor'] != start_color)   {
		the_array[the_element].style['backgroundColor'] = start_color;
	} else { 
		the_array[the_element].style['backgroundColor'] = end_color;
	}
}
function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) {
	return node.getElementsByClassName(classname);
  } else {
	return (function getElementsByClass(searchClass,node) {
		if ( node == null )
		  node = document;
		var classElements = [],
			els = node.getElementsByTagName("*"),
			elsLen = els.length,
			pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;
 
		for (i = 0, j = 0; i < elsLen; i++) {
		  if ( pattern.test(els[i].className) ) {
			  classElements[j] = els[i];
			  j++;
		  }
		}
		return classElements;
	})(classname, node);
  }
}
 
function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}

This is basically to make it so instances of <a href="xxx" class="flashingtext">some text</a> would flash to and fro with the colors we pass in. As you can see, the code is already saving a "default" value. This works 100% perfectly using a <a>, such as:

<a class="flashingtext" rel="ffe6aa,e7eff8" href="xxx">some text</a>

...it will use the values from the rel="" part, and use them to change colors.

The problem seems to come from when I'm trying to use rel="" in a <span .,... such as:

<span class="flashingtext" rel="ffe6aa,e7eff8" >some text</span>

It never seems to pick up the value of rel="" from the <span parts

I've been going around in circles with this for ages, and am still no closer to find a way of doing it (I wish I could just use jQuery as I'm far more comfortable with that - but unfortunatly we just can't add any more content to the pages, even if they are cached)

Can anyone suggest a possible solution?

TIA!

Andy

[ultranerds]

For anyone interested, I was pointed to the getAtribute option - ie

the_array[the_element].getAttribute('rel')

That works like a charm