udskiftning af billeder

Det'r zq da meget simpelt, du skal bare ... hrm ...

De 16 16.-dele er 16 faste stumper, som vises fra start, og hvis man klikker på en af dem, vil de øvrige 15 dele efterhånden forsvinde, så hovedbilledet nr. x vises ?-)

Umiddelbart ville jeg tænke i, at du havde et stort billede bagved, som ved klik ændrede sig til det, som skulle vises, og så ville en ad gangen af de andre i forgrunden blive usynlige ...

Virker det som måden ?o]

Ja det virker som måden, men jeg behøver også nok lidt hjælp til selve koden. Er det noget Style Sheets, når billedet (det store svarende til den 1/16 del man klikker på) skal placere sig bagved  - altså i lag?  -  Hvordan?
Er det bare en JavaScript funktion der hvergang "siger": ok du har trykket på denne 1/16 del, så nu placeres først det tilsvarende store billede (hvilket onClick eventen fortæller funktionen) og derefter forsvinder de resterende 15 stumper i forskellig rækkefølge?  -  Hvordan?

Html-koden kunne være:

<div id="img-container">
  <img name="stortbillede" id="stortbillede" src="default.gif">
  <img name="lillebillede1" id="lillebillede1" src="bill1.gif" class="lilbill">
  <img name="lillebillede2" id="lillebillede1" src="bill2.gif" class="lilbill">
  <img name="lillebillede3" id="lillebillede1" src="bill3.gif" class="lilbill">
  <img name="lillebillede4" id="lillebillede1" src="bill4.gif" class="lilbill">
  <img name="lillebillede5" id="lillebillede1" src="bill5.gif" class="lilbill">
  <img name="lillebillede6" id="lillebillede1" src="bill6.gif" class="lilbill">
  <img name="lillebillede7" id="lillebillede1" src="bill7.gif" class="lilbill">
  <img name="lillebillede8" id="lillebillede1" src="bill8.gif" class="lilbill">
  <img name="lillebillede9" id="lillebillede1" src="bill9.gif" class="lilbill">
  <img name="lillebillede10" id="lillebillede1" src="bill10.gif" class="lilbill">
  <img name="lillebillede11" id="lillebillede1" src="bill11.gif" class="lilbill">
  <img name="lillebillede12" id="lillebillede1" src="bill12.gif" class="lilbill">
  <img name="lillebillede13" id="lillebillede1" src="bill13.gif" class="lilbill">
  <img name="lillebillede14" id="lillebillede1" src="bill14.gif" class="lilbill">
  <img name="lillebillede15" id="lillebillede1" src="bill15.gif" class="lilbill">
  <img name="lillebillede16" id="lillebillede1" src="bill16.gif" class="lilbill">
</div>

Css-koden bliver så (den skal placeres i head-sektionen !-)

<style type="text/css">
#img-container{
  position:relative;
  width:400px;
  height:400px;
}
#stortbillede{
  position:absolute;
  width:400px;
  height:400px;
  z-index:-1;
}
.lilbill{
  position:relative;
  float:left;
  width:100px;
  height:100px;
  z-index:1;
}
</style>

-- og en javascript-kode (jeg plejer at sætte det i headeren, for så kan det nemt klippes over i en ekstern fil, når man er færdig med at teste !-)

<script type="text/javascript">
function applyOnclick(){
  var img = document.images;
  for(i=0;img.length>i;i++){
    if(img[i].className=='lilbill'){
      img[i].onclick = function(){showBig(this);}
    }
  }
}
var raekkefolge,num,intId,ny = true;
function showBig(elm){
  if(ny)ny = !ny;
  else return;
  if(new
  var id=elm.name.replace(/^.*?(\d+)$/,"$1"),tmp,n;
  num = 0;
  raekkefolge = new Array();
  for(i=0;16>i;i++)raekkefolge[i] = i+1;
  for(i=0;16>i;i++){
    n = Math.floor(Math.random()*raekkefolge.length);
    tmp = raekkefolge[i];
    raekkefolge[i] = raekkefolge[n];
    raekkefolge[n] = tmp;
  }
  document.images['stortbillede'].src = "billede" + id + ".gif";
  intId = setInterval('hideSmall()',200);
}
function hideSmall(){
  document.getElementById('lillebillede'+raekkefolge[num++]).style.display='none';
  if(num==16){clearInterval(intId);ny = true;}
}
window.onload = applyOnclick;
</script>

-- I eksemplet hedder de små billeder så bill1 - bill16 (.gif !-) og de tilsvarende store hedder billede1 - billede16 (også .gif !-)

-- og det er skrevet direkte ind her, da jeg alligevel ikke havde billed-materiale at teste med, så sandsynligvis er der en tavetosse eller to, men hvis du har nogle billeder, som kan bruges kan du jo prøve at lægge et link, hvis der er fejl !-)

Hov, linjen med
  if(new
er en fejl og skal fjernes !-)

-- og de 200 i setInterval er 0,2 sekunder, den kan du jo prøve at lege lidt med ...

-- og id'erne på alle de små billeder skal selvfølgelig rettes, så de følges ad med navnene !o]

Det ser lovende ud - jeg er lige kommet hjem - roder med det her i aften og melder tilbage

