[JS] Obsługa mouse events

nataniel · Post autor: **nataniel** » czw paź 01, 2009 11:53 pm

Witam
Prosze o pomoc w nastepujacej sprawie.
Otóż mam DIVa jak poniżej:

CSS:

div#button {
 width:20px;
 height:20px;
 background-color:#000000 //kolor01 }

HTML:

Kod: Zaznacz cały

<div id="button"> </div>

Jak napisac pojedynczą funkcję w JavaScript,
- żeby po najechaniu myszą na DIVa kolor jego tła zmienał się na kolor02,a po opuszczeniu obszaru diva kolor powracał na kolor01 (MouseOver/ MouseOut)
- po kliknieciu na DIVa kolor jego tła zmienił się na kolor03 i pozostał taki dopóki nie klikniemy gdzies poza obszarem tego diva, (MouseClick)
- jesli DIV jest 'kliknięty' to kolor nie zmienia się gdy najeżdżamy na niego myszą.

Chodzi o napisanie jednej funkcji operującej na id obiektu ( document.getElementById('button') ).
Żeby nie pisać paciorka w divie (<div onClick="funkcja1" onMouseOver="funkcja2" onMouseOut="funkcja3" itd itd)

Proszę o pomoc w tej sądzę prostej sprawie ale jestem początkujący i sprawa mnie przerasta. po długich nieudanych próbach zwracam sie o pomoc do fachowców.

POMOCYYYYY

slawko · Post autor: **slawko** » pt paź 02, 2009 7:52 am

Możesz użyć stylów css do tego, tylko ściągnij sobie plik csshover.htc by działał ci pod ie6
musisz go dodać do arkusza stylów

Kod: Zaznacz cały

 body {
behavior: url(csshover.htc);
 }

Kod: Zaznacz cały

div#buttom:hover{
width:20px;
height:20px;
background-color:#000000; //kolor01 
}

po najechaniu myszką

Kod: Zaznacz cały

div#buttom:active{
width:20px;
height:20px;
background-color:#000000; //kolor02 
}

po kliknieciu

nataniel · Post autor: **nataniel** » pt paź 02, 2009 10:25 am

hello
pierwsze od czego zacząłem żeby to zrobić to właśnie CSS.
Dlatego poszedłem w stronę JavaScript

:active działa tylko w momencie kliknięcia. Podejrzewam, że :hover przysłania swoim działaniem :active kiedy zwolnimy przycisk myszy.

Chodziło mi o to, żeby po kliknięciu w diva kolor sie zmienił i pozostał taki do momentu ponownego klikniecie gdzies poza jego obszarem albo na nim (pod warunkiem, ze został klikniety)

chodzi mi o wychwycenie tych eventów w JS:

Kod: Zaznacz cały

var obj = document.getElementById('button');

if(warunek sprawdzajacy czy najechano myszą && div nie jest klikniety)
{
obj.style.background-color="kolor1";
}

if(warunek sprawdzajacy czy kliknięto na diva && div nie jest klikniety)
{
obj.style.background-color="kolor2";
}
else 
{
obj.style.background-color="kolor0";
}


if(warunek sprawdzajacy czy mysz opuszcza diva && div nie jest klikniety)
{
obj.style.background-color="kolor0";
}

jak wychwycić te zdarzenia myszy w JS ?
nie wiem co pisać w tych warunkach if/ jak to zakodować
HELP

nataniel · Post autor: **nataniel** » pt paź 02, 2009 11:25 am

To miałoby wygladać mniejwięcej tak:

Kod: Zaznacz cały

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

<style type="text/css">
body    {     behavior:url("csshover.htc");    }
div#button {
width:20px;
height:20px;
background-color:#000000;
}



</style>



</head>

<body>

<div id="button"> </div>
<script type="text/javascript"> 

var m=false;

document.getElementById('button').onclick = function () {
	if(!m) {
		m=true;
		document.getElementById('button').style.background="#cccccc";
	}
	else {
		m=false;
		document.getElementById('button').style.background="#000000";
	}
}


document.getElementById('button').onmouseover = function () {
	if(!m) {
		document.getElementById('button').style.background="#505050";
	}
}

document.getElementById('button').onmouseout = function () {
	if(!m) {
		document.getElementById('button').style.background="#000000";  
	}
}

</script> 

<br>
<br>


</body>
</html>

tylko dlaczego jak sekcje <script> umieszcze w <HEAD> albo w oddzielnym pliku *.js to funkcje JS nie działają ?

Ogólnie potrzebuje wiedziec jak sprawdzic jakie zdarzenie myszy zaszlo na obiekcie o danym ID zeby przypisac odpowiednie funkcje do wychwyconych zdarzeń.

Zmierzam do tego aby zrobic sobie rozwijane menu.
mam 2 divy BUTTON i WINDOW.

Klikajac button to pokazuje sie window. Window znika jak ponownie klikne na button albo gdzies poza window
ehh masakra

[JS] Obsługa mouse events

[JS] Obsługa mouse events

Re: [JS] Obsługa mouse events

Re: [JS] Obsługa mouse events

Re: [JS] Obsługa mouse events