Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Wielokrotne klikanie w diva i zmiana background-image
kapitan kloss
post
Post #1





Grupa: Zarejestrowani
Postów: 107
Pomógł: 0
Dołączył: 18.11.2004

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

Witajcie,
nie umiem poradzić sobie z wielokrotnym klikaniem na warstwie. Chcialbym aby zmieniala sie ona w petli, czyli raz backgroud byłby lampa_on a po kliknięciu lampa_off. To działa, ale tylko raz. A ja chcialbym aby po ponownym kliknieciu znowu lampa sie zapalala itd.
Kombinowalem z petlami ale nic nie dziala - lampa sie wylacza ale juz nie wlacza, nawet po rozbudowaniu if'ow. Moze ma ktos jakis pomysl do kodu jaki mam.

Kod
<script type="text/javascript" >
    function zmiana() {
        if (document.getElementById("nakladka_pusta").style.backgroundImage = "url('elements/lampa_on.png')")    {
            document.getElementById("nakladka_pusta").style.backgroundImage = "url('elements/lampa_off.png')";
        }
    }
</script>


Kod
<a href="#" onClick="zmiana()" style="cursor:pointer"><div id="nakladka_pusta" style="background-image:url(elements/lampa_on.png);"></div></a>


--------------------
Apache + php 5 + PostgreSQL (Mac OS X)
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 7)
Sephirus
post
Post #2





Grupa: Zarejestrowani
Postów: 1 527
Pomógł: 438
Dołączył: 28.06.2011
Skąd: Warszawa

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

Przy założeniu, że w początkowym stanie lampa "jest zapalona":

[JAVASCRIPT] pobierz, plaintext 
  1. function zmiana(obj) 
  2. {
  3.         obj = obj.getElementsByTagName('div')[0];
  4. 	if(obj.lightsOff) 
  5. 	{
  6. 		obj.style.backgroundImage = "url('elements/lampa_on.png')";
  7. 		obj.lightsOff= false;
  8. 	}
  9. 	else
  10. 	{
  11. 		obj.style.backgroundImage = "url('elements/lampa_off.png')";
  12. 		obj.lightsOff= true;
  13. 	}
  14. }
[JAVASCRIPT] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <a href="javascript;" onClick="zmiana(this)"><div style="background-image:url(elements/lampa_on.png);"></div></a>
[HTML] pobierz, plaintext


P.S. proponuje zamiast DIV'a dać SPAN - w obecnej sytuacji DIV wewnątrz A jest niezgodny z W3C wink.gif

Ten post edytował Sephirus 3.01.2012, 09:52:42


--------------------
If you're good at something, never do it for free.
Potrzebujesz skryptu JS lub PHP - szukasz kogoś kto przetestuje twoją aplikację pod względem bezpieczeństwa? Szybko i solidnie? Napisz ;)
Mój blog - Jak zwiększyć wydajność front-endu - O buforowaniu wyjścia w PHP słów kilka...
Go to the top of the page
+Quote Post
kapitan kloss
post
Post #3





Grupa: Zarejestrowani
Postów: 107
Pomógł: 0
Dołączył: 18.11.2004

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

Wielkie dzięki za szybką pomoc, ale cos jeszcze nie gra. Zmiana href tez nic nie daje na #
Lampa sie nie zmienia. Moze ja cos pokopalem, ale doesn't work

link do strony



--------------------
Apache + php 5 + PostgreSQL (Mac OS X)
Go to the top of the page
+Quote Post
Sephirus
post
Post #4





Grupa: Zarejestrowani
Postów: 1 527
Pomógł: 438
Dołączył: 28.06.2011
Skąd: Warszawa

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

Obaj namotaliśmy smile.gif

Ty - wrzuć dokładnie tą funkcję tak jak jest.

[JAVASCRIPT] pobierz, plaintext 
  1. function zmiana(obj) 
  2. {
  3.         obj = obj.getElementsByTagName('div')[0];
  4. 	if(obj.lightsOff) 
  5. 	{
  6. 		obj.style.backgroundImage = "url('elements/lampa_on.png')";
  7. 		obj.lightsOff= false;
  8. 	}
  9. 	else
  10. 	{
  11. 		obj.style.backgroundImage = "url('elements/lampa_off.png')";
  12. 		obj.lightsOff= true;
  13. 	}
  14. }
