Zmiana icony podczas ukrywania DIV Opcje

[suba]

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 
 <div class="ithem_info_all">
       <div class="item_info">Technical Data:
           <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>
              </div>
            </div>
            <div id="tabela" style="display: block;">
              <div class="item_tables"><img src="../../../../img/blue/P71722-tab.jpg" width="250" height="107" /></div>
              <div class="item_pikto"><img src="../../../../img/blue/71722-picto.jpg" width="250" height="147" /></div>
            </div>
          </div>
[HTML] pobierz, plaintext 

Z poważaniem
suba

[thek]

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

Ten post edytował thek 29.08.2009, 14:10:42

[erix]

Ostatnie nie zadziała, gdyż to będzie tablica. Za dużo klepiesz w jQuery.

[suba]

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 
  <div class="ithem_info_all">
              <div class="item_info">Technical Data:
              <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>
              <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>
              </div>
            </div>
            <div id="tabela" style="display: block;">
              <div class="item_tables"><img src="../../../../img/blue/P71722-tab.jpg" width="250" height="107" /></div>
              <div class="item_pikto"><img src="../../../../img/blue/71722-picto.jpg" width="250" height="147" /></div>
            </div>
          </div>
[HTML] pobierz, plaintext 

[erix]

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.