[js] plaatje pas laden als div zichtbaar is

[wboard]

Ik heb op een bepaalde site een groot aantal producten staan, die worden opgesplitst in categorieën aan de gebruiker voorgeschoteld. De gebruiker kan dan een div openklappen per categorie dus zoiets:

code:

hoofdcat1 [hier op klikken opent subcat 1]
  subcat1 [hier op klikken laat de producten zien, in dit geval: prod1 en prod2]
    prod1
    prod2
  subcat2 [hier op klikken laat de producten zien, in dit geval: prod3]
    prod3

Wanneer de producten weergegeven worden is er een plaatje te zien van het product.
Op dit moment laad hij ALLE (en dat zijn er veel) plaatjes zodra de pagina met de categorieën wordt geopend. Dit veroorzaakt een geirriteerde gebruiker en veel dataverkeer.

Ik wil het zo hebben dat wanneer een gebruiker op de subcategorie klikt dat DAN PAS de plaatjes geladen worden. Met een image preloader los je dit niet op, want dan laad hij nog alle plaatjes en iemand die op die site komt zal nooit alle producten gaan bekijken, dus dan heb je 'niet bekeken' plaatje geladen, volkomen nutteloos dus!

Ik heb werkelijk geen id hoe ik dat moet aanpakken, ik heb gezocht, maar kom steeds uit op een preloader.
Ik hoop dat iemand een oplossing heeft

[Verwijderd]

Iets van:

HTML:

<a href="#" onclick="return showImage('a.gif')">product a</a>
<img id='theimg'>

JavaScript:

function showImage(url) {
  theimg.src = url;
  return false;
}

[André]

code:

<a href="#" onclick="showImage('plaatje001', 'a.gif')">product a</a>
<img id="plaatje001" style="display:none;">

function showImage(plaatje, url)
{
  with (document.getElementById(plaatje))
  {  
    src = url;
    style.display = "block";
  }
}

Iets uitgebreider

[ Voor 20% gewijzigd door André op 23-12-2004 17:26 ]

[wboard]

en als je een hoop plaatjes moet laden, want onder zo'n categorie staan meerdere producten, moet je het in een array proppen ofzo?