[JAVASCRIPT] pobierz, plaintext


A ja tutaj dałem "javascript;" zamiast "javascript:;"

[HTML] pobierz, plaintext 
  1. <a href="java script:;" onclick="zmiana(this)"><div style="background-image:url(elements/lampa_on.png);"></div></a>
[HTML] pobierz, plaintext


Sorki wink.gif


--------------------
If you're good at something, never do it for free.
Potrzebujesz skryptu JS lub PHP - szukasz kogoś kto przetestuje twoją aplikację pod względem bezpieczeństwa? Szybko i solidnie? Napisz ;)
Mój blog - Jak zwiększyć wydajność front-endu - O buforowaniu wyjścia w PHP słów kilka...
Go to the top of the page
+Quote Post
kapitan kloss
post
Post #5





Grupa: Zarejestrowani
Postów: 107
Pomógł: 0
Dołączył: 18.11.2004

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

Poza tym ze w linku powinno byc java script:; bez spacji to wszystko jest ok.
Bardzo dziekuje za pomoc.


--------------------
Apache + php 5 + PostgreSQL (Mac OS X)
Go to the top of the page
+Quote Post
Sephirus
post
Post #6





Grupa: Zarejestrowani
Postów: 1 527
Pomógł: 438
Dołączył: 28.06.2011
Skąd: Warszawa

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

Te spacje to skrypt forum dodaje tongue.gif


--------------------
If you're good at something, never do it for free.
Potrzebujesz skryptu JS lub PHP - szukasz kogoś kto przetestuje twoją aplikację pod względem bezpieczeństwa? Szybko i solidnie? Napisz ;)
Mój blog - Jak zwiększyć wydajność front-endu - O buforowaniu wyjścia w PHP słów kilka...
Go to the top of the page
+Quote Post
celbarowicz
post
Post #7





Grupa: Zarejestrowani
Postów: 253
Pomógł: 31
Dołączył: 30.03.2009
Skąd: Szczecin

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

Czy to niżej pasuje?
[HTML] pobierz, plaintext 
  1. <html>
  2.    <head>
  3.       <title>Przykład 1-2</title>
  4.         <script type="text/javascript" src="jquery-1.4.2.js"></script>
  5.        <script type="text/javascript">
  6. 	   var n=1;var i;var k=1;var i1; var l=100;	   var u;
  7.         function zmien(){ 
  8. 		                         n=n+1;
  9. 		                             if(n>2){n=1;}		                           
  10.                                       i1="bolko"+n+".jpg";	
  11. 									  u="url("+i1+")";
  12.                         var z={'background-image':u};
  13.  
  14. 									  $('#fotka').css(z);
  15.  
  16.  
  17.                             }    
  18.         </script>
  19.     </head>
  20.  <body> 
  21.  <div id="celbar" >barcel</div>  
  22.  <div id="fotka" style="position:absolute;top:10px;left:100px;width:800px;height:600px;background-image:url(bolko1.jpg)" onClick="zmien()">
  23.  
  24. 				  </div>
  25.  
  26.  </body>
  27.  </html>
  28.  
  29.  
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
kapitan kloss
post
Post #8





Grupa: Zarejestrowani
Postów: 107
Pomógł: 0
Dołączył: 18.11.2004

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

Co co napisal Sephirus - działa super dobrze. Dzięki

No dobra, a jak za pomocą tego skryptu napisanego przez Sephirusa, wyłączyć również inne warstwy - wlaściwie zmienić je po kliknięciu na lampę.
Czyli po kliknięciu na lampę, obok tego że zaświeca i gaśnie mi lampa, to zamiast diva o nazwie lewy pojawial mi sie div o nazwie lewy_1, który polozony jest zupelnie niezależnie od lampy.

No już sobie poradziłem, wystarczy:
Kod
document.getElementById('div').style.backgroundImage = "url('...')";


Ten post edytował kapitan kloss 7.01.2012, 09:33:37


--------------------
Apache + php 5 + PostgreSQL (Mac OS X)
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · 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: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

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

RSS Aktualny czas: 22.08.2025 - 03:52
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn