Динамическое изменение содержимого

**Emotion** · 20 октября, 2006

Есть ячейка таблицы. Хочу, чтобы при наведении на ячейку изменялось свойство background-image со значения none на какое-то определённое значение.

Пытался сделать так:

function my()

{

document.getElementById('waq').style.background-image="picture.jpg"

}

.

.

Ничего не получается. Значит, что-то не так прописал. Мне кажется, что после style неправильно написал. Подскажите, как правильно.

Изменено 20 октября, 2006 пользователем Emotion

**Ф@РТОВЫЙ** · 20 октября, 2006

Emotion: в javascript нельзя использовать символ -

символ - убирается, а следующая буква заглавная, то есть у тебя будет так:

document.getElementById('waq').style.backgroundImage="picture.jpg";

Изменено 20 октября, 2006 пользователем Лорд Дмитрий

**Emotion** · 20 октября, 2006

document.getElementById('waq').style.backgroundImage="picture.jpg"; - не работает

document.getElementById('waq').style.backgroundColor="red"; - работает

Пробовал ещё - document.getElementById('waq').style.backgroundImage=url("picture.jpg"); - не работает тоже

В чём причина?

**Dimon#ic** · 20 октября, 2006

Говоришь, хочешь сменить background-image:none на что-то другое?

Так впиши в style тега <td> - background-image:none

Изменено 20 октября, 2006 пользователем Dimon#ic

**Emotion** · 21 октября, 2006

Я делаю так:

function over()

{

document.getElementById('waq').style.backgroundImage="2.jpg"

}

function out()

{

document.getElementById('waq').style.backgroundImage="none"

}

Причём функция out() работает. А функция over() - нет.

Возможно там нужно ещё как-то слово url привязать.

Ведь если просто писать в CSS то будет так:

background-image:url("1.jpg");

а если ничего то

background-image:none;

**Ф@РТОВЫЙ** · 21 октября, 2006

Emotion: как вариант предлогаю создать два разных класса:

<style>.td_over { backgroun-image:url("picture.jpg");}.td_out { background-image:none;}</style>

java script:

function over() { document.getElementById('waq').className = "td_over"; }function out() { document.getElementById('waq').className = "td_out"; }

в тег td добавь class="td_out"

**Emotion** · 21 октября, 2006

Заработало. А как теперь сделать, чтобы функция была универсальна для каждого пункта меню? Ведь там привязка идёт к id. А этот параметр не может повторяться.

**Emotion** · 21 октября, 2006

Пока сделал так:

<script>

function over(x)

{

document.getElementById(x).className="td_over";

}

function out(x)

{

document.getElementById(x).className="td_out";

}

</script>

<style>

.td_over {

background-image:url("1.jpg");

font-size:12px;

height:18px;

}

.td_out {

background-image:none;

font-size:12px;

height:18px;

}

</style>

<body>

<td class="td_out" onMouseOver="x=id;over(x)" onMouseOut="x=id;out(x)" id="1">О компании </td>

</body>

Но, пишет, что на странице присутствуют ошибки. А именно - Error:'document.getElementById(...)' is null or not an object. Правильно ли я всё написал? Может синтаксис не правильный. Я просто с JS знаком поверхностно.

Эта ошибка выдаётся при локальном просмотре страницы. При удалённом всё ок. Но всё равно что-то неправильно.

И сама менюшка что-то подглючивает. Сделал такую же на Flash - там как-то без глюков (ссылка)

Меню на JS

Изменено 21 октября, 2006 пользователем Emotion

**Ф@РТОВЫЙ** · 22 октября, 2006

Emotion: передавай функциям объект this это будет ссылка на твой td

<td class="td_out" onMouseOver="over(this)" onMouseOut="out(this)" id="1">О компании </td>

function over(x)

{

x.className="td_over";

}

function out(x)

{

x.className="td_out";

}

</script>

Войти

Динамическое изменение содержимого

Рекомендуемые сообщения

Emotion

Ссылка на комментарий

Поделиться на другие сайты

Ф@РТОВЫЙ

Ссылка на комментарий

Поделиться на другие сайты

Emotion

Ссылка на комментарий

Поделиться на другие сайты

Dimon#ic

Ссылка на комментарий

Поделиться на другие сайты

Emotion

Ссылка на комментарий

Поделиться на другие сайты

Ф@РТОВЫЙ

Ссылка на комментарий

Поделиться на другие сайты

Emotion

Ссылка на комментарий

Поделиться на другие сайты

Emotion

Ссылка на комментарий

Поделиться на другие сайты

Ф@РТОВЫЙ

Ссылка на комментарий

Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Создать учетную запись

Войти

Последние посетители 0 пользователей онлайн

Обзор

Активность