Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > Не работает функция


Автор: Deadcow 12.10.2010, 02:12
Я в JS копаюсь от силы пару дней, поэтому ошибка наверняка простецкая. Помогите обнаружить.  smile 

Существует строчка:
Код

<div class=r><table><tr><td><a id=one class=main_theme href=# 
onMouseOver="this.style.background='black'; this.style.color='white';" 
onMouseOut="this.style.background='white'; this.style.color='black';">one</a></td></tr><tr><td>
<a href=# onMouseOver="document.getElementById('one').style.background='black'; document.getElementById('one').style.color='white';" 
onMouseOut="document.getElementById('one').style.background='white'; document.getElementById('one').style.color='black';">
<img src="img/gall/one.jpg"></a></td></tr></table></div>

Все просто - превью таблица описане/картинка. Наводишь на текст - его фон становится черным, а сам текст белым. Уводишь мышку - текст выкукоживается обратно. То же происходит при наведении на картинку. Превьюшка - одна из многих, потому создаю аункцию:

Код

<script>
var id;
    function Over('id') {
    document.getElementById('id').style.background='black'; 
    document.getElementById('id').style.color='white';
}
    function Out('id') {
    document.getElementById('id').style.background='white'; 
    document.getElementById('id').style.color='black';
</script>

и меняю код строки:
Код

<div class=r><table><tr><td><a id=angels class=main_theme href="previev.php?target=photo" 
onMouseOver="Over('angels');" onMouseOut="Out('angels');">
angels</a></td></tr><tr><td><a href="previev.php?target=photo" 
onMouseOver="Over('angels');" onMouseOut="Out('angels');">
<img src="img/gall/angels.jpg"></a></td></tr></table></div>

Но чуда, увы, не происходит. Ничего не работает. Наверняка совершенно нубский косяк в синтаксисе, поправьте, пожалуйста.

Автор: SelenIT 12.10.2010, 04:20
Функции пытаются искать элемент с id='id', т.к. в них используется строковая константа, а не переменная. Нужно убрать кавычки у id в функциях.

А вообще для такого эффекта должно хватить CSS (;hover), правда, верстку придется чуть поменять (убрать таблицу, загнать текст и картинку в одну ссылку, текст обернуть в <span> и задать им всем - ссылке, спану и картинке - display:block)...

Автор: ayax2005 12.10.2010, 04:26
Вот здесь function Over('id') к примеру, вы в качестве аргумента функции передаёте константу. А надо переменную.
var id; - тоже ни к чему.

Автор: Deadcow 12.10.2010, 11:42
А еще я забыл закрыт  блок функции Out  smile  smile 
SelenIT, у меня все превью таблицы выровнены по центру, а таблица дает возможность выравнивания текста по левому краю относительно картинки, иначе текст встает тоже по центру (относительно картинки). Я сам очень хочу избавиться от использования таблицы и дублирования ссылок. (при использовании таблицы объединение ссылок дает плохой эффект - видно как заливается фон ячейки с картинкой, даже при том, что размер ячейки равен размеру таблицы)...
Вот та, что справа - с таблицей. Та, что слева - без, с общей ссылкой. 
http://ipicture.ru/Gallery/Viewfull/1525299.html

Кстати, для чего помещать текст в блок span? 

И спасибо вам, функция работает отлично, осталось сделать код менее громоздким smile

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)