Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][JavaScript]Uciekający obrazek
Forum PHP.pl > Forum > Przedszkole
gornik
23.10.2011, 16:24:19
Witam... Odkopałem stary skrypt który bedzie mi potrzebny do szkoły a mianowicie:
[PHP] pobierz, plaintext 
  1. function xxx(){
  2. if (document.getElementById('v2').innerHTML == ''){
  3. document.getElementById('x').style.right = -15+40+'px';
  4. document.getElementById('x').style.top = -15-20+'px';}
  5. else if (document.getElementById('v2').innerHTML == '1')
  6. {document.getElementById('x').style.right = -15+300+'px';
  7. document.getElementById('x').style.top = -15-20+'px';}
  8. else if (document.getElementById('v2').innerHTML == '11'){
  9. document.getElementById('x').style.right = -15+510+'px';
  10. document.getElementById('x').style.top = -15-40+'px';}
  11. else if (document.getElementById('v2').innerHTML == '111'){
  12. document.getElementById('x').style.right = -15+200+'px';
  13. document.getElementById('x').style.top = -15-30+'px';}
  14. else{
  15. document.getElementById('obr').style.display = 'none';}
  16. document.getElementById('v2').innerHTML += 1;}
[PHP] pobierz, plaintext


Zaczynam robic dopiero JS na lekcjach a wiem ze do tego skryptu byl dopięty jakoś div wraz z odnosnikiem do obrazka
<a id="v"></a>
<a id="v2" style="display: none;" ></a>
<div id="blablabla" index: -1 costam costam.. i odnosnik do obrazka>
Tutaj wklejałem TEKST </div> (coś w tym stylu tylko nie wiem jak poprawnie napisac ten div z obrazkiem)

Wyglądało to w ten sposób ze na pustej stronie wyskakiwał obrazek a ponizej niego tekst , i po najechaniu na obrazek przesuwał się on po całej stronie.

Wie ktoś jak to wykonac??
croc
23.10.2011, 17:28:45
Ten skrypt wyrzuć do śmieci i napisz co dokładnie chcesz osiągnąć. Najlepiej narysuj i opisz.
gornik
23.10.2011, 19:44:38


To taka forma zabawy/gry.
Chodzi o to ze wyskakuje obrazek który ucieka po najechaniu myszką tak jak pokazane jest na obrazku zmienia on swoje położenie po najechaniu kursorem, a po trzecim najechaniu znika razem z tekstem.
croc
23.10.2011, 21:07:39
Najzabawniej będzie jeśli napis będzie uciekał w losową pozycję. Wystarczy jeden div ze stylem position: absolute. Ogólnie zamysł Twojego skryptu jest dobry, ale wykonanie trochę "naokoło".

Możesz zrobić zmienną, która będzie przechowywała liczbę trafień w napis. Przy onmouseover na div, niech ta zmienna się zwiększa o 1, a div niech dostaje nową pozycję. A jeśli zmienna osiągnie odpowiednią wartość, to div znika (display: none) i tyle.
gornik
23.10.2011, 21:15:40
Po długotrwałej pracy metody prób i błędów wkoncu udało mi się rozwiązac ten problem. Podaje gotowy skrypt moze komuś się przyda smile.gif
[PHP] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <META http-equiv="content-type" content="text/html; charset=iso-8859-2">
  3. <script LANGUAGE= "JavaScript" TYPE= "text/javascript">
  4.  
  5. function xxx(){
  6. if (document.getElementById('v2').innerHTML == ''){
  7. document.getElementById('x').style.right = -15+10+'px';
  8. document.getElementById('x').style.top = -15-20+'px';}
  9. else if (document.getElementById('v2').innerHTML == '1')
  10. {document.getElementById('x').style.right = -15+300+'px';
  11. document.getElementById('x').style.top = -15-20+'px';}
  12. else if (document.getElementById('v2').innerHTML == '11'){
  13. document.getElementById('x').style.right = -15+510+'px';
  14. document.getElementById('x').style.top = -15-10+'px';}
  15. else if (document.getElementById('v2').innerHTML == '111'){
  16. document.getElementById('x').style.right = -15+200+'px';
  17. document.getElementById('x').style.top = -15-30+'px';}
  18. else{
  19. document.getElementById('obr').style.display = 'none';}
  20. document.getElementById('v2').innerHTML += 1;}
  21. </SCRIPT>
  22.  
  23.  
  24.  
  25. <BODY onload="sprawdz()" style="font-family: Arial, Sans Serif; font-color: white;">
  26.  
  27. <a id="v"></a>
  28. <a id="v2" style="display: none;" ></a>
  29.  
  30. <div id="obr" style="border: 0px; z-index: 2; position: absolute; top: 200px; ">
  31. <script type="text/javascript">
  32. if (navigator.appName == 'Explorer' ){
  33. document.getElementById('obr').style.left = ((window.innerWidth/2)-20)+'px';}
  34. else{document.getElementById('obr').style.left = ((document.body.offsetWidth/2)-20)+'px';}
  35. </script>
  36.  
  37.  
  38.  
  39. <div id="x" onmouseover="xxx()" onclick="  document.getElementById('obr').style.display='none'; " style=" position: absolute; right: -18px; top: -12px; z-index: 2"><img src="images/obrazekKONKURSOWY.jpg"></div>
  40.  
  41. TWOJ TEKST WPISZ TUTAJ
  42.  
  43. </div>
[PHP] pobierz, plaintext
croc
23.10.2011, 21:17:47
Jeśli działa to super. Kod? Okropny.
gornik
23.10.2011, 22:28:06
Wiesz , tak jak mówiłem dopiero zaczynam uczyc się javascript , w zasadzie to miałem dopiero jedną lekcje wstępną , ten kod był robiony wg. poradników więc jest namieszany , ale jeżeli jest gotowy i działa to każdy może go sobie wklepac na serwer przetestowac działanie skryptu i zmodyfikowac kod tak aby był bardziej zwięzły i urozmaicony smile.gif
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.