Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Obrazek nad kursorem po najechaniu na poszczególne opcje pola select
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
soned
1.03.2011, 17:43:25
Jak w temacie potrzebuje zrobić wyświetlanie poglądowego obrazka nad kursorem po najechaniu na poszczególne opcje pola select. Ma ktoś jakiś pomysł?
wszerad
1.03.2011, 17:57:16
Elementowi <option> można nadawać zdarzenia, jeżeli wiesz o czym mówię to zrobisz sobie prostą funkcje. Jeżeli nie to szukaj w google js popup czy bubble.
soned
1.03.2011, 18:11:23
Dzięki za pomoc, ale jakoś średnio mi idzie te szukanie... początki js...
motodd
2.03.2011, 14:38:35
Selectowi dajesz jakieś id np id="select"
użyj jquery - biblioteke ściągasz z oficjalnej strony : www

Tworzysz nowy plik w js np skrypt.js i oczywiscie includujesz odpowiednio na strone.
w nim :
[JAVASCRIPT] pobierz, plaintext 
  1.  
  2. $(function() {
  3.  
  4.  
  5. $("#select option"). mouseover(function() {  // po najechaniu myszka na jakikolwiek option z selecta wywolywana jest funckja ponizej
  6.      $(".obrazek").show();
  7. // tutaj mozesz wczytac np w klase obrazek jakis tekst. Oczywiscie klasa obrazk musi miec odpowiednie style
  8. //position relative i display:none, ponizej tylko robisz jej style zeby pokazywala sie tak gdzie jest kursor myszki
  9.  
  10.  var pozycjaX = event.pageX;
  11.  var pozycjaY = event.pageY;
  12.  
  13. $(".obrazek").css('left' , pozycjaX);  // nadaje polozenie klasy obrazek lewe
  14. $(".obrazek").css('top' , pozycjaY); // i odleglosc od gory
  15.  
  16.   }).mouseout(function(){
  17.  
  18.  $(".obrazek").hide();
  19.  
  20.   });
  21.  
  22.  
  23. 		});
  24.  
[JAVASCRIPT] pobierz, plaintext 


[CSS] pobierz, plaintext 
  1. .obrazek {
  2. position:relative;
  3. display:none;
  4. z-index:100;
  5. }
  6.  
[CSS] pobierz, plaintext


i gdziekolwiek na stronie:
[HTML] pobierz, plaintext 
  1. <div class="obrazek"><img src...../> </div>
[HTML] pobierz, plaintext


Moglem sie gdzies pomylić, ale użyte funkcje znajdziesz na stornie jquery. Czytaj a zrobisz to sam bez problemu exclamation.gif
soned
2.03.2011, 22:47:46
Zrobiłem tak:
[HTML] pobierz, plaintext 
  1.  
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
  5. <script type="text/javascript" src="skrypt.js"></script>
  6. <style type="text/css">
  7. .obrazek {
  8. position:relative;
  9. display:none;
  10. z-index:100;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <form>
  16. <p align="center">
  17. <select id="select">
  18. <option>123456789 <div class="obrazek"><img src="duzy.jpg"> </div></option>
  19. <option>0987654321 <div class="obrazek"><img src="duzy.jpg"> </div></option>
  20. <div class="obrazek"><img src="duzy.jpg"> </div>
  21. </select>
  22. </p>
  23. </form>
  24. </body>
  25. </html>
[HTML] pobierz, plaintext


Utworzyłem plik skrypt.js, w którym na początku skopiowałem bibliotekę, a następnie dodałem tą funkcję. Efektu brak.

W konsoli błędów jest jakiś błąd w pierwszej linijce skryptu.

motodd
4.03.2011, 01:44:19
utworz nowy plik .js a nie wklejaj pod tamtym bo biblioteka niech sobie spokojnie leźy


to daj w tym pliku np pliczek.js
<script type="text/javascript" src="pliczek.js"></script> inculuduj oczywiscie - sprawdzaj sciezki też,

[JAVASCRIPT] pobierz, plaintext 
  1. $(function() {
  2.  
  3.  
  4. var pozycjaX, pozycjaY;
  5.  
  6.  
  7.  
  8. $("#select option").mouseover(function(e) { 
  9. 		$(".obrazek").css('display', 'block' );
  10.    	pozycjaX = e.pageX + 50;
  11. 		pozycjaY = e.pageY;
  12. 		$(".obrazek").css('left' , pozycjaX); 
  13. 		$(".obrazek").css('top' , pozycjaY); 
  14. 	}).mouseout(function(){
  15. 		$(".obrazek").css('display', 'none' );
  16.  
  17. 		$("#pozycja").html(pozycjaX +' ,' +pozycjaY);
  18. });
  19.  
  20.  
  21. });
[JAVASCRIPT] pobierz, plaintext


w pliku php: lub html 
[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.  
  5. <title>nazwa</title>
  6. ...... includujesz tutj swoje css i js
  7. </head>
  8. <body>
  9.  
  10. <select id="select" style>
  11. <option value="1">opcja 1</option>
  12. <option value="1">opcja 2</option>
  13. <option value="1">opcja 3</option>
  14. <option value="1">opcja 4</option>
  15. </select>
  16.  
  17. <div class="obrazek"><img src="./img/galeria1/1.png" alt="fotka" /></div>
  18.  
  19. <div id="pozycja">tutaj sie wyswietli pozycja kursora</div>
  20.  
  21.  
  22. </body>
  23. </html>
[PHP] pobierz, plaintext


w stylach : 
[CSS] pobierz, plaintext 
  1. .obrazek {
  2. position:  absolute;
  3. display:none;
  4. z-index: 100000;
  5. }
  6. #select {
  7. position: absolute;
  8. left: 50px;
  9. top: 50px;
  10. z-index: 10;	
  11. 	}
[CSS] pobierz, plaintext


u mnnie dziala : http://motodd.cal.pl/galeria/okienka.php jak cos to patrz w źródło. Więcej czytaj sam i sam się ucz. NA tacy raczej nikt ci nie poda gotowego rozwiązania. Ode mnie masz prezent. Oczywiscie to co ty chcesz tak naprawde zrobic jest wg mnie bardziej rozbudowane poczytaj o jquery exclamation.gif! jquery.com , ale to z czasem nauki Ci to wyjdzie mam nadzieje.
soned
4.03.2011, 12:37:38
Dziękuje bardzo, chcę zrobić dokładnie to samo z tym, że dla każdej opcji ma być przyporządkowany inny obrazek ... pomożesz?
motodd
4.03.2011, 13:23:14
Cytat(soned @ 4.03.2011, 12:37:38 ) *
Dziękuje bardzo, chcę zrobić dokładnie to samo z tym, że dla każdej opcji ma być przyporządkowany inny obrazek ... pomożesz?


Pomyśle nad tym. Zobacze czy mi się uda.

to wrzuc tam do tego pliczku htmlowego lub php,, w body zmienilem kilka drobnych rzeczy w optionie dodalem atrybut sciezka
w class obrazek w img dodalem id="obr" bo pozniej w js to bedzie potrzebne
[HTML] pobierz, plaintext 
  1. <body>
  2.  
  3. <select id="select" style>
  4. <option value="1" sciezka="./img/galeria1/1.png">opcja 1</option>
  5. <option value="1" sciezka="./img/galeria1/2.png">opcja 2</option>
  6. <option value="1" sciezka="./img/galeria1/3.png">opcja 3</option>
  7. <option value="1" sciezka="./img/galeria1/4.png">opcja 4</option>
  8. </select>
  9.  
  10. <div class="obrazek"><img id="obr" src="" alt="..." /></div>
  11.  
  12. <div id="pozycja">tutaj sie wyswietli pozycja kursora</div>
  13.  
  14.  
  15. </body>
[HTML] pobierz, plaintext


w js zmien
[JAVASCRIPT] pobierz, plaintext 
  1.  
  2. var pozycjaX, pozycjaY;
  3. var src;
  4.  
  5. $("#select option").mouseover(function(e) { 
  6. 		$(".obrazek").css('display', 'block' );
  7.    	pozycjaX = e.pageX + 50;
  8. 		pozycjaY = e.pageY;
  9. 		src = $(this).attr('sciezka');
  10. 		$(".obrazek").css('left' , pozycjaX); 
  11. 		$(".obrazek").css('top' , pozycjaY); 
  12. 		$("#obr").attr("src", src);
  13. 		$("#pozycja").html(pozycjaX +' ,' +pozycjaY+' ,'+src);
  14.  
  15. 	}).mouseout(function(){
  16.  
  17. 		$(".obrazek").css('display', 'none' );
  18. 		$("#pozycja").html(pozycjaX +' ,' +pozycjaY+ ' , '+src);
  19. });
[JAVASCRIPT] pobierz, plaintext


w css nic do zmiany

efekt : http://motodd.cal.pl/galeria/okienka.php
soned
17.03.2011, 14:53:39
Po raz kolejny dziękuje za pomoc. Pozostaje jeszcze jedna kwestia do wyjaśnienia - czy jest jakiś sposób aby skrypt działał pod IE?
krowal
18.03.2011, 15:01:05
U mnie nawet na chrome nie działa, zdarzenia na <option> to chyba słaby pomysł wink.gif polecam inne rozwiązanie, przerobienie selecta na sexy-combo http://code.google.com/p/sexy-combo/ i ustawienia zdarzeń na elementy listy.
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.