Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Не получаеться сделать кнопку! (https://javascript.ru/forum/dom-window/23407-ne-poluchaetsya-sdelat-knopku.html)

Bajker 22.11.2011 15:58
Не получаеться сделать кнопку!
 
Вообщем вот пытаюсь прикрутить на сайт возможность что-бы кнопки менялись при нажатии. Собственно не могу найти ошибку в коде, так как он упорно не хочет работать. :-?

Вот участок HTML который отвечает за кнопку (ну я пока пытаюсь сделать для начала одну):

<div class="main_menu">
<table>
<tr>
<td><a href="Rock&Metal - glavnaja.html"><div id="glavnaja" class="glavnaja"></div></a> </td>

Вот данный участок CSS:


.glavnaja {background: url('knopki\glavnaja1.png')
}

.glavnaja-click {background: url('knopki\glavnaja2.png')
}


Ну и вот собственно сам javascript:

var glavnaja = document.getElementByID ('glavnaja')
glavnaja.onmousedown = function() {
addClass(this, 'glavnaja-click')
}

glavnaja.onmouseup = function() {
removeClass(this, 'glavnaja-click')
}

Файл ява скрипта добавлен при помощи
<script type="text/javascript" src="Rock&Metal - glavnaja.js"></script>
и находится в хеде.
:(
Вообщем вот, как мне кажеться разместил все необхадимые участки кода. Помогите, самому мне боюсь не разобраться.

:-?

nekto_O 22.11.2011 16:06
первое что бросается в глаза это getElementByID
и не хватает закрывающих хтмл-тегов в разметке.

Bajker 22.11.2011 16:16
Цитата:
Сообщение от nekto_O (Сообщение 138348)
первое что бросается в глаза это getElementByID
и не хватает закрывающих хтмл-тегов в разметке.
а что с getElementByID не так то?
И по точнее пожалуста про тэги!

Kolyaj 22.11.2011 16:45
Цитата:
Сообщение от Bajker
а что с getElementByID не так то?
Нет такого метода.

Bajker 22.11.2011 17:04
Нет??!! Тоесть информация из этого раздела - http://beta.javascript.ru/play/tutor...ver/index.html и этого - http://beta.javascript.ru/tutorial/mouse-events неверна?

Bajker 22.11.2011 17:08
Да и во всемирной паутине находил уже инфориацию по getElementById! Как нет такого метода...

Kolyaj 22.11.2011 17:28
Цитата:
Сообщение от Bajker
а что с getElementByID не так то?
Цитата:
Сообщение от Bajker
Да и во всемирной паутине находил уже инфориацию по getElementById!
Найдите ровно одно отличие.

Bajker 22.11.2011 23:06
Если дело в буке Д? то размер же не имеет значения, а что там ещё нетак непойму, перепробывал уже разные варианты. блин... Может надо что то ещё дописать в ява скрипт или хтмл? во всяком случае цсс вроде правильная...

melky 22.11.2011 23:14
Цитата:
Сообщение от Bajker (Сообщение 138448)
Если дело в буке Д? то размер же не имеет значения, а что там ещё нетак непойму, перепробывал уже разные варианты. блин... Может надо что то ещё дописать в ява скрипт или хтмл? во всяком случае цсс вроде правильная...
что за функции addCalss, removeClass и откуда они взялись?

Bajker 22.11.2011 23:22
А, ну есчё есть это, но разве там суть? там ошибку тоже не вижу...


function addClass(el, cls) {
for(var c = el.className.split(' '),i=c.length-1; i>=0; i--) {
if (c[i] == cls) return
}

el.className += ' '+cls
}

function removeClass(el, cls) {
for(var c = el.className.split(' '),i=c.length-1; i>=0; i--) {
if (c[i] == cls) c.splice(i,1)
}

el.className = c.join(' ')
}

Kolyaj 22.11.2011 23:39
Цитата:
Сообщение от Bajker
то размер же не имеет значения
Где такое написано? Имеет.

trikadin 23.11.2011 00:01
Bajker, читайте книги))

melky 23.11.2011 00:04
Цитата:
Сообщение от Bajker (Сообщение 138344)
<script type="text/javascript" src="Rock&Metal - glavnaja.js"></script>
и находится в хеде.
блея. ну конечно же.

вы элемент проверяли ? и не NULL ли он ?

Bajker 23.11.2011 04:03
Я пробывал со всеми размерами уже. Сейчас стоит маленькая Д. нечего непоменялось. ЧТо до элемента, проверю уже завтро. Хотя простые алерты вроде выводились, когда проверял, хотя... Вообщем посмотрю днём и отпишусь

melky 23.11.2011 10:48
скрипт вставлять не в head, а перед закрывающим тегом body (</body>)

Bajker 24.11.2011 02:56
менял его размещение, не помогает. Да и если бы помогло то удивился бы очень. А алерты вызываються

Bajker 25.11.2011 02:31
Так где же ошибка в конце концов?

melky 25.11.2011 19:44
откройте консоль да посмотрите ... код весь не выложен - гадать что ли ?

Bajker 26.11.2011 20:19
<html>
<head>
<title> Rock&Metal - Main Page </title>
<link rel="stylesheet" type="text/css" href="Rock&metal - glavnaja.css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="Rock&Metal - glavnaja.js">
</script>
</head>
<body>
<div class="main_logo">
<img src="ROCK&METAL.LV_LOGO.png">
</div>

<div class="border1">
<img src="shapka\border1.png" width="1271px" height="20px">
</div>

<div class="border2">
<img src="shapka\border1.png" width="1271px" height="20px">
</div>


<div class="main_menu">
<table>
<tr>
<td><a href="Rock&Metal - glavnaja.html"><div id="glv" class="glavnaja">1</div></a></td>

