Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript] zmiana obrazka po kliknieciu
sanktus
post 11.06.2009, 22:38:47
Post #1





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 11.06.2009

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


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.
  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. ?>

Funckaj twist
  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. ?>

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.
Go to the top of the page
+Quote Post
nexis
post 11.06.2009, 22:57:12
Post #2





Grupa: Zarejestrowani
Postów: 1 012
Pomógł: 109
Dołączył: 26.09.2003
Skąd: nexis.pl

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


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

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


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?!

Ten post edytował nexis 11.06.2009, 22:58:45


--------------------
Zend Certified Engineer

Kliknij POMÓGŁ jeśli moja odpowiedź okazała się użyteczna!
Go to the top of the page
+Quote Post
sanktus
post 11.06.2009, 23:08:56
Post #3





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 11.06.2009

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


Ok, fajnie dzieki.
Jezeli jednak mialbym zrobic to w JavaScripcie to jak mozna byloby pamietac poprzednio klikniety obrazek questionmark.gif
Go to the top of the page
+Quote Post
nexis
post 11.06.2009, 23:11:00
Post #4





Grupa: Zarejestrowani
Postów: 1 012
Pomógł: 109
Dołączył: 26.09.2003
Skąd: nexis.pl

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


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()
{

}


Ten post edytował nexis 11.06.2009, 23:11:33


--------------------
Zend Certified Engineer

Kliknij POMÓGŁ jeśli moja odpowiedź okazała się użyteczna!
Go to the top of the page
+Quote Post
sanktus
post 11.06.2009, 23:17:58
Post #5





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 11.06.2009

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


Hmm no to zrobilem tak
  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. ?>

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
Go to the top of the page
+Quote Post
nexis
post 12.06.2009, 00:05:13
Post #6





Grupa: Zarejestrowani
Postów: 1 012
Pomógł: 109
Dołączył: 26.09.2003
Skąd: nexis.pl

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


Powinno być tak:

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


A do szukania błędów polecam wytczkę Firebug do Firefox.

Ten post edytował nexis 12.06.2009, 00:06:10


--------------------
Zend Certified Engineer

Kliknij POMÓGŁ jeśli moja odpowiedź okazała się użyteczna!
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 29.05.2025 - 06:32