I believe this is the first time I have tried this, this way:
There is an array, tagElements.ids. Each item is set to type object.
There is an item in each tagElements.ids[index] object: 'over'
It is supposed to change the background color of the target element.
I have included the output of an alert dialog. There are no errors and
nothing happens. These functions are called by tagElements.findId()
which is the registered event handler.
So, I don't understand why this is not working. The alert comes up
as programmed, so I know the system is working as expected to
that point.
Being tested in Firefox, 3.5x/Mac OSX or thereabouts.
The event register code is as follows
(this added 1/25/3013)
I solved the problem. For some reason I was not seeing the change in color. It was apparently working
all along. But I had to assign a more contrasting color to see the rollover. I am not color blind and I can
usually see the difference between a #009900 (dark green) and #339933 (next lighter shade of green)
but I was not seeing the change here, nor in another element that was supposed to change from a dark red
to the next lighter color red. So, lesson learned, make sure the change is drastic enough that you can see it.
Code:
var tagElements = new Object();
tagElements.ids = new Array();
tagElements.ids[0] = new Object
tagElements.ids[0].tag = 'start'; // element id attribute value
tagElements.ids[0].over = function(a){ a.background = '#009900';} //#339933 alert(a.background);
// returned by alert dialog: rgb(51, 153, 51) none repeat scroll 0% 0%
tagElements.ids[0].out = function(item){ item.background = '#339933';}
tagElements.ids[0].click = function(a){ }// alert('click');
tagElements.ids[1] = new Object
tagElements.ids[1].tag = 'stop'; // element id attribute value
tagElements.ids[1].over = function(){}
tagElements.ids[1].out = function(){}
tagElements.ids[1].click = function(){}
tagElements.ids[2] = new Object
tagElements.ids[2].tag = 'help'; // element id attribute value
tagElements.ids[2].over = function(){}
tagElements.ids[2].out = function(){}
tagElements.ids[2].click = function(){}
tagElements.ids[3] = new Object
tagElements.ids[3].tag = 'dif1'; // element id attribute value
tagElements.ids[3].over = function(){}
tagElements.ids[3].out = function(){}
tagElements.ids[3].click = function(){}
tagElements.ids[4] = new Object
tagElements.ids[4].tag = 'dif2'; // element id attribute value
tagElements.ids[4].over = function(){}
tagElements.ids[4].out = function(){}
tagElements.ids[4].click = function(){}
tagElements.ids[5] = new Object
tagElements.ids[5].tag = 'dif3'; // element id attribute value
tagElements.ids[5].over = function(){}
tagElements.ids[5].out = function(){}
tagElements.ids[5].click = function(){}
tagElements.ids[6] = new Object
tagElements.ids[6].tag = 'dif4'; // element id attribute value
tagElements.ids[6].over = function(){}
tagElements.ids[6].out = function(){}
tagElements.ids[6].click = function(){}
tagElements.ids[7] = new Object
tagElements.ids[7].tag = 'target'; // element id attribute value
tagElements.ids[7].over = function(){}
tagElements.ids[7].out = function(){}
tagElements.ids[7].click = function(){}
tagElements.items = new Array();
tagElements.registerEvents = function()
{
//// alert(this.ids.length)
for(var i = 0; i < this.ids.length; i++)
{
this.items[i] = document.getElementById(this.ids[i].tag);
////if(this.items != null) alert(i+": "+this.ids[i].tag);
if(document.addEventListener && !document.attachEvent)
{
this.items[i].addEventListener('mouseover', function(e){ tagElements.findId(e) }, false);
this.items[i].addEventListener('mouseout', function(e){ tagElements.findId(e) }, false);
this.items[i].addEventListener('click', function(e){ tagElements.findId(e) }, false);
}
else if(document.attachEvent)
{
this.items[i].attachEvent('onmouseover', function(e){ tagElements.findId(e) });
this.items[i].attachEvent('onmouseout', function(e){ tagElements.findId(e) });
this.items[i].attachEvent('onclick', function(e){ tagElements.findId(e) });
}
}
}
tagElements.findId = function(e)
{
var evnt = e.target.id
var type = e.type;
var item = e.target.style;
if(!e)
{
evnt = window.event.srcElement.id;
type = window.event.type;
item = window.event.srcElement.style;
}
for(var i = 0; i < this.ids.length; i++)
{
if(evnt == this.ids[i].tag)
{
switch(type)
{
case 'mouseover':
this.ids[i].over(item);
break;
case 'mouseout':
this.ids[i].out(item);
break;
case 'click':
this.ids[i].click(item);
break;
}
break;
}
}
}
tagElements.form = '';
tagElements.setFormSubmit = function()
{
this.form = document.getElementById('form1');
if(document.addEventListener && !document.attachEvent)
{
this.form.addEventListener('submit', function(){alert('submit'); return false }, false);
}
else if(document.attachEvent)
{
this.form.attachEvent('onsubmit', function(){ alert('submit'); return false } );
}
}
tagElements.init = function()
{
this.setFormSubmit();
this.registerEvents();
}
Before you post, read our: 
