Javascript.RU

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

Меню на Javascript
сем привет.

Есть время свободное и захотел сайт сделать.
С версткой НТМЛ проблем нет(кроме блочной, которую я не знаю), но захотелось сделать менюшку с меняющимися кнопками.

Есть 2 варианта:
1. Сделать кнопки рисунками, но надо будет рисовать по 2 кнопки с текстом, а если потом добавлять, то еще и дорисовывать. + сайт будет много весить.
2. Менять фоновые изображения в каждой клетке меню при наведении.

Я в ДжаваСкриптах не шарю. Нашел в Интернет только, как фоновые цвета менять при наведении. Я её отредактировал, но что-то с картинками не получается. Подскажите, где подправить?

<script type="text/JavaScript">
<!--

function newColor(idCell1) { 
eval('document.all.'+idCell1+'.style.background-image= "url(images/hov_gr_but.jpg)"'); 
eval('document.getElementById("' + idCell1 + '").style.background-image= "url(images/hov_gr_but.jpg)"'); 
} 

function backColor(idCell1) { 
eval('document.all.'+idCell1+'.style.background-image = "url(images/hov_bl_but.jpg)"'); 
eval('document.getElementById("' + idCell1 + '").style.background-image = "url(images/hov_bl_but.jpg)"'); 
} 
//-->
</script>
<table width="163" cellpadding="10" cellspacing="0" align="center">
<tr height="44" onMouseOver="newColor('c1')" onMouseOut="backColor('c1')">
<td id="c1" background="./images/hov_gr_but.jpg">1</td>
</tr>
<tr height="44">
<td background="./images/hov_bl_but.jpg">2</td>
</tr>
<tr height="44">
<td background="./images/hov_bl_but.jpg">3</td>
</tr>
<tr height="44">
<td background="./images/hov_bl_but.jpg">4</td>
</tr>
<tr height="44">
<td background="./images/hov_bl_but.jpg">5</td>
</tr>
</table>

При наведении пункт меню становится зеленым

П.С. Пишу уже на третий форум (теперь специализированный). Нигде так и не помогли

Последний раз редактировалось Андрей Параничев, 24.02.2009 в 18:27. Причина: Пользуйтесь bb-тегами [js] и [html] для оформления листингов кода в теле сообщения
Ответить с цитированием
  #2 (permalink)  
Старый 24.02.2009, 18:29
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

function newColor(idCell1) { 
   document.getElementById(idCell1).style.backgroundImage= "url(images/hov_gr_but.jpg)"; 
} 
 
function backColor(idCell1) { 
   document.getElementById(idCell1).style.backgroundImage= "url(images/hov_bl_but.jpg)";
}
Ответить с цитированием
  #3 (permalink)  
Старый 25.02.2009, 11:29
Интересующийся
Отправить личное сообщение для pasha4ur Посмотреть профиль Найти все сообщения от pasha4ur
 
Регистрация: 24.02.2009
Сообщений: 11

Большое спасибо.

А можно вкратце, почему мой вариант не работаьл?
Ответить с цитированием
  #4 (permalink)  
Старый 25.02.2009, 12:15
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

style.background-image
в CSS есть такое свойство.а вот в JS нету.в JS нельзя использовать в именнах переменных и свойств знак "-"

поэтому, когда JS обращается к свойствам CSS через style, то дефисы удаляются, а следующие за ними буквы пишутся заглавными
в данном случае
backgroundImage

PS это далеко не единственный минуч вашего скрипта изначального.
он ужасен
неизвестно для чего используются eval-ы.к тому же обращение к document.all есть не везде, и не везде оно одинаково работает.
а там, где он есть он в лучшем случае эквивалентен втиорой строчке
Ответить с цитированием
  #5 (permalink)  
Старый 25.02.2009, 15:26
Интересующийся
Отправить личное сообщение для pasha4ur Посмотреть профиль Найти все сообщения от pasha4ur
 
Регистрация: 24.02.2009
Сообщений: 11

Спасибо.
Лучше и не брать за эти скрипты, а использовать готовые скрипты. %)
Ответить с цитированием
  #6 (permalink)  
Старый 25.02.2009, 19:47
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

