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
