document.getElementById(?);
 

Доброго времени форумчане. Подскажите пожалуйста, можно ли динамически менять значение ID в функции
document.getElementById(ID); ?

Код у меня простой, всего-навсего меняет картинку кнопки при наведении на нее. Но кнопок у меня много и хотелось бы чтобы все они работали от одной функции. Я пробовал так:

function onBut(id){
    var but = document.getElementById(id);
    but.src = "/img_pages/katalog/buttons/but2.png";
};
function outBut(id){
    var but = document.getElementById(id);
    but.src = "/img_pages/katalog/buttons/but1.png";
};

Ну и в самом HTML-коде прописывал примерно так:

<img id="b1" onmouseover="onBut(b1);" onmouseout="outBut(b1);" src="/img_pages/katalog/buttons/but1.png">

Понимаю, что в функции document.getElementById('id'); -- id нужно подставлять реальный и в кавычках. Но может существует способ выразить его через переменную?
Спасибо.

Эту тему обжовывали милион раз на форуме.
ID в document.getElementById(ID) это передаваемый параметр в виде строки и всё, оно может быть любое, но строкой

<img src="http://img.yandex.net/i/www/logo.png" onmouseover="this.src='http://www.google.ru/images/logos/ps_logo2.png'" onmouseout="this.src='http://img.yandex.net/i/www/logo.png'"><br/>
<img src="http://i.rl0.ru/_blocks/hat/logo.gif" onmouseover="this.src='http://www.google.ru/images/logos/ps_logo2.png'" onmouseout="this.src='http://i.rl0.ru/_blocks/hat/logo.gif'">

Большое спасибо. Я пока еще только начинаю программировать на javascript, поэтому с ним пока на ВЫ =) . Очень простое решение.

Поняв суть метода, я просто подкорректировал HTML-код, теперь он работает.

onmouseover="onBut('b1');" onmouseout="outBut('b1');"

Думаю, что выразить через функцию, код будет покороче. Еще раз спасибо.

можно ещё проще

<script type="text/javascript">
function onBut(elem){
    elem.src = "http://www.google.ru/images/logos/ps_logo2.png";
};
function outBut(elem){
    elem.src = "http://img.yandex.net/i/www/logo.png";
};
</script>
<img height="100" src="http://img.yandex.net/i/www/logo.png" onmouseover="onBut(this)" onmouseout="outBut(this)"><br/>
<img height="100" src="http://img.yandex.net/i/www/logo.png" onmouseover="onBut(this)" onmouseout="outBut(this)"><br/>
<img height="100" src="http://img.yandex.net/i/www/logo.png" onmouseover="onBut(this)" onmouseout="outBut(this)"><br/>
<img height="100" src="http://img.yandex.net/i/www/logo.png" onmouseover="onBut(this)" onmouseout="outBut(this)"><br/>
<img height="100" src="http://img.yandex.net/i/www/logo.png" onmouseover="onBut(this)" onmouseout="outBut(this)"><br/>

Согласен, причем можно даже обойтись без идентификаторов. Век живи, век учись!

Спасибо, Skipp! Очень выручил.

Это ужасно. Зачем новичку такое советовать?

И даже без скриптов...

<style>
div {
   width: 20px;
   height: 20px;
   background: url('http://javascript.ru/forum/images/smilies/blink.gif');
}
div:hover {
   background: url('http://javascript.ru/forum/images/smilies/smile.gif');
}
</style>
<div></div>

FINoM,
и что же в этом ужасного?

ksa,
Если брать во внимание IE 6-й, то все же без скриптов не обойтись, так он (IE6) поддерживает псевдокласс :hover только для ссылок :) Хотя можно и ссылку сделать блоком (display: block) :-?

walik, никто не мешает ссылке дать дополнительно

display: block;

P.S.
Я не поддерживаю ИЕ ниже 7-ки... :)

Я тоже за то, что бы подобные мелочи делать в CSS.
Как по мне проще.