I'm trying to work out how to use a function parameter so I don't have to repeat the same function 15 times for different id's on a web page.

Here's the function called on the web page (each div):
---
onmouseOver="hiA();return false;"
---
[incidentally the "code" box in the post message pane is too small to use]

And here's the function (currently one for each div):
---
function hiA() {
    allplain();
    document.getElementById('mapA').style.backgroundImage = 'url(images/locale_lg-hi.png)';
    document.getElementById('mapA').style.color = '#fff';
    document.getElementById('legA').style.backgroundImage = 'url(images/locale_lg-hi.png)';
    document.getElementById('legA').style.color = '#fff';
    document.getElementById('itemA').style.backgroundColor = '#f6e3ab';
}
---

I made a function for each div; hiA(), hiB() and so on.

What I want to do instead is call the function like so on the web page:
---
onmouseOver="hi(A);return false;
---
(changing (A) to (B) etc as required for each instance)

and

function hi()

using the parameter passed from the web page to populate the Id's in the script (e.g. 'mapA', 'legA' etc).

I've seen this done before, but can't call to mind any useful examples, or work out the syntax on my own.

How do MapA, LegA, and ItemA relate to each other in the document tree?

They're a bunch of divs to highlight dots superimposed on a map, and dots and captions ("item") on the map legend when either is rolled over.

Hmmm, that's not quite what I meant. But, assuming that the DIV you roll over has those divs within it, then you could apply the 'map', 'leg' and 'item' classes to each. Something like this might work (off the top of my head and untested):

function hi()
{
    allplain(); /* not sure what this does, hey-ho */
    var map = findclass('map'), leg = findclass('leg'), item = findclass('item');
    map.style.backgroundImage = 'url(images/locale_lg-hi.png)';
    map.style.color = '#fff';
    leg.style.backgroundImage = 'url(images/locale_lg-hi.png)';
    leg.style.color = '#fff';
    item.style.backgroundColor = '#f6e3ab';
}

function findchild(class)
{
    for (i=0, i<this.childNodes.length, i++)
    {
        return (this.childNodes[i].className == class) this.childNodes[i];
    }
}

Your inline call then becomes onmouseover="hi();return false;"

Personally, I prefer to abstract everything to the DOM and get rid of inline calls. But that's a little more complex, and you may violently disagree.

Unless I'm missing the obvious:

function hi(suffix) {
    allplain();
    document.getElementById('map' + suffix).style.backgroundImage = 'url(images/locale_lg-hi.png)';
    document.getElementById('map' + suffix).style.color = '#fff';
    document.getElementById('leg' + suffix).style.backgroundImage = 'url(images/locale_lg-hi.png)';
    document.getElementById('leg' + suffix).style.color = '#fff';
    document.getElementById('item' + suffix).style.backgroundColor = '#f6e3ab';
}

Called like this (note the quotes around the A which makes it a string):

onmouseOver="hi('A');return false;

Now see, that would have taken me a week to figger out. It /just/ works!

Thanks!

It's bleeding obvious when you put purity and beauty of code aside and get down in the shit, innit?

I was going to suggest using jQuery and show how to do the same, but I only had a few minutes to spare on my break, so that'll do :Y

One day I will look at jQuery. Possibly.

I'm actually using jquery on that page anyway just for the select by class function.

If the 'select by class function' simply selects elements based on CSS class, that could easily be hand-rolled with DOM scripting. If it refers to programming classes, then I'm done :(

I never had much luck getting it to work across browsers consistently whereas the jquery function seems to be fairly bulletproof.