Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.06.2011, 14:58
Интересующийся
Отправить личное сообщение для Grendel Посмотреть профиль Найти все сообщения от Grendel
 
Регистрация: 20.04.2011
Сообщений: 18

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 нужно подставлять реальный и в кавычках. Но может существует способ выразить его через переменную?
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 15.06.2011, 15:03
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

Эту тему обжовывали милион раз на форуме.
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'">
__________________
.
Ответить с цитированием
  #3 (permalink)  
Старый 15.06.2011, 15:32
Интересующийся
Отправить личное сообщение для Grendel Посмотреть профиль Найти все сообщения от Grendel
 
Регистрация: 20.04.2011
Сообщений: 18

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

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

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

Думаю, что выразить через функцию, код будет покороче. Еще раз спасибо.
Ответить с цитированием
  #4 (permalink)  
Старый 15.06.2011, 15:41
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

можно ещё проще
<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/>
__________________
.
Ответить с цитированием
  #5 (permalink)  
Старый 15.06.2011, 16:12
Интересующийся
Отправить личное сообщение для Grendel Посмотреть профиль Найти все сообщения от Grendel
 
Регистрация: 20.04.2011
Сообщений: 18

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

Спасибо, Skipp! Очень выручил.
Ответить с цитированием
  #6 (permalink)  
Старый 17.06.2011, 03:57
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

Сообщение от Skipp
onmouseover="onBut(this)" onmouseout="outBut(this)"
Это ужасно. Зачем новичку такое советовать?
Ответить с цитированием
  #7 (permalink)  
Старый 17.06.2011, 09:13
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,782

Сообщение от 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>

Последний раз редактировалось ksa, 17.06.2011 в 09:18.
Ответить с цитированием
  #8 (permalink)  
Старый 17.06.2011, 09:44
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

FINoM,
и что же в этом ужасного?
__________________
.
Ответить с цитированием
  #9 (permalink)  
Старый 17.06.2011, 12:31
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

ksa,
Если брать во внимание IE 6-й, то все же без скриптов не обойтись, так он (IE6) поддерживает псевдокласс :hover только для ссылок Хотя можно и ссылку сделать блоком (display: block)
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #10 (permalink)  
Старый 17.06.2011, 12:39
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,782

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

display: block;


P.S.
Я не поддерживаю ИЕ ниже 7-ки...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск