Jump to content

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


Recommended Posts

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

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

function my()

{

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

}

.

.

.

<td onmouseover="my()" id="waq" name="waq">...</td>

.

.

.

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

Edited by Emotion
Link to comment
Share on other sites

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

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

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

Edited by Лорд Дмитрий
Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

Я делаю так:

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;

Link to comment
Share on other sites

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"

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

<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

Edited by Emotion
Link to comment
Share on other sites

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

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

<script>

function over(x)

{

x.className="td_over";

}

function out(x)

{

x.className="td_out";

}

</script>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...