Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] zmiana obrazka po kliknieciu
Forum PHP.pl > Forum > Przedszkole
sanktus
11.06.2009, 22:38:47
Witam
Chcialem zrobic sobie menu, w ktorym po kliknieciu na dany przycisk zostal by on podswietllony. Jednakze chcialbym zrobic tak , ze po kliknieciu na drugi przycisk, przycisk poprzedni wracal do swojej pierwotnej podstaci(zniknelo podswietlenie). Moj problem polega na tym, ze nie wiem jak zapamietac ostatnio przycisniety przycisk. Oto kody
Umieszczanie obrazkow na stronei i wywolanie funkcji.
[PHP] pobierz, plaintext 
  1. <?php
  2. <tr>
  3. <td colspan="2" width="20%"  >
  4. <a href="java script: void twist('1')">
  5. <img src="up.gif" border="0" id="img_1"/>
  6. </a>
  7. </td>
  8. <td width="20%">
  9. <a href="java script: void twist('2')" >
  10. <img src="up.gif" border="0" id="img_2"/>
  11. </a>
  12. <td width="20%">
  13. <a href="java script: void twist('3')" >
  14. <img src="up.gif" border="0" id="img_3"/>
  15. </a>
  16. </td>
  17. </tr>
  18. ?>
[PHP] pobierz, plaintext

Funckaj twist
[PHP] pobierz, plaintext 
  1. <?php
  2. function twist( sid)
  3. {
  4. poprzedni = 0; //tutaj przydala by sie zmienna statyczna ale nie wiem jak sie ja inicjalizuje w javascripcie
  5.   imgobj = document.getElementById( "img_"+sid );
  6.  imgobj2 = document.getElementById( "img_"+poprzedni );
  7.   if ( imgobj.src.match( "up.gif" ) )
  8.   {
  9.         imgobj.src = "down.gif";
  10.  
  11.   }
  12.   else
  13.   {
  14.         imgobj.src = "up.gif";
  15.        
  16.   }
  17.  
  18.   if( imgobj2.src.match( "down.gif" ) )
  19.   {
  20.           imgobj2.src = "up.gif";
  21.   }
  22. poprzedni =sid;
  23. }
  24. </script>
  25. ?>
[PHP] pobierz, plaintext

Jak napisalem w komenatrzach w kodzie, wg mnei potrzebna mi jest tutaj zmienna statyfczna, ktorej wartosc po prostu nie zostanie skasowana po wywolaniu funkcji. Jednakze jako ze dopiero stawiam perwsze kroski w javia scripcie to nie mam pojecia jak to zrobicv. Licze na wasze wskazowki.
nexis
11.06.2009, 22:57:12
1) Zachęcam do używania jQuery, bo 15 KB (waga biblioteki) nie zaboli, a oszczędzisz sobie czasu
2) Skoro mowa o menu to używaj odpowiednich znaczników (<ul> i <li>)
3) Używaj styli CSS

[HTML] pobierz, plaintext 
  1. <html>
  2. 	<head>
  3. 		<style type="text/css">
  4. 			ul li {
  5. 				color: blue;
  6. 			}
  7. 			.active {
  8. 				color: red;
  9. 				font-weight: bold;
  10. 			}
  11. 		</style>
  12. 		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  13. 		<script type="text/javascript">
  14. 			$(function(){
  15. 				$("ul li").click(function(){
  16. 					$("ul li").removeClass('active');
  17. 					$(this).addClass('active');
  18. 				});
  19. 			});
  20. 		</script>
  21. 	</head>
  22. 	<body>
  23. 		<ul>
  24. 			<li>Jeden</li>
  25. 			<li>Dwa</li>
  26. 			<li>Trzy</li>
  27. 		</ul>
  28. 	</body>
  29. </html>
[HTML] pobierz, plaintext


BTW: Czy ktoś naprawi w końcu to marne formatowanie HTML'a? Skoro znacznik PHP potrafi obsłużyć wcięcia, to HTML chyba też może?!
sanktus
11.06.2009, 23:08:56
Ok, fajnie dzieki.
Jezeli jednak mialbym zrobic to w JavaScripcie to jak mozna byloby pamietac poprzednio klikniety obrazek questionmark.gif
nexis
11.06.2009, 23:11:00
Cytat(sanktus @ 12.06.2009, 00:08:56 ) *
Jezeli jednak mialbym zrobic to w JavaScripcie to jak mozna byloby pamietac poprzednio klikniety obrazek questionmark.gif

jQuery to nic innego jak JavaScript

A zmienną wystarczy zadeklarować przed funkcją, czyli:

Kod
// JavaScript
var zmienna = null;
function jakasFunkcja()
{

}
sanktus
11.06.2009, 23:17:58
Hmm no to zrobilem tak
[PHP] pobierz, plaintext 
  1. <?php
  2. <script language="Javascript">
  3. var poprzedni = null;
  4. function twist( sid)
  5. {
  6.  
  7.   imgobj = document.getElementById( "img_"+sid );
  8.  imgobj2 = document.getElementById( "img_"+poprzedni );
  9.   if ( imgobj.src.match( "up.gif" ) )
  10.   {
  11.     imgobj.src = "down.gif";
  12.  
  13.   }
  14.   else
  15.   {
  16.     imgobj.src = "up.gif";
  17.     
  18.   }
  19.   
  20.   if( imgobj2.src.match( "down.gif" ) )
  21.   {
  22.       imgobj2.src = "up.gif";
  23.   }
  24. poprzedni =sid;
  25. }
  26. </script>
  27. ?>
[PHP] pobierz, plaintext

Jednak dalej nie zmienia obrazka na poprzedni. Dalej zostaje caly czas "klikniety"
PS sorki, ze tak sie tutaj dopytuje, mimo iz jakby nie patrzyc problem zostal rozwiazany w inny sposob, ale po prostu jestem ciekawy smile.gif
nexis
12.06.2009, 00:05:13
Powinno być tak:

[HTML] pobierz, plaintext 
  1. <html>
  2. 	<head>
  3. 		<script type="text/javascript">
  4. 			var memory = null;
  5. 			function twist(sid)
  6. 			{
  7. 				var current  = document.getElementById("img_" + sid);
  8. 				current.src  = 'down.gif';
  9. 				var previous = document.getElementById("img_" + memory);
  10. 				if (previous) {
  11. 					previous.src = 'up.gif';
  12. 				}
  13. 				memory = sid;
  14. 			}
  15. 		</script>
  16. 	</head>
  17. 	<body>
  18. 		<table>
  19. 			<tr>
  20. 				<td colspan="2" width="20%">
  21. 					<a onclick="twist(1);">
  22. 						<img src="up.gif" border="0" id="img_1" />
  23. 					</a>
  24. 				</td>
  25. 				<td width="20%">
  26. 					<a onclick="twist(2);">
  27. 						<img src="up.gif" border="0" id="img_2" />
  28. 					</a>
  29. 				<td width="20%">
  30. 					<a onclick="twist(3);">
  31. 						<img src="up.gif" border="0" id="img_3" />
  32. 					</a>
  33. 				</td>
  34. 			</tr>
  35. 			</table>
  36. 	</body>
  37. </html>
[HTML] pobierz, plaintext


A do szukania błędów polecam wytczkę Firebug do Firefox.
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.