Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zmiana icony podczas ukrywania DIV
Forum PHP.pl > Forum > Po stronie przeglądarki
suba
29.08.2009, 12:59:10
Witam,

Na stronie mam poniższy skrypt js oraz kawałek html..
Chciałem się zapytać, czy ktoś z was mógłby mi podpowiedzieć jak mam zmodyfikować skrypt żeby podczas ukruwanie i pokazywania diva 'tabela' zmieniała mi sie ikona (zdjęcie) w div 'item_icon_plus'
W moim przypadku chodzi o zmianę ikony z plusem na minus i odwrotnie?

Kod
<script language="JavaScript1.4" type="text/javascript">
function openClose(id)
{
    if(document.getElementById) {
          element = document.getElementById(id);;

   } else if(document.all) {
      element = document.all[id];

   } else return;

   if(element.style) {
      if(element.style.display == 'block' )
              {
                element.style.display = 'none';
      }
          else     
            {
                element.style.display = 'block';
      }
   }
}
</script>


[HTML] pobierz, plaintext 
  1.  <div class="ithem_info_all">
  2.        <div class="item_info">Technical Data:
  3.            <div class="item_icon_plus"><a href="java script:void(0); openClose('tabela');"><img src="../../../../img/add_48.png" width="15" height="15" /></a></div>
  4.               </div>
  5.             </div>
  6.             <div id="tabela" style="display: block;">
  7.               <div class="item_tables"><img src="../../../../img/blue/P71722-tab.jpg" width="250" height="107" /></div>
  8.               <div class="item_pikto"><img src="../../../../img/blue/71722-picto.jpg" width="250" height="147" /></div>
  9.             </div>
  10.           </div>
[HTML] pobierz, plaintext


Z poważaniem
suba
thek
29.08.2009, 14:08:43
Jesli nadasz mu Id to:
Kod
document.getElementById('id_obrazka').src = 'ścieżka_do_obrazka'

Ewentualnie jeśli obrazek na stronie jest stały jeśli chodzi o miejsce w tabeli obrazków (jest to jednak rzadkie):
Kod
document.getElementsByTagName("img")[kolejność_obrazka_na_stronie].src = "ścieżka_do_obrazka";

A jeśli nie masz w obrazku Id, to zapewne jest wewnątrz div z jakimś ID stałym i tam raczej kolejność obrazka jest niezmienna, więc:
Kod
document.getElementById('id_elementu').getElementsByTagName("img").src = "ścieżka_do_obrazka";

Powinna zadziałać chociaż jedna z nich winksmiley.jpg
erix
29.08.2009, 14:46:46
Ostatnie nie zadziała, gdyż to będzie tablica. Za dużo klepiesz w jQuery. tongue.gif
suba
31.08.2009, 09:09:57
Witam,

Wymyśliłem inny sposób.
Działa.. Ikona się zmienia.. Jednak miałbym pytanie jak można byłoby ten skrypt zastosować na jednej stronie 4 razy..
Teraz dzieje się tak że naciskając na jedną zmieniają się wszystkie równocześnie.. jaki miałby być warunek sprawdzający??

Z góry dziękuję
Pozdrawiam

Kod
function openClose(id)
{
    if(document.getElementById) {
          element = document.getElementById(id);;
        plus = document.getElementById('item_icon_plus');;
        minus = document.getElementById('item_icon_minus');;

    } else if(document.all) {
      element = document.all[id];
        } else return;

   if(element.style) {
      if(element.style.display == 'block' )
              {
                element.style.display = 'none';
                plus.style.display = 'block';
                minus.style.display = 'none';
      }
          else     
            {
                element.style.display = 'block';
                plus.style.display = 'none';
                minus.style.display = 'block';
      }
   }
}

[HTML] pobierz, plaintext 
  1.   <div class="ithem_info_all">
  2.               <div class="item_info">Technical Data:
  3.               <div id="item_icon_minus" style="display: block;"><a href="java script:void(0); openClose('tabela');"><img src= "../../../../img/add_482.png" width="15" height="15"/></a></div>
  4.               <div id="item_icon_plus" style="display: none;"><a href="java script:void(0); openClose('tabela');"><img src= "../../../../img/add_48.png" width="15" height="15"/></a></div>
  5.               </div>
  6.             </div>
  7.             <div id="tabela" style="display: block;">
  8.               <div class="item_tables"><img src="../../../../img/blue/P71722-tab.jpg" width="250" height="107" /></div>
  9.               <div class="item_pikto"><img src="../../../../img/blue/71722-picto.jpg" width="250" height="147" /></div>
  10.             </div>
  11.           </div>
[HTML] pobierz, plaintext


erix
31.08.2009, 11:27:08
Albo dostrajasz identyfikatory, albo jedziesz po klasach.

Najlepiej by było tu posłużyć się jQuery, gdyż getElementsByClassName nie działa pod starszym IE.
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.