что не брать?
может быть вы хотели сказать "не братся"?

тогда вы будете на каждую строчку JS обращатся на форум за помощью по видоизменению.
это всем очень быстро надоест.
Ответить с цитированием
  #7 (permalink)  
Старый 27.02.2009, 12:18
Интересующийся
Отправить личное сообщение для pasha4ur Посмотреть профиль Найти все сообщения от pasha4ur
 
Регистрация: 24.02.2009
Сообщений: 11

Вот пример сайта http://pasha4ur.narod.ru/. Правда лучше всего открывать в Опере. Я просто старый скрипт из книжки вставил и
за курсором мышки шарики двигаются только в Опере. В ФФ они тупо лежат внизу, а Интернет Эксплоуер начинает тупо тормозить весь комп.

Есть еще пару вопрос, но думаю не стоит создавать темы по ним (а то тупые темки получаться от чайника ))):
1. Можете дать ссылку, где есть много бесплатных джава-скриптов? А то я на диал-апе уже запарился искать %)
2. Искал в Интернете, но так и не нашел учебник/урок, чтобы понять, что такое блочная верстка. Но это же намного круче тбличной? не подкинете парочку?
3. Хотел сделать сайт полупрозрачным (рисунки фоновые в PNG), но в Эксплоуере все же неправильно отображается. Нашел решение для обычных рисунков. Нет ли уже какого-нибудь скрипта, чтобы и фоновые картинки нормально отображались??

Большое спасибо за ответы!!!
Ответить с цитированием
  #8 (permalink)  
Старый 27.02.2009, 16:58
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

1.бесплатные скрипты лучше брать из головы.
потому что на большинстве сайтов с бесплатными скриптами, они устаревши до ужаса.
не знаю сайтов с нормальными скриптами.
вот тут есть , но старье.Если будете использовать, не обращайтесь потом с "скрипт не работает"/"надо переделать" .тут мало у кого есть желание копатся в таком некачественном продукте.
вывод:изучайте сами, и пишите.мы поможем если что.такие задачи нам интереснее разбирать как правило, чем бесплатный хлам
2.тут вроде есть статьи по поводу верстки слоями.не читал,и оченить не могу, так как версткой плотно не занимаюсь
3.не знаю.
Ответить с цитированием
  #9 (permalink)  
Старый 27.02.2009, 17:59
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от pasha4ur
3. Хотел сделать сайт полупрозрачным (рисунки фоновые в PNG), но в Эксплоуере все же неправильно отображается. Нашел решение для обычных рисунков. Нет ли уже какого-нибудь скрипта, чтобы и фоновые картинки нормально отображались??
pngfix
Лично я бы посоветовал решение Виталия Харисова http://company.yandex.ru/experience/ доклад "CSS Framework своими руками: практика"
Ответить с цитированием
  #10 (permalink)  
Старый 27.02.2009, 23:15
Интересующийся
Отправить личное сообщение для pasha4ur Посмотреть профиль Найти все сообщения от pasha4ur
 
Регистрация: 24.02.2009
Сообщений: 11

Gvozd, сорри не могу тебе "+" добавить. Спасибо. Пишет какую-то фигню: "Вы должны поставить кому-то еще перед....."

У меня с программированием что-то совсем тяжко идет. Я больше гумманитарий(в школе учился на медицинском, а в техникум "попал" на программиста, но нас там ничему и не учили). НТМЛ правда дался легко!

Kolyaj, спасибо! Буду читать. Очень хочется прозрачным сделать!

Не можете подсказать, что сделать, чтобы шарики за курсором в ФФ и ИЕ нормально двигались?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт меню не работает только в Firefox somatic Firefox/Mozilla 2 28.07.2009 03:23
всплывающее Javascript меню Dekker8 Events/DOM/Window 0 21.11.2008 21:45
Выпадающее меню на css и javascript Jackky Общие вопросы Javascript 3 13.09.2008 18:30
В Mozilla Firefox 3.0 проблемма с Javascript меню artmedia Элементы интерфейса 1 07.09.2008 10:43
Требуется поправить меню на javascript Гость Работа 1 31.07.2008 11:22