Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: wyciagniecie nazwy obrazka i pozycji kursora nanim
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
cornholio666
15.01.2006, 16:13:52
Witam

Mam na stronie powiedzmy 10 obrazkow. Chcialbym zeby przy kliknieciu mysza na ktorys z nich w jednym oknie formularza pojawila sie nazwa kliknietego obrazka (z rozszerzeniem) a w drugim oknie formularza pozycja myszy na tym obrazku w postaci x,y.

Punkt 0,0 znajduje sie w gornym lewym rogu.

Ma ktos jakis pomysl ?
FiDO
15.01.2006, 17:46:14
Kazdemu definiujesz eventa onclick:
[HTML] pobierz, plaintext 
  1. <img src="..." onclick="pokaz(event, this);" ... />
[HTML] pobierz, plaintext


I teraz w tej funkcji pokaz() przez pierwszy parametr masz dostep do event'a, z ktorego mozesz pobrac wspolrzedne polozenia myszki w momencie klikniecia (szczegoly np. na www.quirksmode.org w dziale Javascript -> Events oraz W3C DOM -> Compatibility tables -> Events). Majac te wspolrzedne odejmujesz wspolrzedne obrazka i otrzymujesz w ten sposob wspolrzedne wzgledem lewego gornego rogu obrazka.
Nazwe obrazka pobierasz z drugiego parametru poprzez wlasciwosc .src.
To tyle na temat mojego pomyslu.. powodzenia smile.gif
cadavre
15.01.2006, 18:19:25
Nie mam pewności, ale było coś takiego:
[HTML] pobierz, plaintext 
  1. <input type="image" src="adres.jpg" name="obrazek1" />
[HTML] pobierz, plaintext
i powiedzmy tam 20. takich w jedym <form action="skrypt.php">.
A w skrypcie skrypt.php:
[PHP] pobierz, plaintext 
  1. <?php echo "X:{$_GET['obrazek1.x']} Y:{$_GET['obrazek1.y']}
  2. ?>
[PHP] pobierz, plaintext
cornholio666
18.01.2006, 17:31:40
znlazłem skrypt, przerobilem go troche ale nie wiem jak zrobic zeby, wpisywana przez skrypt pozycja odnosiła sie do obrazka a nie do przegladarki.

oto kod:

[HTML] pobierz, plaintext 
  1. <form name="Show">
  2. x,y           <input type="text" name="MouseX" value="0" size="14"><br>
  3. nazwa obrazka <input type="text" name="obraz">
  4. </form>
  5. <img src="jakisobrazek.jpg" onclick="getMouseXY('','cos.jpg');">
  6.  
  7. <script language="JavaScript1.2">
  8. <!-- Original:  CodeLifter.com (support@codelifter.com) -->
  9. <!-- Web Site:  http://www.codelifter.com -->
  10.  
  11. <!-- This script and many more are available free online at -->
  12. <!-- The JavaScript Source!! http://javascript.internet.com -->
  13.  
  14. <!-- Begin
  15. var IE = document.all?true:false;
  16. if (!IE) document.captureEvents(Event.MOUSEMOVE)
  17. //document.onmousemove = getMouseXY;
  18. var tempX = 0;
  19. var tempY = 0;
  20.  
  21. function getMouseXY(e, obraz)
  22. {
  23.   if (IE)
  24.   { // grab the x-y pos.s if browser is IE
  25.       tempX = event.clientX + document.body.scrollLeft;
  26.       tempY = event.clientY + document.body.scrollTop;
  27.   }
  28.   else
  29.   {  // grab the x-y pos.s if browser is NS
  30.      tempX = e.pageX;
  31.      tempY = e.pageY;
  32.   }  
  33.   if (tempX < 0){tempX = 0;}
  34.  
  35.   if (tempY < 0){tempY = 0;}  
  36.  
  37.   document.Show.MouseX.value = tempX+','+tempY;
  38.   document.Show.obraz.value = obraz;
  39.   return true;
  40. }
  41.  
  42.  
  43. //  End -->
  44. </script>
[HTML] pobierz, plaintext


Niezabardzo rozumiem:

Cytat
Majac te wspolrzedne odejmujesz wspolrzedne obrazka i otrzymujesz w ten sposob wspolrzedne wzgledem lewego gornego rogu obrazka.


1. wspolrzedne mam wzgledem przegladarki
2. Skad mam wziać wspolrzedne obrazka
FiDO
18.01.2006, 18:11:18
Ad2) na przyklad z tad: http://www.quirksmode.org/index.html?/js/findpos.html
orson
18.01.2006, 23:11:34
witam ...

najprościej jednak (bez żadnego skryptu - każda przeglądarka) będzie to zrobić na inpucie ...
Kod
<input type="image" src="adres.jpg" name="obrazek1" />

Tylko potem nie $_GET['obrazek1.x'] tylko $_GET['obrazek1_x'] ( _ exclamation.gif) to będzie współrzędna x kliknięcia na obrazku ...

pozdrawiam
cornholio666
29.01.2006, 14:53:32
Dzieki za podpowiedzi rozwiazanie ponizej dla zainteresowanych:

[HTML] pobierz, plaintext 
  1. <BODY>
  2. <form name="Show">
  3. x,y           <input type="text" name="MouseX" value="0" size="14"><br>
  4. nazwa obrazka <input type="text" name="obraz">
  5. </form>
  6.  
  7. <img src="jakis.jpg" onclick="getMouseXY('','jakis.jpg',this)">
  8. <script language="JavaScript1.2">
  9.  
  10.  
  11. <!-- Begin
  12. var IE = document.all?true:false;
  13. if (!IE) document.captureEvents(Event.MOUSEMOVE)
  14. //document.onmousemove = getMouseXY;
  15. var tempX = 0;
  16. var tempY = 0;
  17.  
  18. function getMouseXY(e, obraz, obj)
  19. {
  20.   var curleft = 0;
  21.   var curtop = 0;
  22.  
  23.   if (IE)
  24.   { // grab the x-y pos.s if browser is IE
  25.       tempX = event.clientX + document.body.scrollLeft;
  26.       tempY = event.clientY + document.body.scrollTop;
  27.   }
  28.   else
  29.   {  // grab the x-y pos.s if browser is NS
  30.      tempX = e.pageX;
  31.      tempY = e.pageY;
  32.   }  
  33.   if (tempX < 0)
  34.   {
  35.       tempX = 0;
  36.   }
  37.  
  38.   if (tempY < 0)
  39.   {
  40.       tempY = 0;
  41.   }  
  42.  
  43.   if (obj.offsetParent)
  44.   {
  45.       while (obj.offsetParent)
  46.       {
  47.           curleft += obj.offsetLeft
  48.           curtop += obj.offsetTop
  49.           obj = obj.offsetParent;
  50.       } 
  51.   }
  52.   else if (obj.x)
  53.       curleft += obj.x;
  54.  
  55.   else if (obj.y)
  56.       curtop += obj.y;
  57.  
  58.  document.Show.MouseX.value = (tempX - curleft) +','+ (tempY - curtop);
  59.  document.Show.obraz.value = obraz;
  60.  
  61.  return true;
  62. }
  63.  
  64.  
  65. //  End -->
  66. </script>
  67. </body>
[HTML] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.