<td><a href="Rock&Metal - novosti.html"> <img src="knopki\novosti1.png"> </a> </td>

<td><a href="Rock&Metal - ispolniteli.html"> <img src="knopki\ispolniteli1.png"> </a> </td>

<td><a href="Rock&Metal - zhanri.html"> <img src="knopki\zhanri1.png"> </a> </td>

<td><a href="Rock&Metal - video.html"> <img src="knopki\video1.png"> </a> </td>

<td><a href="Rock&Metal - poleznoje.html"> <img src="knopki\poleznoje1.png"> </a> </td>

<td><a href="Rock&Metal - o nas.html"> <img src="knopki\o_nas1.png"> </a> </td>
</tr></table>
</div>



<div class="novosti">
<img src="zagolovki\novosti.png">
<p> </p>
</div>

<div class="obnovlenija">
<img src="zagolovki\obnovlenija.gif">
<p></p>
</div>


<div class="interesnoe">
<img src="zagolovki\interesnoe.png">
<p></p>
</div>


<div class="sluchajnij_skrinshot">
<img src="zagolovki\slucahjnij_skrinshot.png">
<p></p>
</div>



<div class="sluchajnoe_video">
<img src="zagolovki\sluchajnoje_video.png">
<p></p>
</div>





</body>
</html>

Bajker 26.11.2011 20:19
.main_logo {
position:relative; top:0px; left:0px;
}

body {
background: url('leather.jpg') repeat;
margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;
width:1024px; height:2048px;
overflow:auto;
}

.border1
{position:absolute; top:320px; left:0px;
}

.main_menu
{position:absolute; top:335px; left:350px;
}


.glavnaja {background: url('knopki\glavnaja1.png')
}

.glavnaja-click {background: url('knopki\glavnaja2.png')
}

.novosti {background: url('knopki\gnovosti1.png')
}

.novosti-click {background: url('knopki\gnovosti2.png')
}


.ispolniteli {background: url('knopki\gispolniteli1.png')
}

.ispolniteli-click {background: url('knopki\gispolniteli2.png')
}


.zhanri {background: url('knopki\gzhanri1.png')
}

.zhanri-click {background: url('knopki\gzhanri2.png')
}


.video {background: url('knopki\gzhanri1.png')
}

.video-click {background: url('knopki\gzhanri2.png')
}



.poleznoje {background: url('knopki\gpoleznoje1.png')
}

.poleznoje-click {background: url('knopki\gpoleznoje2.png')
}


.o_nas {background: url('knopki\go_nas1.png')
}

.o_nas-click {background: url('knopki\go_nas2.png')
}


.border2
{position:absolute; top:375px; left:0px;
}


.novosti
{position:absolute; top:450px; left:600px;
}



.obnovlenija
{position:absolute; top:900px; left:1050px;

}


.interesnoe
{position:absolute; top:900px; left:10px;
}


.sluchajnij_skrinshot
{position:absolute; top:450px; left:10px;
}



.sluchajnoe_video
{position:absolute; top:450px; left:1000px;
background: }

Bajker 26.11.2011 20:19
var glavnaja = document.getElementById ('glv')
glavnaja.onmousedown = function() {
addClass(this, 'glavnaja-click')
}

glavnaja.onmouseup = function() {
removeClass(this, 'glavnaja-click')
}


function addClass(el, cls) {
for(var c = el.className.split(' '),i=c.length-1; i>=0; i--) {
if (c[i] == cls) return
}

el.className += ' '+cls
}

function removeClass(el, cls) {
for(var c = el.className.split(' '),i=c.length-1; i>=0; i--) {
if (c[i] == cls) c.splice(i,1)
}

el.className = c.join(' ')

Bajker 26.11.2011 20:20
Вот весь код... Тогда видимо буду делать наверно через ЦСС при помощи ховер если так невыйдет...

melky 26.11.2011 20:35
http://jsfiddle.net/kSQ6Q/

это ваш код. я добавил html и css. он работает же...

Bajker 27.11.2011 01:42
РАботает? Вот и я не вижу эту ошибку! Но У меня работать не хочет! Есть два изображения... Одно должно сменяться другим при нажатии... но они не сменяються...

Bajker 27.11.2011 01:47
Ещё раз перепроверил, клик работает. Да. Но не работает сама замана избражение! Кроме того, картинки вообще таким оброзом не загружаються. работает только сам этот клик!

melky 27.11.2011 11:34
тогда сделайте на CSS эти кнопки...

используя псевдоклассы hover и active.

вообще надо было с css начинать.

Bajker 27.11.2011 18:27
Да вот хотел именно в ява скрипт сделать просто... А через Эктив разве можно это сделать? Он к контейнерам <a> присуждаеться насколько я знаю. причём ко всем одинаково. Как задать для каждого конкретного контейнера свой эктив я не знаю.

<style type="text/css">
a:link {
color: #0000d0; /* Цвет ссылок */
}
a:visited {
color: #900060; /* Цвет посещенных ссылок */
}
a:active {
color: #f00; /* Цвет активной ссылки */
}
</style>
</head>
<body>
<p><a href="task1.html">

Ну к примеру так... А мне неоибхадимо что-бы для каждой кнопки заливалось своё изборожение уже нажатой кнопки при нажимании на неё

melky 28.11.2011 00:46
поищите в интернете, что такое спрайты (изображения) и как их применять

Bajker 28.11.2011 01:57
Ладно, буду разбираться. Спасибо всем кто пытался помочь. Тему пожалуй можно закрывать. Наверно уже достать успел))


Часовой пояс GMT +3, время: 20:35.