Classnames and manipulation

[danscan]

This is a rather generic Question. A newbie to Javascript but not to programming.
If I have multiple Classes of DIV each with multiple Elements
<div class=CarPic id=Car1>
<Div class=CarPic ID=Car2>
<div class=petpic ID=pet1>
<div class=petpic ID=pet2>


I want to press one button which passes a classname to a function that would make visible all of its class but Hide every other class.

<span onclick="ShowME('Carpic')"> Show Car</span>
<span onclick="ShowME('petPic')">Show Pet</span>

Do I need to preload everything into an Array maybe premake an array with all of classes?

How do I pass a classname so its recognized as a class name?
How can I access all of the elements of that class?
OR Can I make a style change to a class and have it cascade that style change to all of the classes elements?

[fredmv]

There isn't a built-in function that returns an array of elements with the same class, however there have been custom functions built such as this one (http://blog.mooncalf.me.uk/archive/2003/03/25#RefinedClassFetching) that provide that kind of functionality and you will most likely find it quite useful.

[Kor]

You make a small confusion here... class="" and style=""are CSS refereneces, not javascript ones. Neverthelss, javascript (in fact DHTML and/or DOM) can "manipulate" CSS, or better say can find the default CSS and can build objects similar[i] with CSS, but not the same. And DHTML can not modify classes or styles, but build styles "on-the-fly".

For instance, you may set/change a object's style property (let's say background color) using

document.getElementById([i]idname).style.backgroundColor = '#FF0000';

You may use other methods too
getElementsByTagName, for instance....

The attributes are the same with CSS...

Note that, for composed CSS attributes (background-color, font-family, line-height....) DHTML (or so called style on-the-fly def) use the same words, but without line and Caps for second word (backgroundColor, fontFamily, lineHeight...)