[JavaScript]zapis dwóch zdarzeń Opcje

[c4ash]

Witajcie!

W koncu zabrałem sie za JS. Tak wiec prosze nie krzyczcie, staram sie czegos sensownego nauczyc.
Mam skrypt ktory wskazuje pozycje kursora i dodaje info na stronie:

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript">
window.onload = init;
function init() {
  if (window.Event) {
	document.captureEvents(Event.MOUSEMOVE);
  }
  document.onclick = getXY;
}
 
 
function getXY(e) {
  x = (window.Event) ? e.pageX : event.clientX;
  y = (window.Event) ? e.pageY : event.clientY;
 
  document.position.position1.value = x+":"+y;
}
[JAVASCRIPT] pobierz, plaintext 

I tutaj juz wszystko jasne... do momentu gdy chce zaznaczyc drugi punkt, ale tak, aby nie stracic tego pierwszego. Mam dwa inputy, position1 to polozenie 1, position2 to ma byc tego drugiego... Ale jak pobrac przy uzyciu tej samej funkcji druga wartosci i wpisac ja gdzie indziej?

Z gory dziekuje za pomoc.

Ten post edytował c4ash 15.02.2014, 12:29:32

[SmokAnalog]

Nie wiem czy dobrze rozumiem: chcesz, żeby po kliknięciu wypełniło się pierwsze pole, ale gdy to pole jest już wypełnione, to wtedy drugie pole, tak?

To możesz np. tak:

[JAVASCRIPT] pobierz, plaintext 
window.onload = init;
function init() {
  if (window.Event) {
    document.captureEvents(Event.MOUSEMOVE);
  }
  document.onclick = getXY;
}
 
 
function getXY(e) {
  x = (window.Event) ? e.pageX : event.clientX;
  y = (window.Event) ? e.pageY : event.clientY;
 
  document.getElementById(document.getElementById('position1').value === '' ? 'position1' : 'position2').value = x+":"+y;
}
[JAVASCRIPT] pobierz, plaintext 

Zauważ, że użyłem document.getElementById zamiast document.nazwaFormularza.nazwaPola. Żeby zadziałało, inputy muszą mieć odpowiednio id="position1" i id="position2"

[c4ash]

No faktycznie, dziala. Trojoperator zalatwia sprawe.
Ale teraz jeszcze inne dzialanie.. A tego to juz nie mam pojecia jak zaczac, czy ugryzc.
Co nalezy dodac, aby te punkty byly jakos zaznaczone, albo jeszcze inaczej - aby pole powstale przez klikniecie tych dwoch punktow, bylo obramowane w jakis sposob?
Aby wyjasnic moze jeszcze dokladniej - zaznaczajac dwa punkty mamy wierzcholki prostokata - jak zrobic, aby widac bylo takie obramowanie?

To co przyszlo mi do glowy, to pobrac te dane z position1 i 2 przez getElementById - nastepnie uzyc funkcji ktora sprawila by stworzyc zaznaczenie. Mysle w dobyrm kierunku?
Czy js ma gotowe funkcje, ktore mozna by wykorzystac?

[SmokAnalog]

Po Twoim opisie wciąż nie mam pojęcia o co chodzi Nie wiem o jakie obramowanie chodzi.

[c4ash]

Ok, to moze tak: jak wykonac w js aby mozna bylo narysowac sobie prostokat na stronie, w dowolnym miejscu?
Mam juz wspolrzedne poczatku, konca. Wymyslilem, aby js rysowal diva z przezroczystym tlem, czy tam polprzezroczystym.
Czyli do zdarzenia onclick dopisac document.createElement('div') i ustawic element.style.background

Czy tok rozumowania jest dobry?

[SmokAnalog]

Tak, tok rozumowania jest dobry. Prostokąt będzie taki jak chcesz i tam gdzie chcesz, gdy nadasz mu style:

• position: absolute
• left
• top
• width
• height
• background

[c4ash]

Czy jest cos jeszcze, o czym powinienem wiedziec? Gdyz createElement nie dodaje nowego div`a..

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript">
window.onload = init;
function init() {
  if (window.Event) {
    document.captureEvents(Event.MOUSEMOVE);
  }
  document.onclick = getXY;
 
}
 
 
function getXY(e) {
  x = (window.Event) ? e.pageX : event.clientX;
  y = (window.Event) ? e.pageY : event.clientY;
 
	document.getElementById(document.getElementById('position1').value === '' ? 'position1' : 'position2').value = x+":"+y;
 
}
 
function getID(oObject) 
{
    var id = oObject.id;
	document.position.gei.value = id;
 
}
 
 
function markIt(e)
{
var mark = document.createElement('div');
	mark.id = 'mark';
	mark.style.background = '#fff';
	mark.style.position = 'absolute';
	mark.style.left = '50'; 
	mark.style.top = '150';
	mark.style.width = '50';
	mark.style.height = '50';
	document.getElementById('wrapper').appendChild('mark');
}
</script>
[JAVASCRIPT] pobierz, plaintext 

A tresc dokumentu jest jak ponizej:

[HTML] pobierz, plaintext 
<div id="kontener">
<form name="position">
	<input name="position1" id="position1" type="text" /><input name="position2" id="position2" type="text" /><input name="gei" type="text" id="getElementId" />
	</form>
<div id="wrapper"><img src="ferrari_01.jpg" width="1000" height="650" ismap="ismap" id="ferrari" onclick="getID(this);markIt(this);"/></div>
<div id="wrapper"><img src="peugeot.jpg" width="100" height="100" id="peugeot" onclick="getID(this);"/></div>
</div>
[HTML] pobierz, plaintext 

Ten post edytował c4ash 16.02.2014, 15:02:06

[SmokAnalog]

1. Masz dwa elementy o id = wrapper
2. Nie

   [JAVASCRIPT] pobierz, plaintext 
   document.getElementById('wrapper').appendChild('mark');
   [JAVASCRIPT] pobierz, plaintext 

   , tylko

   [JAVASCRIPT] pobierz, plaintext 
   document.getElementById('wrapper').appendChild(mark);
   [JAVASCRIPT] pobierz, plaintext 

3. Style left, top, width i height powinny mieć na końcu podaną jednostkę, czyli nie '50', tylko '50px' itd.

[c4ash]

1. Poprawione, teraz oba obrazki sa w jednym div o id="wrapper".
2. Usunięte '' z appendChild.
3. Dodane jednostki do styli.

I div sie objawił. Dziekuje! Jestes wielki!