Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   document.getElementById(?); (https://javascript.ru/forum/events/18059-document-getelementbyid-%3B.html)

Grendel 15.06.2011 14:58

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 нужно подставлять реальный и в кавычках. Но может существует способ выразить его через переменную?
Спасибо.

Skipp 15.06.2011 15:03

Эту тему обжовывали милион раз на форуме.
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'">

Grendel 15.06.2011 15:32

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

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

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

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

Skipp 15.06.2011 15:41

можно ещё проще
<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/>

Grendel 15.06.2011 16:12

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

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

FINoM 17.06.2011 03:57

Цитата:

Сообщение от Skipp
onmouseover="onBut(this)" onmouseout="outBut(this)"

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

ksa 17.06.2011 09:13

Цитата:

Сообщение от Grendel
причем можно даже обойтись без идентификаторов

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

<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>

Skipp 17.06.2011 09:44

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

walik 17.06.2011 12:31

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

ksa 17.06.2011 12:39

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

display: block;


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


Часовой пояс GMT +3, время: 15:02.