Hej roenving,
jeg har rodet med din kode og det virker næsten efter hensigten, der er dog nogle småting jeg ikke kan få til at virke.
Først placeringen af de 16 små billeder og det store der jo skal ligge "nedenunder" dem. Jeg har ikke indsat de rigtige billeder da jeg vil prøve at få det til at virke først. Hvis jeg forstår det rigtigt har du defineret placeringen af div. billeder i CSS delen, men der er som om det store billede ligger efter de små billeder og ikke "under"

...forsat
kan det passe at de små billeder som default har en ramme omkring sig, hvis ja hvor fjerner jeg den.

Når jeg klikker på et af de små billeder så forsvinder de ganske rigtigt, det virker meget cool, men jeg synes ikke de forsvinder i en tilfældig rækkefølge, deforsvinder hele tiden nederst fra højre mod venstre og op efter.

Håber du gider tage dig tid til at hjælpe med at få det til at fungere.
venligst  Michael

lige lidt mere:

  <img name="stortbillede" id="stortbillede" src="default.gif">//er dette en container hvor det store billede (svarende til det lille man klikker på) bliver placeret?

hvad er hvad i det efterfølgende?
  <img name="lillebillede1"//besked til funktionen om hvilket billede der er blevet klikket på. id="lillebillede1"//besked om hvilket stort billede der skal placeres under de 16 små før de forsvinder. src="bill1.gif//navnet på det faktiske lille billede man klikker på" class="lilbill"//reference til styls sheet>

Hrm, den reagerede ikke som jeg havde forventet med placeringen, og da jeg ikke har nogle billder at bruge var det så som så med aftestningen ...

-- men så må vi jo placere dem hårdt !-)

<style type="text/css">
html,body{height:100%;border:0;margin:0;padding:0;}
#img-container{
  position:relative;
  width:400px;
  height:400px;
  padding:0px;
}
#stortbillede{
  position:absolute;
  top:0px;
  left:0px;
  width:400px;
  height:400px;
  z-index:-1;
}
.lilbill{
  position:absolute;
  top:0px;
  left:0px;
  float:left;
  width:100px;
  height:100px;
  z-index:1;
  border:0;
  margin:0;
  padding:0;
}
</style>

<div id="img-container">
  <img name="stortbillede" id="stortbillede" src="default.gif">
  <img name="lillebillede1" id="lillebillede1" src="bill1.gif" class="lilbill">
  <img name="lillebillede2" id="lillebillede2" src="bill2.gif" class="lilbill" style="left:100px;">
  <img name="lillebillede3" id="lillebillede3" src="bill3.gif" class="lilbill" style="left:200px;">
  <img name="lillebillede4" id="lillebillede4" src="bill4.gif" class="lilbill" style="left:300px;">
  <img name="lillebillede5" id="lillebillede5" src="bill5.gif" class="lilbill" style="top:100px;">
  <img name="lillebillede6" id="lillebillede6" src="bill6.gif" class="lilbill" style="top:100px;left:100px;">
  <img name="lillebillede7" id="lillebillede7" src="bill7.gif" class="lilbill" style="top:100px;left:200px;">
  <img name="lillebillede8" id="lillebillede8" src="bill8.gif" class="lilbill" style="top:100px;left:300px;">
  <img name="lillebillede9" id="lillebillede9" src="bill9.gif" class="lilbill" style="top:200px;">
  <img name="lillebillede10" id="lillebillede10" src="bill10.gif" class="lilbill" style="top:200px;left:100px;">
  <img name="lillebillede11" id="lillebillede11" src="bill11.gif" class="lilbill" style="top:200px;left:200px;">
  <img name="lillebillede12" id="lillebillede12" src="bill12.gif" class="lilbill" style="top:200px;left:300px;">
  <img name="lillebillede13" id="lillebillede13" src="bill13.gif" class="lilbill" style="top:300px;">
  <img name="lillebillede14" id="lillebillede14" src="bill14.gif" class="lilbill" style="top:300px;left:100px;">
  <img name="lillebillede15" id="lillebillede15" src="bill15.gif" class="lilbill" style="top:300px;left:200px;">
  <img name="lillebillede16" id="lillebillede16" src="bill16.gif" class="lilbill" style="top:300px;left:300px;">
</div>

Ikke helt:

<img name="lillebillede1"//gammeldags reference til elementer på en webside id="lillebillede1"//nutidig reference til elementer på en webside src="bill1.gif//navnet på det faktiske lille billede man klikker på" class="lilbill"//reference til stylesheet>

Nu ser det helt rigtigt ud, jeg takker mange gange - hvad med et svar så du kan få dine point.

Må jeg vende tilbage med spørgsmål når jeg har nærlæst koden, hvis der er noget jeg ikke forstår?

Har du nogen ide om hvilke browsere der forstår koden, jeg mener nok det modsatte; er der nogle browsere der ikke vil kunne vise ovenstående kode som en webside?

Endnu engang mange tak for hjælpen
Michael

Hvis du husker at placere style-tagget i head-sektionen, og div'erne i body-delen af en standard html-kode skulle _alle_ nutidige pc-, *nix og mac-baserede browsere kunne se den !-)

Husk at en minimal html-fil bør se sådan ud:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titlen i titelbaren</title>
<!--
  Her _skal_ evt. meta-, link- og style-tags placeres ...
  script-tags bør også placeres her for overskuelighedens skyld !-)
-->
</head>
<body>

</body>
</html>

-- og velbekomme '-)

Så siger jeg mange tak.
Michael

-- og jeg takker for point ;~}