Javascript:sprememba/naložitev nove slike v DIV

Daj si za zacetek vzami jQuery pa pusti te garazne skripte na miru.

Metode, ki so ti relevantne so:

http://docs.jquery.com/Ajax/load#urldat... - tole je isti load.

Ce pa hoces samo zamenjat vsebino diva pa lahko vedno naredis nekaj v stilu:

$('#mylink').click(function() {
  // Act on the event
  
  // ena moznost je, da samo kaksni sliki spremenis src
  $('#myimg').attr('img', 'http://bla.com/slika.jpg')
  
  // ali pa kar celo vsebino diva s tem, da ji das sliko notr
  $('#mydiv').html('<img src="http://bla.com/slika.jpg" alt="" />')
});

Uglavnem, preberi si kaksen jQuery tutorial. Stvar ni tezka pa veliko lazje bos programiral kot direktno z javascriptom.

Daj pokazi svojo kodo

Če grem klikat po Xmas cards in ostalem - datoteke ne obstajajo in dobivam 404 nazaj, če pa kliknem na number 37 to 75 pa vrneš nek html (index?), ki ga potem prikažeš.

Dve stvari: Začni uporabljat Firebug in bo debugganje kode kar naenkrat postalo trivialno v primerjavi z zdaj.

Potem pa kot je rekel gand začni uporabljat jQuery ali kakšen podoben library ter raje tako minimalne stvari naredi sam na roke kot pa da copy pastaš skripte, za katere ne veš kaj delajo in kako, njihovo debuganje je pa pain in the ass. To kar ti je gand spisu je more or less že vse kar rabiš za menjavo slike/htmlja.

Prijazen nasvet - tretjič: uporabi kakšno JavaScript knjižnico: jQuery.com ali Prototype, sploh ker si rekel da si bolj slab za programiranje. S tem si boš zelo olajšal delo, verjemi.
Alternative po katerih vprašuješ ti je že podal Gandalfar (podal je kako se to naredi z jQuery).
S sodobnimi knjižnicami lahko sproti spreminjaš DOM, ne le s klicanjem zunanjih html (s tvojim ajaxpage() si omejen samo na to), na voljo imaš ogromno drugih možnosti, najzanimivejše za tvoj problem so ti že svetovali.
Če pa bi rad naredil s tem kar uporabljaš pa primer: ajaxpage(url_do_slikaxx.html, id_div), v html (url_do_slikaxx.html) pa img stavek. Torej html stran za vsako sliko. To je pa dosti nepotrebnega dela.
Torej čimprej preidi na sodobno knjižnico pa boš imel dosti manj problemov, tudi s kompatibilnostjo browserjev, ker ti knjižnica v ozadju poskrbi tudi za to.

Močno priporočam da nehaš samo copy/pastaš kodo in si tudi pogledaš kaj v dokumentaciji.

Torej, load.

For elements, it fires when the target element and all of its content has finished loading. Note: load will work only if you set it before the element has completely loaded, if you set it after that nothing will happen.

$(function (){
    $('a').click(function(event) {
        $('#display_window_work').append($("img").attr("src", "media/work2008/Xmas2.jpg"));
        event.preventDefault();
    });
});

Ah, točn, ti že pri drugem kliku na novo naložiš html - namest Live Query plugina uporabi (kot ti na tvojem linku piše malo bol spodaj) Events/live metodo, ki je bila implementirana v jQuery 1.3.

Mam pa eno vprašanje - glede na to da je tu precej statičen html, zakaj sploh uporabljaš javascript za ta meni? Brez JS bi to že zdavnaj rešil problem pa še accessible bi bil za tiste, ki imajo JS izklopljen...

Zakaj pa se stran ne sme osvežit? Itak se CSS pocacha, html se pa po vsaki napol spodobni povezavi pretoči takoj.

Načeloma verjetno ne rabiš spisat jquery funckij za vsak html, vendar moraš narest nek algoritem po katerem bo potem tista ena funkcija delala (ne vem, v stilu:

Če maš take linke: <a class="menuitem" href='abc.html'>abc</a>

$(function(){
  $("a.menuitem").live('click', function(e){
    $('wrapper').load($(this).attr('href'));
    e.preventDefault();
  })
});

S tem da tu ta load ni isti kot tisti prej, kjer si podajal kot argument funkcijo, tu pa podajaš string, ki je url - poglej si Ajax/load. Stvar je še celo tako pametna, da ji lahko podaš selector, ki določi katere elemente iz naloženega dokumenta hočeš prikazat (verjetno lahko torej vržeš v en HTML dokument vso svojo kodo in primerno spesniš selector, ki bo z pametno spisanim algoritmom vedno delu).