Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wielokrotne klikanie w diva i zmiana background-image
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
kapitan kloss
3.01.2012, 09:08:45
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>
Sephirus
3.01.2012, 09:51:39
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
kapitan kloss
3.01.2012, 10:24:38
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

Sephirus
3.01.2012, 10:52:54
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
kapitan kloss
3.01.2012, 11:16:42
Poza tym ze w linku powinno byc java script:; bez spacji to wszystko jest ok.
Bardzo dziekuje za pomoc.
Sephirus
3.01.2012, 11:30:12
Te spacje to skrypt forum dodaje tongue.gif
celbarowicz
3.01.2012, 14:03:21
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
kapitan kloss
6.01.2012, 17:29:32
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('...')";
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.