Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript][HTML]Zmiana kursora myszki po najechaniu na obrazek
kuba_pilach
post 1.07.2011, 13:56:10
Post #1





Grupa: Zarejestrowani
Postów: 224
Pomógł: 3
Dołączył: 24.12.2010

Ostrzeżenie: (0%)
-----

Witam!
Piszę mały kodzik na strone internetową. Chciałem zrobić interaktywną mapę. Ale mam problem, z zmienieniem kursora myszki... Oto mój kodzik:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Interaktywna mapa</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <script language="JavaScript">
  7.    function point_it(event){
  8.       pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
  9.       pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
  10.       document.getElementById("cross").style.left = (pos_x-9) ;
  11.       document.getElementById("cross").style.top = (pos_y-9) ;
  12.       document.getElementById("cross").style.visibility = "visible" ;
  13.       document.pointform.form_x.value = pos_x;
  14.       document.pointform.form_y.value = pos_y;
  15.    }
  16.  
  17.     function cursor_on(event) {
  18. 	  this.style.cursor='crosshair';
  19.    }
  20. </script>
  21.  
  22. </head>
  23.  
  24. <body>
  25.     <form name="pointform" method="post">
  26.        <div id="pointer_div" onmouseover="cursor_on(event)" onclick="point_it(event)" style = "background-image:url('images/mapa.jpg');width:1344px;height:1195px;">
  27.           <img src="kropa.gif" id="cross" style="position:relative;visibility:hidden;z-index:2;" width="20" height="20">
  28.        </div>
  29.        <br />
  30.  
  31.        <br />Pozycja x = <input type="text" name="form_x" size="4" /> i y = <input type="text" name="form_y" size="4" />
  32.     </form>
  33. </body>
  34. </html>
[HTML] pobierz, plaintext


Wszystko bez próbowania zmienić kursora, działało dobrze, ale teraz się wszystko psuje...
Może ktoś pomóc?
Go to the top of the page
+Quote Post
lobopol
post 1.07.2011, 14:51:57
Post #2





Grupa: Zarejestrowani
Postów: 1 729
Pomógł: 346
Dołączył: 4.04.2009

Ostrzeżenie: (0%)
-----

A po co do tego js używasz? Nie lepiej trzymać to wszystko w css?


--------------------
pehap.pl - moje portfolio
Go to the top of the page
+Quote Post
kuba_pilach
post 1.07.2011, 14:57:15
Post #3





Grupa: Zarejestrowani
Postów: 224
Pomógł: 3
Dołączył: 24.12.2010

Ostrzeżenie: (0%)
-----

A dało by radę, by kursor zmieniał się po opuszczeniu z obrazka i najeżdzając?
Go to the top of the page
+Quote Post
Mefiuu
post 1.07.2011, 15:03:35
Post #4





Grupa: Zarejestrowani
Postów: 371
Pomógł: 18
Dołączył: 23.11.2008

Ostrzeżenie: (0%)
----- 

[CSS] pobierz, plaintext 
  1. #element {
  2.        cursor: pointer;
  3. }
  4.  
  5. #element:hover {
  6.        cursor: help;
  7. }
[CSS] pobierz, plaintext


poczytaj o pseudoklasach css smile.gif

edit:
z tym że taki kod nie wiem czy będzie działał pod badzIEwiem bo chyba kiedyś czytałem że ono obsługuje pseudoklasę :hover tylko do elementu "a". Ale nie jestem pewny. Pozdro smile.gif

Ten post edytował Mefiuu 1.07.2011, 15:08:57
Go to the top of the page
+Quote Post
gorden
post 1.07.2011, 15:13:28
Post #5





Grupa: Zarejestrowani
Postów: 486
Pomógł: 101
Dołączył: 27.06.2010

Ostrzeżenie: (0%)
-----

przez samo css na wielu przeglądarkach nie zadziała hover, jeśli nie jest dla <a>
w jQuery najłatwiej:

[JAVASCRIPT] pobierz, plaintext 
  1. $('#pointer_div').hover(function() {
  2.  //kod po najechaniu
  3. }, function() {
  4.  //kod po zwolnieniu
  5. });
[JAVASCRIPT] pobierz, plaintext
Go to the top of the page
+Quote Post
Mefiuu
post 1.07.2011, 15:15:48
Post #6





Grupa: Zarejestrowani
Postów: 371
Pomógł: 18
Dołączył: 23.11.2008

Ostrzeżenie: (0%)
-----

rzeczywiście, kod gorden'a pewnie będzie lepszy wink.gif
Go to the top of the page
+Quote Post
kuba_pilach
post 1.07.2011, 15:17:57
Post #7





Grupa: Zarejestrowani
Postów: 224
Pomógł: 3
Dołączył: 24.12.2010

Ostrzeżenie: (0%)
-----

Ale mam problem z tego kodem wsadzeniem... Może wytłumaczysz?
Go to the top of the page
+Quote Post
gorden
post 1.07.2011, 15:20:26
Post #8





Grupa: Zarejestrowani
Postów: 486
Pomógł: 101
Dołączył: 27.06.2010

Ostrzeżenie: (0%)
-----

musisz zainstalować jQuery. daj w head:
[HTML] pobierz, plaintext 
  1. <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
kuba_pilach
post 1.07.2011, 15:31:50
Post #9





Grupa: Zarejestrowani
Postów: 224
Pomógł: 3
Dołączył: 24.12.2010

Ostrzeżenie: (0%)
-----

I co dalej? headsetsmiley.png
Go to the top of the page
+Quote Post
gorden
post 1.07.2011, 15:43:26
Post #10





Grupa: Zarejestrowani
Postów: 486
Pomógł: 101
Dołączył: 27.06.2010

Ostrzeżenie: (0%)
-----

i już. wklej kod, który podałem normalnie jako javascript. oczywiście komentarze zamień na zmiane kursora myszy. polecam Ci też zainteresowanie się jQuery.

[JAVASCRIPT] pobierz, plaintext 
  1. $('#pointer_div').hover(function() {
  2.  $(this).css('cursor', 'pointer');
  3. }, function() {
  4.  $(this).css('cursor', 'auto');
  5. });
[JAVASCRIPT] pobierz, plaintext
Go to the top of the page
+Quote Post
kuba_pilach
post 1.07.2011, 15:50:53
Post #11





Grupa: Zarejestrowani
Postów: 224
Pomógł: 3
Dołączył: 24.12.2010

Ostrzeżenie: (0%)
-----

No i dałem, i nie działa.
Go to the top of the page
+Quote Post
gorden
post 1.07.2011, 15:56:01
Post #12





Grupa: Zarejestrowani
Postów: 486
Pomógł: 101
Dołączył: 27.06.2010

Ostrzeżenie: (0%)
-----

hmmm... to może pokaż co już masz?
Go to the top of the page
+Quote Post
kuba_pilach
post 1.07.2011, 16:08:50
Post #13





Grupa: Zarejestrowani
Postów: 224
Pomógł: 3
Dołączył: 24.12.2010

Ostrzeżenie: (0%)
-----

A więc tyle mam:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Interaktywna mapa</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <script language="JavaScript">
  7.    function point_it(event){
  8.       pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
  9.       pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
  10.       document.getElementById("cross").style.left = (pos_x-9) ;
  11.       document.getElementById("cross").style.top = (pos_y-9) ;
  12.       document.getElementById("cross").style.visibility = "visible" ;
  13.       document.pointform.form_x.value = pos_x;
  14.       document.pointform.form_y.value = pos_y;
  15.  
  16.    }
  17.  
  18. </script>
  19.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js">
  20. 	    $('#pointer_div').hover(function() {
  21.     $(this).css('cursor', 'pointer');
  22.     }, function() {
  23.     $(this).css('cursor', 'crosshair');
  24.     });
  25. 	</script>
  26. <!--<style type="text/css">
  27.    #pointer_div {
  28.     cursor: pointer;
  29.     }
  30.  
  31.     #pointer_div:hover {
  32.     cursor: crosshair;
  33.     }
  34.   </style>!-->
  35. </head>    
  36.  
  37. <body>
  38.     <form name="pointform" method="post">
  39.        <div id="pointer_div" onclick="point_it(event)" style = "background-image:url('images/mapa.jpg');width:1344px;height:1195px;">
  40.           <img src="kropa.gif" id="cross" style="position:relative;visibility:hidden;z-index:2;" width="20" height="20">
  41.        </div>
  42.        <br />
  43.  
  44.        <br />Pozycja x = <input type="text" name="form_x" size="4" /> i y = <input type="text" name="form_y" size="4" />
  45.     </form>
  46. </body>
  47. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
gorden
post 1.07.2011, 16:24:14
Post #14





Grupa: Zarejestrowani
Postów: 486
Pomógł: 101
Dołączył: 27.06.2010

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
[HTML] pobierz, plaintext

to ma zostać nienaruszone. daj kod jQuery w oddzielnym <script>
Go to the top of the page
+Quote Post
kuba_pilach
post 1.07.2011, 16:35:23
Post #15





Grupa: Zarejestrowani
Postów: 224
Pomógł: 3
Dołączył: 24.12.2010

Ostrzeżenie: (0%)
-----

Nadal nie działa...
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Interaktywna mapa</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
  7. <script language="JavaScript">
  8.    function point_it(event){
  9.       pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
  10.       pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
  11.       document.getElementById("cross").style.left = (pos_x-9) ;
  12.       document.getElementById("cross").style.top = (pos_y-9) ;
  13.       document.getElementById("cross").style.visibility = "visible" ;
  14.       document.pointform.form_x.value = pos_x;
  15.       document.pointform.form_y.value = pos_y;
  16.  
  17.    }
  18.  
  19. </script>
  20.     <script type="text/javascript">
  21. 	    $('#pointer_div').hover(function() {
  22.     $(this).css('cursor', 'pointer');
  23.     }, function() {
  24.     $(this).css('cursor', 'crosshair');
  25.     });
  26. 	</script>
  27. <!--<style type="text/css">
  28.    #pointer_div {
  29.     cursor: pointer;
  30.     }
  31.  
  32.     #pointer_div:hover {
  33.     cursor: crosshair;
  34.     }
  35.   </style>!-->
  36. </head>    
  37.  
  38. <body>
  39.     <form name="pointform" method="post">
  40.        <div id="pointer_div" onclick="point_it(event)" style = "background-image:url('images/mapa.jpg');width:1344px;height:1195px;">
  41.           <img src="kropa.gif" id="cross" style="position:relative;visibility:hidden;z-index:2;" width="20" height="20">
  42.        </div>
  43.        <br />
  44.  
  45.        <br />Pozycja x = <input type="text" name="form_x" size="4" /> i y = <input type="text" name="form_y" size="4" />
  46.     </form>
  47. </body>
  48. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
lobopol
post 1.07.2011, 16:50:58
Post #16





Grupa: Zarejestrowani
Postów: 1 729
Pomógł: 346
Dołączył: 4.04.2009

Ostrzeżenie: (0%)
-----

Ale po co hover? Kursor przecież zmieni się bez niego. co do nie działania hover to bodaj tylko w i6 i starszym nie działa, ale tu jest zbędny.
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. #pointer_div {
  3. cursor: crosshair;
  4. }
  5. </style>!-->
[HTML] pobierz, plaintext


Ten post edytował lobopol 1.07.2011, 16:52:18


--------------------
pehap.pl - moje portfolio
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 29.04.2025 - 06:24
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn