making onclick function work - help appreciated and thanks in advance

[_com]

This piece of javascript adds mouseover functionality

var W3CDOM = (document.createElement && document.getElementsByTagName);

var mouseOvers = new Array();
var mouseOuts = new Array();

window.onload = init;

function init()
{
if (!W3CDOM) return;
var nav = document.getElementById('mouseovers');
var imgs = nav.getElementsByTagName('img');
for (var i=0;i<imgs.length;i++)
{
imgs[i].onmouseover = mouseGoesOver;
imgs[i].onmouseout = mouseGoesOut;
var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf('.'));
mouseOuts[i] = new Image();
mouseOuts[i].src = imgs[i].src;
mouseOvers[i] = new Image();
mouseOvers[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_omo" + suffix;
imgs[i].number = i;
}
}

function mouseGoesOver()
{
this.src = mouseOvers[this.number].src;
}

function mouseGoesOut()
{
this.src = mouseOuts[this.number].src;
}

this piece of javascript makes onclick state work too

// Some variables

var base= "pix/mo_"
var nrm = new Array();
var omo = new Array();
var ocl = new Array();
var stuff = new Array('home','place');
var select = -1;
var name2 = "";
var temp = 0;

// Pre-load part.

if (document.images)
{
for (i=0;i<stuff.length;i++)
{
nrm[i] = new Image;
nrm[i].src = base + stuff[i] + ".gif"
omo[i] = new Image;
omo[i].src = base + stuff[i] + "_omo.gif";
ocl[i] = new Image;
ocl[i].src = base + stuff[i] + "_clic.gif";
}
}

// The functions: first mouseover, then mouseout

function over(no)
{
if (document.images && select != no)
{
document.images[stuff[no]].src = omo[no].src
}
}

function out(no)
{
if (document.images && select != no)
{
document.images[stuff[no]].src = nrm[no].src
}
}

function clic(no)
{
if (document.images)
{
document.images[stuff[no]].src = ocl[no].src
temp = select;
select = no;
if (temp != -1) {out(temp)}
}
}



I want to change the last javascript so it is written as the DOM javascripted mouseover example. I want to rewrite it as a whole actually not make a brand new script.

This is what I came up with so far - it needs serious reviewing #

var W3CDOM = (document.createElement && document.getElementsByTagName);

var mouseOvers = new Array();
var mouseOuts = new Array();
var mouseClicks = new Array();
var select = -1;
var temp = 0;

function init()
{
if (!W3CDOM) return;
var nav = document.getElementById('mouseovers');
var imgs = nav.getElementsByTagName('img');
for (var i=0;i<imgs.length;i++)
{
imgs[i].onmouseover = mouseGoesOver;
imgs[i].onmouseout = mouseGoesOut;
imgs[i].onclick = mouseGoesClick;
var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf('.'));
mouseOuts[i] = new Image();
mouseOuts[i].src = imgs[i].src;
mouseOvers[i] = new Image();
mouseOvers[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_omo" + suffix;
imgs[i].number = i;
mouseClicks[i] = new Image();
mouseClicks[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_clic" + suffix;
imgs[i].number = i;
}
}

function mouseGoesOver(no)
{
if (document.images && select ! = no)
{
this.src = mouseOvers[this.number].src;
}
}

function mouseGoesOut(no)
{
if (document.images && select != no)
{
this.src = mouseOuts[this.number].src;
}
}
function mouseGoesClick(no)
{
this.src = mouseClicks[this.number].src;
temp = select;
select = no;
if (temp != -1) {mouseGoesOut(temp)}
}

[Kor]

what is your parameter no?

[_com]

the meaning: to change a clicked imagelink back to normal when clicking another
imagelink

in order to achieve this we change the image ONMOUSEOUT


this image will be stored in a temp variable.

So here it is:

temp = select;
select = no;

[Kor]

So you want that?:
onmousever, onmouseout and onclick should change the element's src? And onclick should restore the genuine src to the previoused clicked object?

[_com]

This script is an adaptation from (*)

I want to use DOM scripting therefore (*) was the source script and this script needs to be modified to work as (*)

var W3CDOM = (document.createElement && document.getElementsByTagName);

var mouseOvers = new Array();
var mouseOuts = new Array();
var mouseClicks = new Array();
var select = -1;
var temp = 0;

function init()
{
if (!W3CDOM) return;
var nav = document.getElementById('mouseovers');
var imgs = nav.getElementsByTagName('img');
for (var i=0;i<imgs.length;i++)
{
imgs[i].onmouseover = mouseGoesOver;
imgs[i].onmouseout = mouseGoesOut;
imgs[i].onclick = mouseGoesClick;
var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf('.'));
mouseOuts[i] = new Image();
mouseOuts[i].src = imgs[i].src;
mouseOvers[i] = new Image();
mouseOvers[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_omo" + suffix;
imgs[i].number = i;
mouseClicks[i] = new Image();
mouseClicks[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_clic" + suffix;
imgs[i].number = i;
}
}

function mouseGoesOver(no)
{
if (document.images && select ! = no)
{
this.src = mouseOvers[this.number].src;
}
}

function mouseGoesOut(no)
{
if (document.images && select != no)
{
this.src = mouseOuts[this.number].src;
}
}
function mouseGoesClick(no)
{
this.src = mouseClicks[this.number].src;
temp = select;
select = no;
if (temp != -1) {mouseGoesOut(temp)}
}


(*) the orginal script

// Some variables

var base= "pix/mo_"
var nrm = new Array();
var omo = new Array();
var ocl = new Array();
var stuff = new Array('home','place');
var select = -1;
var name2 = "";
var temp = 0;

// Pre-load part.

if (document.images)
{
for (i=0;i<stuff.length;i++)
{
nrm[i] = new Image;
nrm[i].src = base + stuff[i] + ".gif"
omo[i] = new Image;
omo[i].src = base + stuff[i] + "_omo.gif";
ocl[i] = new Image;
ocl[i].src = base + stuff[i] + "_clic.gif";
}
}

// The functions: first mouseover, then mouseout

function over(no)
{
if (document.images && select != no)
{
document.images[stuff[no]].src = omo[no].src
}
}

function out(no)
{
if (document.images && select != no)
{
document.images[stuff[no]].src = nrm[no].src
}
}

function clic(no)
{
if (document.images)
{
document.images[stuff[no]].src = ocl[no].src
temp = select;
select = no;
if (temp != -1) {out(temp)}
}
}